Imagine you are building an online shopping site. Your goal is to build the best customer-to-customer site, similar to mercari.com 😉. When the user enters a new listing details. the system tries to suggest the best shipping option; the online commerce lives and dies by the shipping rates. So you wan...

Let's take a sample Cypress project bahmutov/cypress-cloud-skill-example with recorded Cypress test runs on CI. For simplicity there is just one spec cypress/e2e/spec.cy.js with 3 passing testscypress/e2e/spec.cy.js12345describe('Suite A', () => { it('works 1', () => {}) it('works 2', () => {}) it('...

Recently I saw a Linkedin post that shows "before & after" API test using Cypress. Here is the screenshot included in the post.Right away, I want to say that the "after" test is better. It checks the response status first, then confirms the types and ranges of values, rather than hard codes the new ...

Let's say you have a long-ish Cypress test and you know a place where it might fail. You want to stop / skip the test commands. What options do you have for stopping Cypress tests?Imagine these two specs in our project12345678910111213141516171819202122// cypress/e2e/spec-a.cy.jsdescribe('Suite 1', ...

Imagine a typical application that loads some data. The app starts in the initial state, starts loading, then one of 3 possible states are possibleThe data loads fineThe data loads an empty list of itemsThe app fails to load due to an errorTo avoid flake, we need to think about these 3 states. If we...

Have you ever encountered end-to-end test error "... failed because the page updated as a result of this command, but you tried to continue the command chain. The subject is no longer attached to the DOM"?The example above shows the test trying to click on the button, yet the command fails.1234// th...

Let me get back to the testing of negative states one more time. Recently, I have read a pretty good blog post How to test that cache works with Cypress by Walmyr.A piece of Cypress test syntax caught my eye:1234567891011121314cy.search(randomWord).then(() => { expect(count, `network calls to fetch ...

Imagine a simple web application scenario: you click on a button. App tries to load some data. The data might load, or the backend might return an error. You write a Cypress test:123cy.visit('cypress/fetch-fails-sometimes.html')cy.contains('button', 'Fetch data').click()cy.contains('#data', 'Fetched...

Cypress-the-company is putting a lot of effort behind its cy.prompt command (which I recreated in cypress-think), so let's see if it is any good.I took a simple login form and tried to create a test using three different approaches:coding in VSCode using "update the test / Cypress reruns it / update...

Finally, it has happened. Cypress v15.14 supports TypeScript v6. This is a big deal - TypeScript v6 is the last step before TypeScript v7 which is implemented in Go and is much faster. By the way, you can try TypeScript v7 beta today. So what do you need to switch your projects to use TS v6 with Cyp...

I have a little web app called Gametime I use to keep track of players during youth soccer matches. Recently I decided to add a11y testing to ensure the text is readable, inputs have labels, etc. Since I already had Cypress end-to-end tests covering all features of the app, I just needed 60 seconds ...

Every individual item sold on Mercari.com has an id that looks like m<number>. If you buy several items from the same seller, you get a discount because you buy it as a bundle. Every bundle has its own unique id that looks like b<number>. Both ids are strings, yet they have a certain format that dif...

Recently Cypress announced a change in how it will handle environment variables. Variables were always public and accessible to the application under test in the browser (via calling Cypress.env() method), but now you can have truly private values. I published a blog post Migrating From Cypress.env ...

Cypress v15.10.0 has announced a big switch coming in v16 - the new way of dealing with environment values and secrets. Let's see why this change is necessary, what is means for your testing code, and what the best practices for handling secrets in your tests should be.First, let me say: Cypress end...

At the end of 2025, NPM registry revoked all personal NPM tokens that I used to publish new NPM package releases. This change improves the security of the entire NPM publishing workflow, but has disrupted my CI process. For example, the new feature of cypress-timestamps has not been released, failin...

Imagine you are testing a TodoMVC application, and you need to complete all items. You simply click every checkbox and confirm the application preserves the "0 todos left" state. Normally everything goes well:But sometimes a weird thing happens: one or more checkboxes remain unchecked!📺 Watch the ex...

If you are testing a website, the DEV dependencies do not change very often. You might bump Cypress version once in a while, add or upgrade a Cypress plugin, but in general the Node dependencies are changed less frequently than the spec files. Thus running npm ci on every test job is bound to be rep...

This year I am reclaiming my attention span away from my iPhone. Lately, I have noticed that while reading or working, I reach for my phone to check email / BlueSky every couple of minutes. I tried to force myself to focus on work / book by using a timer; do not touch the phone until the timer is up...

Here is something I have noticed about my projects and using Copilot lately. When I add a new NPM dependency, I also update the Copilot instructions file to include examples of how I want to use that dependency in my tests.For example, let's say I need to test if item prices on the inventory page ar...

Loading skeletons are displayed while the real data is loading. For example, the login passwords are displayed after 1 second in the GIF below, and the loading skeleton is displayed first.The skeleton itself is simple, just a DIV with some gradient CSS.src/pages/Login.jsx1234567891011121314151617181...

In Cypress you can save values under aliases which is pretty handy. You can get the aliased value using the cy.get, or by using a cy.then(function () { ... }) callback, or (my favorite solution) using the alias in the next hook or test callback via this.[alias] property12345678910111213141516171819b...

Well, I am happy to report Cypress-the-company is all in on test auto-healing in its new cy.prompt command (which I recreated locally as cypress-think plugin). Let's look at the screenshots Cypress put in the blog post:The test shows Cypress auto-healing in practice. The test had a prompt like "Turn...

Let's say you need to specify a timeout or wait in your end-to-end Cypress tests. You would use milliseconds1234// try finding the "selector" elements for up to 1 secondcy.get('selector', { timeout: 1_000 }) // then wait for 5 seconds .wait(5_000)For clarity, you could write a helper to convert seco...

This year I am producing "Cypress vs Playwright Advent Calendar" on my Cypress Tips newsletter.Day 1: global vs local variablesDay 2: The difference in test command syntaxDay 3: DOM Snapshots vs live applicationDay 4: Where do the end-to-end tests run?Day 5: Locators and selectorsDay 6: Composite lo...

Imagine we are testing a web page that receives two numbers from the server and then shows their sumIn the Command Log you can see the two GET /random-digit calls the web page makes to the server. The server responds with {n: ...} JSON object. The page should add these two numbers and show the corre...

I have described using Use Copilot Instructions And Page Objects to quickly develop end-to-end Cypress tests. This blog post gives another concrete example. You can find the source code in the repo bahmutov/copilot-instructions-example. First, I wrote a page object file to implement common TodoMVC a...

Imagine you are testing a web page showing the purchase receipt.When the user clicks on the "View Summary" button, a dialog pops up showing just the total amount paidcypress/e2e/receipt.cy.js123456describe('Receipt', () => { it('shows the price on the receipt', () => { cy.visit('app/index.html') cy....

Recently I watched a pretty good video Cypress vs Playwright side-by-side coding comparison. by Artem Bondar. While not as good as my Cypress vs Playwright course, the video is pretty solid. There is one point Artem makes in the beginning that he did not stress enough, but which determines how each ...

Testers and developers often use page objects to interact with their web applications via DOM elements. Let's create a page object for our TodoMVC app:cypress/e2e/todo.ts123456789export const TodoMVC = { addTodo(title: string) { cy.get('.new-todo').type(`${title}{enter}`) }, getTodos() { return cy.g...

As I explained in my previous blog post on feature flags and testing, you need the flags to be the same to ensure consistent application behavior during end-to-end tests. If you want to test the specific feature, control the flag from the test. But sometimes the tests unexpectedly fail when one of t...