Playwright vs. Cypress: Key Differences

Playwright and Cypress are two popular end-to-end testing frameworks used for web application testing. Playwright is a newer, open-source tool developed by Microsoft, while Cypress was developed as an open-source project and was introduced in 2014.

How do their features compare, and which one should you choose? To understand this, let’s first briefly look at both tools.

What is Playwright?

Playwright is a tool for end-to-end testing of web applications. It is designed to be fast and easy to use. Playwright allows you to write tests in TypeScript, JavaScript, Python, .NET, and Java and run them against popular web browsers like Chromium, Firefox, and WebKit. Playwright also supports mobile web testing by native mobile emulation of Google Chrome for Android and Mobile Safari.

Playwright comes with a powerful set of tools like Codegen, Playwright Inspector, and Traceviewer. Codegen tool generates tests by recording your actions and lets you save them in any language. 

The Playwright inspector tool can be used to inspect pages, generate selectors, step through the test execution, see click points, explore execution logs, etc. The trace viewer tool can capture all the information to investigate the test failure. Playwright trace contains test execution screencast, live DOM snapshots, action explorer, test source, etc.

What is Cypress?

Cypress is an end-to-end framework that supports testing from the creation phase through to execution and is highly valued for its ability to enable test automation engineers and front-end developers to write automated web tests in JavaScript.

Cypress also provides a built-in debug tool, allowing developers to pause their tests, go back in time, and inspect the state of the application at any given point. This makes it easier for developers to identify and resolve issues with their tests, making the debugging experience faster and more efficient.

Cypress tests are written in JavaScript, making it easy for developers familiar with the language to start testing their web applications. Its recent releases included features like innovative component testing, mocking, and stubbing.

Now that we understand the basics of both tools let’s look at the differences.

Playwright vs. Cypress: A Comparison

Prerequisites

Both Playwright and Cypress have different prerequisites that developers must consider before using them.

For Playwright, developers must have Node.js installed on their system, as it runs on top of Node.js. Playwright also requires a basic understanding of JavaScript, Python, Java, or TypeScript, as most tests are written in one of these languages. Developers must also be familiar with web application testing, as Playwright is a comprehensive testing solution that covers all aspects of end-to-end testing, including browser automation, network interception, and accessibility testing.
For Cypress, developers must have Node.js and npm (Node Package Manager) installed on their system, as Cypress is a Node.js application. Developers must also have a basic understanding of JavaScript, as tests are written in JavaScript. Cypress is a more focused solution for browser automation and user interactions, so developers must be familiar with web application testing but not necessarily with all aspects of end-to-end testing.

Languages Supported

Playwright supports JavaScript, TypeScript, Java, Python, and .NET, allowing developers to choose the language that best fits their needs. This flexibility makes it possible for developers with different backgrounds and skill sets to contribute to the testing process.

Cypress, on the other hand, only supports JavaScript for writing tests. While this may limit the number of developers who can contribute to the testing process, it also makes it easier for teams to collaborate and maintain their tests, as they all use the same language. Additionally, JavaScript is a widely used language in web development, making it easier for developers to find support and resources for their tests.

Test Runner

Both Playwright and Cypress have mechanisms for executing tests but differ in their approach and features.

Playwright features an integrated test runner that can be accessed via the command line or from within the developer’s preferred environment. This test runner provides comprehensive test results, including performance metrics and screenshots, making it simple to pinpoint any problems with the tests.

On the other hand, Cypress has a standalone test runner that operates within the browser and offers real-time feedback on the tests. You can launch all the tests directly from the command line or by using the test runner. The test runner opens a window where you can choose to run a specific test file or all tests. During test execution, a separate browser instance will run through all the scenarios defined in the tests.

Element Locators

Locators represent a way to find element(s) on the page at any moment.

Playwright uses its Locator API to find and interact with elements. Some of the built-in locator’s page.getByText(), page.getByLabel(), page.getByTitle(), etc., make it really easy to find elements on a page. Playwright also supports filtering locators by text with the locator.filter([options]) method. It will search for a particular string somewhere inside the element, possibly in a descendant element, case-insensitively.

Cypress supports various locators such as tags, id, class, attributes, text, etc. Cypress also supports XPath Selectors; however, it needs installation of the third-party plugin cypress-xpath. To fetch the HTML element in Cypress using different types of locators cy.get() method is used.

For example, consider an HTML element

<input id=”user_email” class=”user_email_class”>

To get the HTML element by id in Cypress, use the following command:

