Cypress Tips February 2023

Sending some ❤️ to your tests

We got together with Filip Hric and talked about running tests in parallel using cypress-split, my advice on making the tests readable, and lots of other things. You can watch the video below:

Do YOU want to run Cypress tests in parallel for free? Then you need to read “Run Cypress Specs In Parallel For Free” and use cypress-split plugin. Works with GitHub Actions, CircleCI, GitlabCI, and any other CI really. Do you want a combined HTML report at the end, with screenshots and videos? I looked into Mochawesome reporters, and even added a single option to merge parallel test results to my reusable Cypress workflows, see the blog post “The Battle of Cypress Mochawesome Reporters” below.

Blog posts

Here are my latest blog posts about Cypress testing:

• Test HTML Tables Using cy.table Query Command

• Required Tags

• Run Cypress Specs In Parallel For Free 👈 This post will save you 💰💰💰

• Cypress Mochawesome HTML Reports

• Stub The Unstubbable

• The Battle of Cypress Mochawesome Reporters

• Cypress CSRF Form Testing

• Trying ArrowJS (includes Vite and component testing)

• React Native Web Component Testing Using Cypress And Vite

• Two Simple Tricks To Make Your Cypress Tests Better

  • TLDR; use cy.log instead of code comments, use cy-spok

• The Zen Of Cypress Data Setup

async / await

The last link (The Zen of Cypress Data Setup) goes to the heart (well, it is February after all) of the discussion: do you need async/await inside your Cypress tests? In the blog post, I refactor the data setup from one method to another and back. Can you guess which code is using async/await and which one is straight Cypress? Which one is easier to code and understand?

Test data initialization using async/await (left) and plain Cypress commands (right)

I know many people would disagree with my opinion. Here is my call: give me a public repo that you want to use await instead of Cypress chains, and I will show how to refactor it to be as clear as the code on the right side of the image above.

Conferences

I am coming to ConFoo.CA in Montreal at the end of February. I will do a full-day Cypress workshop, there is still time to sign up plus attend the conference itself.

Cypress workshop coming up at ConFoo.CA conference

In March I will attend the local Massachusetts conference called NERD. I will speak about the new and shiny Node.js test runner.

Videos

I have been recording tiny videos teaching my Cypress tips & tricks. The full playlist now includes more than 400! Here are some of the videos published in the last 3 weeks:

• A Cypress Example With Disabled Button And Has Text jQuery Selectors

• Multiple :has Selector Clauses

• SVG Loader Example

• Confirm Table Column

• Intercept Two API Calls Using Regular Expressions Exercise

• Wait For SVG Animate Transform End Event

• Test window.open Example

• Test Mailto HREF Anchor Links

• Cypress cy.as Alias Types: Query vs Static

• Cypress v12.5.0 Debug Tab

• Delete Cypress Videos For Passing Specs

• Use cypress-map Queries To Validate A Row In A Table

• Confirm Text In Multiple Page Elements Using cy-spok

• Complex Find Table Rows Example

• How To Check Visibility Of Many Elements

When I look at the video analytics, it is nothing but 💕💕💕💕 Thank you.

The same situation repeats for my 400+ Cypress videos 🎉

Do you have a question about Cypress that does not have an answer at https://cypress.tips/search? Let me know, maybe it will be a topic for my future video or blog post. Just be warned: it might become a lesson in my paid Cypress Courses! 😉