https://currents.dev/_next/static/chunks/4171.db8c98397865eb41.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4171],{29719:(e,t,s)=>{s.d(t,{A:()=>a});let a=(0,s(60927).A)("outline","cpu","Cpu",[["path",{d:"M5 6a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1l0 -12",key:"svg-0"}],["path",{d:"M9 9h6v6h-6l0 -6",key:"svg-1"}],["path",{d:"M3 10h2",key:"svg-2"}],["path",{d:"M3 14h2",key:"svg-3"}],["path",{d:"M10 3v2",key:"svg-4"}],["path",{d:"M14 3v2",key:"svg-5"}],["path",{d:"M21 10h-2",key:"svg-6"}],["path",{d:"M21 14h-2",key:"svg-7"}],["path",{d:"M14 21v-2",key:"svg-8"}],["path",{d:"M10 21v-2",key:"svg-9"}]])},54340:(e,t,s)=>{s.d(t,{A:()=>a});let a=(0,s(60927).A)("outline","bolt","Bolt",[["path",{d:"M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11",key:"svg-0"}]])},84171:(e,t,s)=>{s.r(t),s.d(t,{default:()=>v});var a=s(37876),r=s(60927);let l=(0,r.A)("outline","checks","Checks",[["path",{d:"M7 12l5 5l10 -10",key:"svg-0"}],["path",{d:"M2 12l5 5m5 -5l5 -5",key:"svg-1"}]]);var i=s(54340),n=s(29719);let d=(0,r.A)("outline","browser","Browser",[["path",{d:"M4 8h16",key:"svg-0"}],["path",{d:"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12",key:"svg-1"}],["path",{d:"M8 4v4",key:"svg-2"}]]),c=(0,r.A)("outline","battery","Battery",[["path",{d:"M6 7h11a2 2 0 0 1 2 2v.5a.5 .5 0 0 0 .5 .5a.5 .5 0 0 1 .5 .5v3a.5 .5 0 0 1 -.5 .5a.5 .5 0 0 0 -.5 .5v.5a2 2 0 0 1 -2 2h-11a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2",key:"svg-0"}]]),h=(0,r.A)("outline","star","Star",[["path",{d:"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245",key:"svg-0"}]]);var o=s(18847),m=s.n(o),x=s(54587),p=s.n(x);s(14232);let g={src:"/_next/static/media/npm-trend.b245b844.png",height:384,width:384,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAADFBMVEX+/v7/9/Dy+P3/8eNL1Os6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAJElEQVR4nGNgAAFGMAliQFmMzFAGM4jBCAEwRQwMDExQABcBAAS2ACfsxMf9AAAAAElFTkSuQmCC",blurWidth:8,blurHeight:8},u=m()(()=>s.e(522).then(s.bind(s,40522)),{loadableGenerated:{webpack:()=>[40522]}}),v=()=>(0,a.jsx)(a.Fragment,{children:(0,a.jsxs)("section",{className:"pt-16 pb-8 md:pt-32 md:pb-20 max-w-7xl mx-auto md:px-6 px-5",children:[(0,a.jsxs)("div",{className:"grid md:grid-cols-2 gap-6 items-center mb-6",children:[(0,a.jsxs)("h3",{className:"font-semibold lg:text-h3 md:text-h3mdi text-h3mob font-poppins text-center",id:"why",children:["Why top teams are ",(0,a.jsx)("br",{}),"switching to Playwright"]}),(0,a.jsx)("a",{href:"https://npmtrends.com/cypress-vs-playwright",target:"_blank",rel:"nofollow",className:"",children:(0,a.jsxs)("div",{className:"flex p-4 border border-white/5 rounded-2xl items-center gap-6 mx-auto hover:bg-dark-100",children:[(0,a.jsx)(p(),{src:g,alt:"NPM trends",className:"rounded-2xl h-32 w-32",width:384,height:384,quality:100}),(0,a.jsxs)("div",{className:"text-white/70",children:[(0,a.jsxs)("div",{children:["Playwright overtook Cypress in"," ",(0,a.jsx)("span",{className:"text-link",children:"NPM installs"})," in 2024."]}),(0,a.jsx)("div",{className:"mt-2",children:"Now getting over 2\xd7 the installs of Cypress"})]})]})})]}),(0,a.jsx)("div",{className:"grid md:grid-cols-2 gap-6",children:[{icon:(0,a.jsx)(l,{size:24,className:"text-emerald-400"}),title:"Less Flakiness",description:(0,a.jsx)(a.Fragment,{children:(0,a.jsxs)(u,{className:"lg:text-sm text-white/70 mt-2",children:["Playwright’s architecture reduces test flakiness by design. It runs tests in isolated browser contexts, uses native events (not simulated ones), and avoids Cypress’s common failure points like iframes, async chaining issues, and browser quirks. That means fewer reruns, faster feedback, and less time debugging CI-only failures.",(0,a.jsx)("a",{href:"https://currents.dev/posts/cypress-vs-playwright-flakiness-comparison",className:"text-emerald-400 hover:text-emerald-300 underline mt-2 block",target:"_blank",children:"Teams are experiencing 15.60% less flakiness with Playwright."})]})})},{icon:(0,a.jsx)(i.A,{size:24,className:"text-emerald-400"}),title:"Faster",description:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(u,{className:"lg:text-sm text-white/70 mt-2",children:"Cypress runs one test per process and takes seconds just to boot. Playwright’s lightweight runner executes multiple tests per machine in parallel, drastically reducing test duration and CI wait time."}),(0,a.jsxs)("ul",{className:"list-inside list-disc mt-2 lg:text-sm md:text-[18px] text-[16px] text-dark-700 lg:leading-[1.8] leading-relaxed md:font-normal font-medium",children:[(0,a.jsx)("li",{children:(0,a.jsx)("a",{href:"https://currents.dev/posts/currents-and-ramp",target:"_blank",className:"text-emerald-400 hover:text-emerald-300 underline",children:"Ramp cut test duration by 32%"})}),(0,a.jsx)("li",{className:"mt-1",children:(0,a.jsx)("a",{href:"https://medium.com/lingvano/how-we-reduced-testing-time-by-70-by-moving-from-cypress-to-playwright-32a731d468ba",target:"_blank",className:"text-emerald-400 hover:text-emerald-300 underline",children:"Lingvano reduced CI time by 70%"})}),(0,a.jsx)("li",{className:"mt-1",children:(0,a.jsx)("a",{href:"https://www.checklyhq.com/blog/cypress-vs-selenium-vs-playwright-vs-puppeteer-speed-comparison/",target:"_blank",className:"text-emerald-400 hover:text-emerald-300 underline",children:"Checkly found Playwright to be ~23% faster"})})]})]})},{icon:(0,a.jsx)(n.A,{size:24,className:"text-emerald-400"}),title:"Cheaper to run",description:(0,a.jsx)(a.Fragment,{children:(0,a.jsxs)(u,{className:"lg:text-sm text-white/70 mt-2",children:["With faster feedback loops and fewer reruns due to flake, Playwright reduces both direct CI cost and indirect developer time waste.",(0,a.jsx)("a",{href:"https://currents.dev/posts/currents-and-ramp",className:"text-emerald-400 hover:text-emerald-300 underline mt-2 block",children:"Ramp reduced their CI usage by 62%"})]})})},{icon:(0,a.jsx)(d,{size:24,className:"text-emerald-400"}),title:"Supports Safari (WebKit)",description:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("ul",{className:"list-inside",children:[(0,a.jsx)("li",{children:(0,a.jsxs)(u,{className:"lg:text-sm text-white/70",children:[(0,a.jsx)("strong",{children:"Cypress:"})," Experimental support since 2022"]})}),(0,a.jsx)("li",{children:(0,a.jsxs)(u,{className:"lg:text-sm text-white/70",children:[(0,a.jsx)("strong",{children:"Playwright:"}

