{"id":412,"date":"2026-07-03T05:00:54","date_gmt":"2026-07-03T05:00:54","guid":{"rendered":"https:\/\/abrarqasim.com\/blog\/playwright-vs-cypress-2026-the-day-i-ripped-out-cypress\/"},"modified":"2026-07-03T05:00:54","modified_gmt":"2026-07-03T05:00:54","slug":"playwright-vs-cypress-2026-the-day-i-ripped-out-cypress","status":"publish","type":"post","link":"https:\/\/abrarqasim.com\/blog\/playwright-vs-cypress-2026-the-day-i-ripped-out-cypress\/","title":{"rendered":"Playwright vs Cypress in 2026: The Day I Ripped Out Cypress"},"content":{"rendered":"

Okay, confession: I resisted moving to Playwright for two years. Every couple of months I’d read a benchmark comparing it to Cypress, nod politely, decide our test suite worked fine, and go back to whatever I was actually shipping. Then a flaky auth test cost me a Saturday morning, and by the end of that Saturday my repo had playwright.config.ts<\/code> in it.<\/p>\n

I’m not going to tell you Playwright is objectively better than Cypress. What I’ll tell you is this: after six months of running both side by side on real projects, here are the honest tradeoffs. The parts nobody puts in the “why we switched” blog posts. The parts I only figured out by breaking things.<\/p>\n

Short version for the impatient: Playwright won for me because of multi-context tests, real cross-browser support, and better parallelism out of the box. Cypress is still the better answer if component testing is most of what you do. If neither of those sentences describes your situation, don’t switch on my say-so.<\/p>\n

The specific test that broke me<\/h2>\n

We had a login flow that opened a Google OAuth popup in an incognito window. Cypress has historically hated two things: iframes and multi-tab flows. We’d worked around it with a mock OAuth server for CI and a manual test in staging. That combination worked fine until a subtle session bug reproduced only when the same user was logged in on two devices at once.<\/p>\n

I tried three Cypress workarounds. Each one added a coordination layer I’d have to maintain forever. Playwright’s browserContext<\/code> handles this in about six lines:<\/p>\n

import { test, expect } from '@playwright\/test';\n\ntest('cross-tab session sync', async ({ browser }) => {\n  const context = await browser.newContext();\n  const tab1 = await context.newPage();\n  const tab2 = await context.newPage();\n\n  await tab1.goto('\/login');\n  await tab1.getByLabel('Email').fill('me@example.com');\n  await tab1.getByLabel('Password').fill('correct-horse');\n  await tab1.getByRole('button', { name: 'Sign in' }).click();\n\n  await tab2.goto('\/dashboard');\n  await expect(tab2.getByText('Welcome back')).toBeVisible();\n});\n<\/code><\/pre>\n
Two tabs, same context, real cookies, no plugin. Cypress can approximate this with cy.session<\/code> and some cy.window<\/code> gymnastics, but it’s an approximation, and I could feel my future self debugging it at 2am. The Playwright browser contexts docs<\/a> explain the model well if you’re new to it.<\/p>\n
What Playwright does that Cypress can’t yet<\/h2>\n
Three things flipped my opinion after that test.<\/p>\n
Real multi-browser support.<\/strong> Playwright drives Chromium, Firefox, and WebKit from the same test runner. I can catch a Safari-only bug in CI without renting a Mac runner just to do so. Cypress supports Firefox in mainline now, but WebKit is still an experimental paid feature<\/a> and not shipped in the open-source runner as I write this. If your users are on iOS at all, this matters more than the benchmarks suggest.<\/p>\n
Actual parallelism.<\/strong> Playwright’s test runner shards work across CPU workers by default. Our suite dropped from 11 minutes to 3 minutes on the same GitHub Actions machine, no config change beyond bumping workers: 4<\/code> in playwright.config.ts<\/code>. Cypress can parallelize too, but historically it’s leaned on Cypress Cloud (paid) for the smart splitting. That’s not a criticism, just a different business model.<\/p>\n
Auto-waiting that mostly holds up.<\/strong> Both tools auto-wait for elements. Playwright’s built-in retries around expect()<\/code> felt less flaky in practice. I’m not going to claim I have a rigorous benchmark. I have “the number of flaky reruns per week dropped from eight to one.” Take that for what it is.<\/p>\n
None of these are magic. Playwright has its own footguns, which I’ll get to. But if your tests span multiple browsers or contexts, this is the argument I’d actually make.<\/p>\n
The Cypress features I still miss<\/h2>\n
Fair take: I didn’t move away because Cypress is bad. I moved because our use case outgrew it. Things I still miss on a regular basis:<\/p>\n
Time-travel debugging.<\/strong> Cypress’s UI, where you scrub through every command and see the DOM at each step, is still the most discoverable e2e debugging experience I’ve used. Playwright’s trace viewer is close, and honestly technically more powerful, but Cypress felt friendlier for teammates who don’t write tests every day.<\/p>\n
Component testing.<\/strong> Cypress component testing feels tighter than Playwright’s for React and Vue. If most of your suite is component tests rather than full-app e2e, staying on Cypress is a defensible call. I wouldn’t move a Vue component-heavy suite to Playwright right now.<\/p>\n
The docs.<\/strong> Cypress’s tutorial-style docs are easier to onboard onto. Playwright’s docs are more reference-style, which is great when you already know what you’re looking for and less great when you don’t. Reasonable people disagree here.<\/p>\n
I’ve written about a similar “the ecosystem moved, not that the tool got worse” pattern in my Vitest migration notes<\/a>. Tools don’t decay. Your needs shift.<\/p>\n
Migrating without a full rewrite<\/h2>\n
The mistake I made first: I tried to convert every Cypress test at once. Two weeks in I had half a working suite and half a broken one, so I threw the port away and started over with a rule.<\/p>\n
The rule: run both frameworks in parallel for two months. New tests go in Playwright. When an old Cypress test breaks, you have to choose, fix it in Cypress or port it to Playwright. That’s the whole policy. No mass migration script, no all-at-once flag day.<\/p>\n
The conversion itself is usually mechanical. Here’s a typical before\/after from our repo:<\/p>\n
\/\/ Cypress\ndescribe('Signup', () => {\n  it('creates a new account', () => {\n    cy.visit('\/signup');\n    cy.get('[data-testid="email"]').type('new@example.com');\n    cy.get('[data-testid="password"]').type('supersecret');\n    cy.get('button[type="submit"]').click();\n    cy.url().should('include', '\/onboarding');\n  });\n});\n<\/code><\/pre>\n
\/\/ Playwright\nimport { test, expect } from '@playwright\/test';\n\ntest('signup creates a new account', async ({ page }) => {\n  await page.goto('\/signup');\n  await page.getByRole('textbox', { name: 'Email' }).fill('new@example.com');\n  await page.getByRole('textbox', { name: 'Password' }).fill('supersecret');\n  await page.getByRole('button', { name: \/sign up|submit\/i }).click();\n  await expect(page).toHaveURL(\/\\\/onboarding\/);\n});\n<\/code><\/pre>\n
Two things worth noting. Playwright’s getByRole<\/code> locators are more resilient to markup changes than data-testid<\/code> attributes, so I ended up rewriting many selectors during migration and my markup got slightly more accessible as a side effect. And expect(page).toHaveURL(...)<\/code> accepts a regex, which handled our locale-prefixed routes without an extra normalization step.<\/p>\n
For CI, the Playwright CI setup guide<\/a> is a reasonable starting point. I settled on four workers, trace viewer artifacts uploaded only on failed runs, and no Docker image caching (Playwright’s install script is fast enough that caching wasn’t worth the config). Our GitHub Actions bill actually dropped, which was not a benefit I expected.<\/p>\n
One trap worth calling out: if you use cy.intercept<\/code> extensively, mapping it to page.route<\/code> is easy for GETs and gets fiddly for anything involving conditional response mocking. Budget a day for that specifically.<\/p>\n
What to try this week<\/h2>\n
If you’re on Cypress and it’s working, don’t move. Please. I’m not writing this to convince you.<\/p>\n
If you’re feeling the same tab, context, or browser-support pain I felt, try this:<\/p>\n
    \n
  1. Install Playwright side by side: npm init playwright@latest<\/code>. Point it at the same base URL your Cypress suite uses.<\/li>\n
  2. Pick your single flakiest Cypress test. Port only that one to Playwright. Time both runs, honestly. Count reruns over a week.<\/li>\n
  3. If the Playwright version passes reliably and finishes faster, keep going, one flaky test at a time, over a couple of months. Don’t rewrite anything that isn’t already causing you pain.<\/li>\n<\/ol>\n
    That’s the whole plan. Not a manifesto. If you want the fuller stack I use for full-stack testing across API and UI, I’ve written about some of it across my project work<\/a>.<\/p>\n
    The lesson I took from this migration: don’t switch tools because a blog post told you to. Switch when the specific pain your current tool causes outweighs the switching cost. In our case, one lost Saturday was enough. In yours, it might never be. Either answer is fine.<\/p>\n","protected":false},"excerpt":{"rendered":"
    I ran Cypress for years, then moved my e2e suite to Playwright. Here’s what actually broke, what improved, and how I’d do the migration again.<\/p>\n","protected":false},"author":2,"featured_media":411,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"I ran Cypress for years, then moved my e2e suite to Playwright. Here's what actually broke, what improved, and how I'd do the migration again.","rank_math_focus_keyword":"playwright vs cypress","rank_math_canonical_url":"","rank_math_robots":"","footnotes":""},"categories":[197,35],"tags":[449,450,44,448,30,63,172],"class_list":["post-412","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-testing","category-web-development","tag-cypress","tag-e2e-testing","tag-javascript","tag-playwright","tag-testing","tag-typescript","tag-web-development-2"],"_links":{"self":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/comments?post=412"}],"version-history":[{"count":0,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/412\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media\/411"}],"wp:attachment":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media?parent=412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/categories?post=412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/tags?post=412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}