Skip to content

Commit 7fb1eec

Browse files
serverless-momDgiordano33
serverless-mom
and
Dgiordano33
authored
Pwt vcypress (#1096)
* new learn content * add links, other small tweaks --------- Co-authored-by: dgiordano33 <[email protected]>
1 parent f7128d0 commit 7fb1eec

File tree

2 files changed

+216
-1
lines changed

2 files changed

+216
-1
lines changed

‎site/content/learn/playwright/playwright-vs-cypress.md‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
---
2+
title: Playwright vs Cypress - Detailed comparison
3+
subTitle: Key features, and pros & cons of each framework
4+
date: 2024-10-17
5+
author: Nocnica Mellifera
6+
githubUser: serverless-mom
7+
tags:
8+
- basics
9+
weight: 4
10+
displayTitle: Playwright vs Cypress
11+
navTitle: Playwright vs Cypress
12+
menu:
13+
learn:
14+
parent: "Getting started"
15+
---
16+
Playwright and Cypress are two frameworks both closely associated with end-to-end testing of production websites. Both frameworks can do quite a bit more than 'making sure nothing on your site is broken' and their design philosophies, architectures, and use cases are different.
17+
18+
Starting in mid-2024, according to [npmtrends.com](https://npmtrends.com/cypress-vs-playwright), Playwright surpassed Cypress in npm downloads, indicating that more projects are starting with Playwright as their preferred automation framework. Playwright is the framework supported by Checkly in our current runtimes.
19+
20+
## Playwright overview
21+
While Cypress is a testing tool, Playwright is an automation solution.
22+
23+
This distinction is important when you compare these solutions to the present day realities of automation.
24+
25+
Playwright is a tool focused on developer productivity with more robust built-in features, the ability to use async/await, built in parallelization, a much lighter weight in CI. Playwright is also less opinionated because it doesn’t have to be, you can use it however you want. Playwright can [monitor your APIs](https://www.checklyhq.com/blog/test-apis-with-playwright/) just as well as it can your frontend web pages. Scraping content for a LLM model? Check! Have a nested app in an iframe you want to test? Go wild! *Three different browser sessions in the same chat instance? Sounds cool! Re-use your tests to monitor production? Absolutely.*
26+
27+
## Playwright Key Features
28+
- Supports multiple languages: JavaScript, TypeScript, Python, Java, C#
29+
- Create tests without writing any code with their test generator
30+
- Cross-platform testing (Windows, macOS, Linux)
31+
- Native support for multiple browsers (Chromium, Firefox, WebKit)
32+
- API testing, visual regression, and component testing support
33+
- Test parallelism and isolated browser contexts
34+
- Headless and headed modes for fast execution
35+
- Advanced debugging tools like Trace Viewer
36+
- Network-level testing: intercepts requests and manipulates responses
37+
- Integrates easily with CI/CD pipelines
38+
39+
## Cypress overview
40+
41+
With Cypress, E2E went from the painful world of hard-coded waits and heavy-handed POM approaches to built in actionability and visibility checks with a focus on community building and developer experience. What we’ve seen over the course of the last five years or so is a cultural shift in the testing world from a heavy reliance on Manual QA and non-developer owned testing responsibilities to testing as a more fully incorporated practice. We’ve shifted left.
42+
43+
We’ve also seen testing become the battleground of where your developer velocity goes to die.
44+
45+
Titles have changed, entire departments have been lost to restructures, responsibilities have adjusted and solutions that were groundbreaking less than a decade ago are now no longer cutting edge.
46+
47+
The main areas where Cypress loses now used to be where they won; community trust, focus on developer productivity and rapid feature development. It’s not that those things don’t matter to Cypress any longer, but their attention has clearly shifted to solving enterprise problems. We can talk about [blocking npm packages](https://currents.dev/posts/v13-blocking), or [paywalling features](https://docs.cypress.io/guides/cloud/test-replay) that create parity with Playwright, but that would be a distraction. What really matters is velocity and practicality. A solution without parity to its top competitor, that requires the largest machines in CI and is still slower to run; is neither efficient nor practical unless you’re already using it.
48+
49+
## Cypress Key Features
50+
- JavaScript and TypeScript support (limited to web apps)
51+
- Native test runner with interactive GUI
52+
- Provides automatic waits, retry logic, and time travel debugging
53+
- Rich network mocking and stubbing tools
54+
- Custom dot-notation language for async
55+
- Supports browser automation for Chromium-based browsers
56+
- Focuses on frontend testing but supports API testing
57+
- Strong documentation
58+
- Direct access to browser internals, enabling state manipulation
59+
60+
## **Playwright vs Cypress: Architectural Differences**
61+
62+
### **Overview of Architectures**
63+
The architectural differences between Playwright and Cypress reflect distinct design philosophies and impact how each tool interacts with browsers and testing workflows. Playwright leverages the **Chrome DevTools Protocol (CDP)** to automate browsers directly, while Cypress runs within the browser’s execution loop via a custom Electron-based app. These design choices affect browser support, performance, parallelization, and test writing practices.
64+
65+
---
66+
67+
### **Playwright Architecture**
68+
- **CDP-based**: Playwright interacts with browsers using the Chrome DevTools Protocol, which is natively supported by major browsers (Chromium, Firefox, WebKit). This allows it to control the browser externally without modifying the browser’s native execution loop.
69+
- **Separate Node Process**: Since Playwright runs outside the browser’s execution loop, it requires an external process (Node.js) to orchestrate tests. This design is more similar to Selenium’s WebDriver model, although Selenium 4 now also supports CDP.
70+
- **Language Flexibility**: Playwright’s architecture allows multi-language support, including JavaScript, TypeScript, Python, Java, and C#. It can also integrate with other frameworks like RobotFramework.
71+
- **Parallel Testing**: Playwright offers built-in parallelism without additional configuration, enabling faster test execution out of the box.
72+
- **Browser & Tab Support**: Playwright supports all major browsers and multiple tabs, giving it flexibility for complex test scenarios. It also has experimental support for mobile testing.
73+
- **Standardized Integration**: Playwright integrates smoothly with high-level testing frameworks (e.g., CucumberJS, CodeceptJS) without custom runners, as the browser behaviors remain unmodified.
74+
75+
---
76+
77+
### **Cypress Architecture**
78+
- **Electron-based App**: Cypress runs as a native JavaScript app embedded within an Electron browser. This architecture means tests and Cypress’s custom library run **within the browser’s execution loop**, directly injecting code into the test browser.
79+
- **Tight Browser Integration**: This direct integration allows Cypress to manipulate browser behavior (e.g., automatic waits and retries) but limits support to JavaScript and transpiled languages. It also complicates browser support—Safari, for instance, is not currently supported.
80+
- **Single Process Control**: Cypress uses a combination of Node.js and its custom library for test execution, but the bulk of the test control happens in the browser, limiting flexibility compared to Playwright’s external Node process.
81+
- **Component Testing Support**: Because Cypress runs directly within the browser, it enables component and unit testing as well as E2E tests in the same framework. However, this approach changes the browser’s behavior, creating potential differences from real-world user scenarios.
82+
- **Limited Parallelism**: Parallelization is not available out of the box and requires a **SaaS subscription** to Cypress Cloud for optimal parallel test execution.
83+
- **Limited Tab and iFrame Support**: Cypress does not support multiple tabs and has limited and sometimes inconsistent iFrame handling, making it less effective for complex web applications.
84+
85+
---
86+
87+
### **Impact of Architectural Differences**
88+
89+
1. **Browser and Platform Support**
90+
- Playwright supports all modern browsers (Chromium, Firefox, WebKit) and can run on multiple operating systems with little configuration (sidenote: Checkly currently supports using Chromium or Chrome with Playwright Test and Playwright library, with Chromium being the default browser for all checks. [Read more about using Chrome](https://www.checklyhq.com/docs/browser-checks/#using-other-browsers)).
91+
- Cypress, with its Electron-based architecture, requires adaptation for each browser and does not support Safari or tabs.
92+
93+
2. **Testing Flexibility**
94+
- Playwright’s language-agnostic design supports a wide range of frameworks and languages beyond JavaScript. Cypress is restricted to JavaScript and TypeScript.
95+
- Playwright focuses on E2E and system testing, while Cypress can handle both component and E2E testing within the same framework, though it changes browser behavior in the process.
96+
97+
3. **Parallelization and CI Integration**
98+
- Playwright offers **free built-in parallel testing** and easily integrates with CI pipelines using only `npm install`. Cypress requires either SaaS subscriptions or workarounds for parallelism, increasing costs and complexity.
99+
- For remote testing, Playwright integrates seamlessly with Selenium Grid and SaaS solutions (e.g., BrowserStack), while Cypress relies on its own cloud service.
100+
101+
4. **Performance and Practicality**
102+
- Playwright’s external control through CDP offers **more realistic testing**, reflecting real user behavior without modifying browser internals.
103+
- Cypress’s tight browser integration provides fast feedback loops for developers but can lead to discrepancies between test environments and real-world scenarios.
104+
105+
5. **Asynchronous Code Handling**
106+
- Playwright uses standard **async/await** syntax, providing a clear, modern JavaScript interface. Cypress uses a custom dot notation that simplifies code but is not fully asynchronous, limiting flexibility.
107+
108+
---
109+
110+
### **Which Architecture Fits Your Needs?**
111+
- **Choose Playwright** if you need cross-browser support, parallelism, and multi-language flexibility. Its architecture is more scalable for complex, multi-layered applications that demand realistic, real-world testing.
112+
- **Choose Cypress** if your focus is on quick feedback during frontend development, and you prefer a highly interactive testing experience embedded within the browser. Cypress is ideal for teams already working in a JavaScript/TypeScript environment with limited browser requirements.
113+
114+
## Playwright vs Cypress: Key Differences Comparison
115+
116+
| Feature | Playwright | Cypress |
117+
|------------------------|--------------------------------------------|--------------------------------------|
118+
| Language | JavaScript, TypeScript, Python, Java, C# | JavaScript, TypeScript |
119+
| Test Runner | Works with Jest, Mocha, and others | Built-in test runner |
120+
| Operating Systems | Windows, macOS, Linux | Windows, macOS, Linux |
121+
| Open Source | Yes | Yes |
122+
| Parallel Testing | Full parallelism, even within specs | Parallel at spec level only |
123+
| Architecture | Uses browser contexts for isolation | Runs within the browser itself |
124+
| Browsers Supported | Chromium, Firefox, WebKit | Chrome, Edge (Chromium-based) |
125+
| Documentation | Strong Microsoft support, Discord channel | Strong community, Slack support |
126+
| Real Devices Support | Limited | No |
127+
| Plugins | Relies on custom setup | Ecosystem of plugins |
128+
129+
---
130+
131+
## Playwright vs Cypress Examples
132+
At the highest level, Playwright and Cypress tests look very similar when writing a basic tests. Differences only really become visible when you make two asynchronous requests with assertions.
133+
134+
### Playwright Example
135+
```javascript
136+
const { test, expect } = require('@playwright/test');
137+
138+
test('Multiple API Requests Test', async ({ request }) => {
139+
// First request and assertion
140+
const todoResponse = await request.get('https://jsonplaceholder.typicode.com/todos/1');
141+
expect(todoResponse.status()).toBe(200);
142+
143+
// Second request and assertion
144+
const userResponse = await request.get('https://jsonplaceholder.typicode.com/users/1');
145+
expect(userResponse.status()).toBe(200);
146+
});
147+
148+
```
149+
150+
Playwright uses the standard `await` syntax used in the rest of Node.js.
151+
152+
### Cypress Example
153+
```javascript
154+
describe('Multiple API Requests Test', () => {
155+
it('should return valid status codes for two API requests', () => {
156+
// First request and assertion
157+
cy.request('https://jsonplaceholder.typicode.com/todos/1')
158+
.its('status')
159+
.should('eq', 200);
160+
161+
// Second request and assertion
162+
cy.request('https://jsonplaceholder.typicode.com/users/1')
163+
.its('status')
164+
.should('eq', 200);
165+
});
166+
});
167+
168+
```
169+
With Cypress, we're using their custom syntax, which is a bit more compact but still has it's own specialized field of knowledge. If you're pursuing a monitoring as code strategy and getting everyone involved in testing and monitoring, this domain-specific syntax may be a barrier to entry.
170+
171+
Further, Cypress asynchrony may not act as expected if we're used to asynchrony from Node.js. In Cypress, each `cy.request()` runs asynchronously, but Cypress queues them sequentially. This ensures that the second request only executes after the first one completes, making this pattern simple and effective for making multiple assertions across async requests.
172+
173+
---
174+
175+
## Playwright vs Cypress: Pros & Cons
176+
177+
### Playwright Pros
178+
- Supports more browsers, including Firefox and Safari/WebKit
179+
- Suitable for complex web apps with API, UI, and visual testing combined
180+
- Superior parallelism and scalability for larger test suites
181+
- Works on multiple platforms
182+
183+
### Playwright Cons
184+
- More complex setup for beginners
185+
- Larger learning curve compared to Cypress
186+
- Requires deeper configuration to utilize full power
187+
188+
### Cypress Pros
189+
- User-friendly interface, easy for beginners
190+
- GUI with real-time updates during tests
191+
- Great for frontend testing
192+
193+
### Cypress Cons
194+
- Limited to Chromium-based browsers
195+
- Struggles with large-scale parallelism
196+
- No native support for multi-language tests
197+
198+
---
199+
200+
## Playwright vs Cypress: Which Solution is Better for You?
201+
202+
- Choose Playwright if you need to test across multiple browsers, require advanced parallelism, or need to include API and component testing in your workflow. It’s better suited for complex, large-scale projects with multiple stakeholders.
203+
- Choose Cypress if your focus is frontend testing, or you are working on web apps that run primarily in Chrome/Edge. Cypress is more user-friendly for teams without extensive testing experience and offers quick startup time with fewer configurations.
204+
205+
---
206+
207+
## Conclusion
208+
209+
Both Playwright and Cypress are powerful tools, but each shines in different areas. Playwright’s versatility makes it the better choice for complex, multi-layered applications requiring scalability, while Cypress excels in simplicity and frontend testing. Your decision should align with your project’s needs, team experience, and browser requirements.

‎site/content/learn/playwright/playwright-vs-others.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ menu:
1414
learn:
1515
parent: "Getting started"
1616
---
17-
17+
There are a number of options when for [frameworks for end-to-end testing](https://www.checklyhq.com/blog/cypress-vs-selenium-vs-playwright-vs-puppeteer-speed-comparison/). If you're thinking about using Checkly, you're likely aware of a few.
1818

1919
## Puppeteer vs Playwright
2020

@@ -31,3 +31,9 @@ In short, Playwright builds on the experience of Puppeteer to provide a way to:
3131

3232
This is achieved in the form of a compact node library that exposes a high-level API to interact with web pages in a fast, secure, stable and simple way. As it is an open-source project, you can [contribute](https://github.com/microsoft/playwright/blob/master/CONTRIBUTING.md) to it yourself.
3333

34+
## Playwright vs Cypress
35+
Long the dominant framework for (at the time) modern end-to-end testing, Cypress is still very widley used as a testing framework by front-end focused teams.
36+
37+
Due to architectural differences, Playwright can support multiple languages for writing tests, and run more browsers for testing. Due to Playwright's status as a free and open source project, users don't have to deal with new features being paywalled, a significant issue for Cypress users since 2023.
38+
39+
[Read more about Playwright vs. Cypress.](/learn/playwright/playwright-vs-cypress/)

0 commit comments

Comments
 (0)