1)," Built-in support for Chromium, Firefox, and WebKit (Safari)"]})})]}),(0,a.jsx)(u,{className:"lg:text-sm text-white/70 mt-2",children:"Teams looking to cover all major browsers cannot rely on Cypress."})]})},{icon:(0,a.jsx)(c,{size:24,className:"text-emerald-400"}),title:"Batteries included",description:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(u,{className:"lg:text-sm text-white/70 mt-2",children:"Playwright ships with native support for critical features like trace viewer, test retries, code coverage, accessibility testing, visual comparisons, and multi-tab flows — with no plugins, no configuration, and no paywalls."}),(0,a.jsxs)(u,{className:"lg:text-sm text-white/70 mt-2",children:["In contrast,"," ",(0,a.jsx)("a",{href:"https://currents.dev/posts/cypress-playwright-for-tech-leaders#the-cost-of-ownership",target:"_blank",className:"text-emerald-400 hover:text-emerald-300 underline",children:"Cypress lacks many of these features natively"}),". Some are only available through community plugins (with maintenance risks), while others, like parallelization, flake detection, or advanced reporting are locked behind a paid plan."]})]})},{icon:(0,a.jsx)(h,{size:24,className:"text-emerald-400"}),title:"Enterprise Ready",description:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(u,{className:"lg:text-sm text-white/70 mt-2",children:"Playwright is built on modern browser APIs with a flexible, low-level architecture that scales with your organization’s needs."}),(0,a.jsx)(u,{className:"lg:text-sm text-white/70 mt-2",children:"Its open tooling, strong ecosystem, and growing community make it a safe long-term choice for engineering leaders who need reliability, extensibility, and control across large, distributed teams."})]})}].map((e,t)=>(0,a.jsxs)("div",{className:"border border-white/5 rounded-2xl p-6 transition-colors flex gap-4",children:[(0,a.jsx)("div",{className:"bg-emerald-400/10 min-w-12 h-12 rounded-lg flex items-center justify-center",children:e.icon}),(0,a.jsxs)("div",{children:[(0,a.jsx)("strong",{className:"block text-white text-[18px] mb-2",children:e.title}),e.description]})]},t))})]})})}}]);