cy.get(‘#user_email)

Waits

Playwright comes with a built-in auto-wait strategy. It performs a range of actionability checks on the elements before acting to ensure these actions behave as expected. It auto-waits for all the relevant checks to pass and only then performs the requested action. If the required checks do not pass within the given timeout, the action fails with the TimeoutError. This helps Playwright eliminate flakiness.

Cypress is designed to automatically wait for elements to become available in the Document Object Model (DOM) before executing actions such as clicking or filling out a form. However, sometimes applications may take longer to complete a task, in which case the cy.wait() command can be used to set an explicit wait time. Cypress also offers the cy.clock() and cy.tick() commands to manipulate the browser’s clock for testing purposes. This feature enables the testing of time-sensitive functions, such as evaluating how the application behaves after a specific time period has elapsed.

Parallel Test Execution

Playwright provides the ability to execute tests in parallel across multiple machines. The default setting is to run test cases in a single worker, but it is possible to run tests in parallel on different machines by specifying the number of workers. This can be done through the command line by using the command “npx playwright test –workers 4,” where “4” represents the desired number of workers. Another option is to configure the workers in the playwright.config.js file.

Cypress has been specifically designed not to run tests in parallel on a single local machine. This restriction is detailed in the official Cypress documentation, with several reasons cited. However, if your project already has Continuous Integration in place, it is possible to set up parallel tests in CI by following the guidelines provided in the Cypress documentation. The framework’s approach to parallelization is based on file separation, so to take advantage of this feature, your tests need to be organized into separate files.

Cypress will assign each spec file to an available machine based on a balance strategy.

Once multiple machines are available within your CI environment, you can pass the –parallel key to cypress run to have your recorded tests parallelized.

cypress run –record –key=abc123 –parallel

Assertions

Assertions play a crucial role in determining the outcome of tests, primarily whether they pass or fail. In Cypress, tests make use of Chai assertions, which are augmented by Sinon and jQuery extensions. To utilize these assertions, you simply pass them to the .should function, along with the expected value:

.should(“have.class”, “nameOfClass”)

.should(“be.visible”)

Cypress does not have the capability to perform soft assertions. Soft assertions are a crucial feature in automated testing and allow test scripts or methods to continue even if the assertion conditions do not match the expected results.

Playwright uses JEST, expect library for test assertions. This library provides a lot of matchers like toEqual, toContain, toMatch, toMatchSnapshot , and many more. Playwright also extends it with convenient async matchers that will wait until the expected condition is met. Playwright’s auto-wait mechanism automatically handles the assertion part in many cases. So lines of code like expect(await submit.isEnabled()).toBeTruthy() can be skipped because Playwright will wait for it to be enabled before performing an action.

Test Reporting

Playwright Test comes with a few built-in reporters for different needs and has the ability to provide custom reporters. All built-in reporters show detailed information about failures and mostly differ in verbosity for successful runs. 

The default reporter of Cypress is Spec reporter, but it is customizable for other supported reporters. Because Cypress is built on top of Mocha, any reporter built for Mocha can be used with Cypress.

API Automation

Playwright has in-built API support. Playwright can be used to access your application’s REST API, thereby eliminating the need to install external libraries.

When running tests with Cypress, it generates HTTP requests on behalf of the web application. Although it appears as though the requests are being made from the browser, Cypress actually utilizes Node.js as the engine behind these requests to the API server. This allows for various testing approaches to be used when testing an application’s API, such as making direct HTTP calls and evaluating the response, validating the response against a JSON schema, interrupting the response, and combining real and stub responses to reach different edge cases.

Performance or Execution Speed

In terms of performance, Cypress is known for its fast and reliable test execution. It provides a fast and smooth testing experience, with tests running directly in the browser and providing real-time feedback. This can be especially beneficial for large test suites, as Cypress can handle many tests at once and is optimized for fast test execution.

On the other hand, Playwright is designed for cross-browser testing, which means it can run tests on multiple browsers, including Chrome, Firefox, and Safari. Playwright uses a different approach to testing, using a headless browser to run tests in the background rather than running directly in the browser. This can result in slightly slower test execution times compared to Cypress. Still, it allows you to run tests on multiple browsers, which can be useful for ensuring that your application works as expected on different platforms.

In terms of execution speed, both Cypress and Playwright are relatively fast. Still, the exact speed will depend on several factors, such as the complexity of your tests and the number of tests being run in parallel. In general, Cypress tends to be faster for smaller test suites, while Playwright may be faster for larger test suites that need to run on multiple browsers.

Community Support

Both Cypress and Playwright are relatively new end-to-end testing frameworks for web applications, and both have been gaining popularity in recent years. However, there are some differences in terms of community support between the two frameworks.

Cypress has a larger and more active community than Playwright, with many users, developers, and contributors actively working with the framework and sharing their knowledge and experiences. This can be beneficial if you’re looking for help or guidance on how to use Cypress, as there are many resources available, including forums, blogs, and online communities.

Playwright, on the other hand, is still growing its community. It has recently gained traction and has a growing number of users and contributors. The Playwright community is also active, with developers and users sharing their experiences and knowledge on how to use the framework effectively.

In terms of official support, both frameworks are well-supported by their respective development teams, with regularly released updates and bug fixes. Cypress has a larger development team and more resources, while Playwright is backed by Microsoft, which provides a strong level of support and resources.

Conclusion

In conclusion, both Playwright and Cypress have their unique advantages, and it’s up to the user to decide which one suits their testing needs better. Factors such as the size and complexity of the test suite, the number of browsers required, and performance and speed requirements should be considered when making a choice between the two. Ultimately, the best solution will depend on the individual’s specific testing requirements.