Cypress Tips October 2024
Videos and presentations, Cypress vs Playwright workshop, American elections
HUSTEF Conference presentation
Recently, I had the pleasure of attending and speaking at the Hungarian Testing Conference in Budapest. I spoke about running lots of end-to-end tests daily and wisely picking the tests to execute for a specific pull request. My slides, “Fast E2E Testing Using Cypress For Free, “are available at https://slides.com/bahmutov/fast-and-free-e2e.
Thanks to the audience members for giving my presentation a very high rating; it is much appreciated.
TL;DR
when running all tests, run them in parallel. Use cypress-split if you want to do it for free.
when testing a pull request, run the affected tests first. You can find affected E2E tests by inspecting the front-end code changes. See the presentation slides for my approach and links to the blog posts and plugins.
Testing page layout
My latest 3 videos all test the layout properties of HTML elements: position and size.
TL;DR
get the layout property as a number by parsing the returned string. For example, the height is returned as a string “XYpx”, you can parse it through “then(parseFloat)”
compare layout numbers using “closeTo” assertion that allows you to specify the tolerance. This avoids failing the test when the computed floating-point numbers differ by tiny imperceivable amounts
Tip: the above videos explain the recipes available on my https://glebbahmutov.com/cypress-examples/ site. You can find relevant tested Cypress command examples by searching it directly or by using https://cypress.tips/search
New blog posts
📝 Testing CSS Print Media Styles shows the cypress-cdp plugin in action. Turn on “media: print” during your tests, and restore the “media: screen” afterward.
// https://github.com/bahmutov/cypress-cdp
import 'cypress-cdp'
describe('Finish page', () => {
beforeEach(() => {
// reset the CSS media emulation
cy.CDP('Emulation.setEmulatedMedia', { media: 'screen' })
})
context('Print', () => {
it('hides the links when printing', () => {
cy.CDP('Emulation.setEmulatedMedia', { media: 'print' })
cy.get('table tbody').should('be.visible')
cy.get('footer').should('not.be.visible')
})
})
})📝 Cypress Env Types explains how you can type values returned by the
Cypress.env(key)command.
📝 Cypress Local Storage Example explains Cypress command queue and how to call the synchronous
localStorage.getItemandlocalStorage.setItemmethods during your tests. Here is a short example; we can set the initial value immediately, and then change it after a part of the test finishes
it('uses the initial value', () => {
window.localStorage.setItem('value', '42')
cy.visit('public/index.html')
cy.contains('#value', '42')
// invoke the localStorage.setItem method call
// AFTER finishing the above "cy.contains" command
cy.window().its('localStorage').invoke('setItem', 'value', '90')
cy.reload()
cy.contains('#value', '90')
})Tip: you can visualize the commands in the queue using my plugin cypress-command-chain
📝 Cypress Namespaces For Custom Commands answers a question a Cypress user asked on my Discord server: can you group custom commands instead of attaching them all to the global “cy” object? Yes, you can, it is just JavaScript!
// instead of "flat" cy.add commands
cy.add(2, 3).should('equal', 5)
// you can use custom namespace name
cy.math.add(2, 3).should('equal', 5)Here is how VSCode understands the cy.math.add method
cy.math namespace methodsBeautiful.
Cypress Vs Playwright Workshop
I have updated and released the full open-source “Cypress Vs Playwright” workshop. Find the markdown content at https://github.com/bahmutov/cypress-workshop-cy-vs-pw, the hosted slides at http://glebbahmutov.com/cypress-workshop-cy-vs-pw, and the example application at https://github.com/bahmutov/cy-vs-pw-example-todomvc. The workshop goes through several testing exercises: UI testing, API requests, clock control, etc. You get the starting code for each exercise and need to write the solution to each exercise using Pw and Cy test runners. Which solution do you like better? Try it!
🎓 This workshop covers part of my full online course “Cypress Vs Playwright” https://cypress.tips/courses/cypress-vs-playwright The course has more lessons plus videos showing the solutions to each exercise.
American Elections 🇺🇸
I am your typical “everyone, do your thing” kind of guy. But this is no typical US election; a deranged convicted criminal wants to burn down the country I call home. This is why I endorse Kamala Harris for president. I hope I earned your trust with my work to make this endorsement meaningful.
If you are an American citizen, please do not sit out this election; register at https://vote.gov/ and vote for normal life against an agent of chaos.
Cheers