Cypress Tips November 2022
Cypress testing comes full circle 🟢
Component Testing 🎉
Wow, how time flies. A little plaything I started right before New Year in 2017 is now considered production ready and gives Cypress Test Runner a real chance to complete the testing “Trifecta”: end-to-end, component, and API testing.
The component testing has changed only a little over the years. The main feature - mounting the framework component and testing it like a real mini web application remains unchanged. I showed the early version of the component testing at AssertJS in 2018, find the slides here, the current production release really reflects my vision. My favorite people explain the component testing in practice in these two videos from TestJS Summit:
Murat Ozcan “CCTDD: Cypress Component Test Driven Design” https://portal.gitnation.org/contents/cctdd-cypress-component-test-driven-design
Filip Hric “Full-Circle Testing With Cypress” https://portal.gitnation.org/contents/full-circle-testing-with-cypress
Both talks are really good, I highly recommend watching them. Of course, if you want to watch my latest take on Cypress component testing, here is a 25-minute talk from last month called “The Fuzzy Line Between End-to-End And Component Tests”
Presentations
I have made one more presentation about how we do testing at Mercari US, check it out: “Tips & Tricks For Writing Fast And Maintainable Front-End Tests”. This is the 6th presentation about my team’s approach to web testing and running many tests. Find the slide decks at https://slides.com/bahmutov/decks/mercari.
One other presentation I am really proud of - this weekend I have shown “Is there anything GitHub Actions cannot do?!“ about my favorite CI system. It is not just Cypress, but a long presentation (I had a 60-minute timeslot) covering the why and how of GitHub Actions. Find the slides at https://slides.com/bahmutov/actions.
My next talk will be in December at Global Testing Summit. You will probably like the title “The Debate Between Cypress and Playwright”. I better get all my slides and examples ready! Full disclosure: I have described my take on the test runner architecture in the blog post “Cypress vs Other Test Runners“ https://glebbahmutov.com/blog/cypress-vs-other-test-runners/. In the upcoming talk I will concentrate on the test writing mechanics and developer experience when using both test runners.
Videos
4K people subscribed to my YouTube Channel where I post short solutions to Cypress questions (also recorded in 4K resolution!). One of the most popular videos from the last month shows how to “Solve The Detached Button Click Error”. I see that the Cypress team has been working on re-querying the DOM elements through the entire command chain, let’s see if it solves the majority of such errors when it gets released.
A lot of these videos are born when I add examples and recipes to my https://glebbahmutov.com/cypress-examples repo. It now has > 500 working tests showing Cypress commands in actions, plus larger recipes. I started this site https://github.com/bahmutov/cypress-examples as an easy way to replace the Kitchensink. By using Markdown files as specs, I have been able to quickly grow the example count from 100 to >500.
Tip: you can find videos and examples answering your Cypress questions from the page https://cypress.tips/search which scrapes video descriptions, my blog posts, etc. I get a report every week with search queries that produced no results, and this is a good source of ideas for my future videos and blog posts.
Happy Component Testing! 🎉