Playwright vs Cypress

The newest addition to Automation Framework, Playwright from Microsoft, has arrived as a solid competitor to Cypress. The Playwright did initial release in 2020; it has come up with many features and overcome almost all tradeoffs that Cypress had. Let’s compare Playwright and Cypress to understand when to use what.

CriteriaPlaywrightCypress
1. Installation & ConfigurationThe Playwright does not define any folder structure, and you can configure it with the Test runner of your choice.Cypress is easy to install and configure and has a pre-defined folder structure. It's a complete package that comes bundled with its own test runner.
2. SyntaxPlaywright syntax is closer to Javascript, where you create instances of objects.Cypress syntax is more similar to JQuery; instead of JQuery "$," it uses the keyword "cy" with many JQuery commands.
3. Real Devices
 
The Playwright has experimental support for devices but supports emulators.Cypress supports actual device clouds and remote servers.
 
4. Supported Languages
 
Playwright supports Java, JavaScript, Python, and .Net C#.  
 
Cypress supports JavaScript only.
5. Browser Support
 
Playwright supports three browser engines: Chromium, Firefox, and WebKit. Chromium includes the browsers Opera, Chrome, and Edge. Firefox uses Gecko Driver, and Webkit is behind Apple Safari.  
 
Cypress supports chrome, Firefox, Edge, Electron, and Brave.  In Version 10.8.0 Safari browser support is added using Playwright-Webkit.
 
6. Hover SupportIn Playwright, it is straightforward to hover over elements.There is a workaround for this in Cypress. The issue with Cypress hove command is still open.
7. parallelizationThe Playwright fully supports parallelization, even locally. Also, Playwright supports parallel tests within a single test file, and you can run tests on multiple browsers simultaneously. In Cypress, it is costly to implement parallelization. Also, to run Cypress tests in parallel, you need to split them across files, and you cannot run tests against multiple browsers at the same time.
8. Cost
 
The Playwright is an entirely open-source and free-to-use tool.
 
Cypress is a free-to-use automation tool, but the Cypress dashboard is not entirely Free. This package is limited to 3 users and does not have features like Run failed specs first and canceling run on failure. It does not provide integration with Jira, Github, and GitLab Enterprise. Also, Flaky test detection and analytics features are not in the free edition.
 
9. Test Framework
 
The Playwright supports Mocha, Jest, Jasmine, and AVA.    
 
 Cypress supports Mocha only.
 
10. Community Support
 
The Playwright is new to the field, and community support is limited, but you can expect good support in the future because this Microsoft developed this tool.
 
Cypress is well documented and has an excellent community and paid support.
11. PluginsThe playwright has Direct support for many features Like XPath, File Upload Download, and Tabs.In Cypress, You have to install a plugin for XPath, File Upload Download, and tab support. We can not rely on third-party plugins for long as they get outdated with version upgrades. 
12. Architecture
 
The Playwright has a Headless browser with event-driven architecture.    
 
Cypress executes test cases directly inside the browser.
 
13. Multiple Domains
 
The playwright can test across multiple domains. It does not restrict you to a single domain.
 
In Cypress, the Approach to handling multiple domains is not straightforward. Cypress doesn't allow Cross-Origin domains in the same script. Cypress suggests to use third party login should be through APIs, etc
14. Multiple Windows and TabsWith Playwright, it is easy to test in multiple windows and tabsIn Cypress, you will find a workaround to remove the target attribute. Which is a hack and does not replicate the same scenario just like end-users do.
15. iFrames SupportPlaywright supports iFrames natively.
 
Cypress iFrames support is limited and challenging.
 
16. Page Object SupportThe playwright has a support Support for Page Objects with Good documentation to implement it.Cypress suggests you to stop using page objects because this is another layer of indirection on top of the web page and is slower. They recommend you start using app actions.
17. Dashboard
 
The Playwright does not have a dedicated dashboard, making debug tests harder comparatively. However, unlike Cypress, you can debug using VS code.
 
Cypress has an excellent dashboard to view reports, analytics, recordings, and Debugging.
 
18. Auto Waits
 
The Playwright does various actionability checks on elements before performing specific actions, which makes the execution of the tests much more stable.    
 
Cypress has auto wait built-in, which makes tests automatically wait for some time to do some specific task and then proceed to the next step. However, Using Async or Await inside your Cypress makes Cypress tests behave weirdly sometimes.
 

Conclusion

If you’re new to automation and like a more plug-and-play approach that includes everything you need to get started, and you are ready to spend money on additional features and support for a robust tool, then Cypress is the best choice for you. 

And, If you know some automation and hope that an entirely free tool from Microsoft that has less community support right now has a bright future, then go for it. The playwright is aggressive in delivering new features. It has evolved a lot within a year, and now it looks like a matured framework. It does not limit you with the plugin and its own environment like Cypress.

Mon, 04/25/2022 - 10:52

Authored by

Ashwin is working with iVagus as a Technical Lead. He has experience in various technologies like Cypress, JavaScript, TypeScript, Rest Assured, Selenium, Cucumber, and Java.

Playwright vs Cypress

Tags