Cypress vs. Playwright: Which Is the Best Testing Tool?

Are you having trouble deciding between Playwright and Cypress for cross-browser testing? The choice is challenging and dependent on the situation because each tool has specific benefits and drawbacks.

This article will assist you in understanding the tools when you have to choose between Cypress Or Playwright.

Cypress is an open-source end-to-end testing framework that is used for web applications. It is a JavaScript-based testing tool that is designed to make testing web applications easy and efficient. Cypress is built on top of Mocha, a popular JavaScript test framework that uses Chai for assertions.

On the other side, Microsoft's Playwright is a relatively new open-source test automation framework. It is intended to automate web application testing across multiple browsers and platforms (including Chromium, Firefox, and Safari) (including Windows, macOS, and Linux).

In this article, you will learn about the parameters based on which you can select the tool that is most appropriate for your project.

Below are the npm trends of Cypress vs. Playwright.

So, What Is Cypress?

Cypress is an open-source end-to-end testing framework for web applications. It provides a fast, reliable, and modern way of testing web applications by running tests directly in the browser. Cypress is built on top of JavaScript and includes features such as real-time reloading, automatic waiting, and time travel debugging. 

Here are some of the unique features of Cypress:

• Automatic Waiting: Cypress automatically waits for commands and assertions to complete before moving on to the next step. 
• Real-time Reloads: Cypress provides real-time reloads that allows developers to see changes in the application as they make them.
• Debugging: Cypress provides powerful debugging tools that allow developers to pause and debug their tests as they run. 
• Time Travel: Cypress provides time travel functionality that allows developers to step through the code and see what the application looked like at each step. 
• Easy Installation: Cypress can be easily installed as an NPM package and does not require any additional dependencies or configuration.
• Automatic Screenshots and Videos: Cypress automatically takes screenshots and videos of test runs, making it easier to diagnose and fix issues.
• Cross-browser Testing: Cypress supports cross-browser testing, allowing developers to test their applications across different browsers and platforms.
• Network Traffic Control: Cypress allows developers to control and stub network traffic, making it easier to test different scenarios and edge cases.

Understanding Playwright

Playwright is a Node.js library for automating the interaction of web browsers with web applications. It allows developers to write end-to-end tests for web applications in a language-agnostic manner and supports multiple browsers, including Chromium, Firefox, and WebKit.

Here are some of the unique features of a Playwright:

• Multi-browser support: Playwright supports automation of Chromium, Firefox, and WebKit browsers.
• Continuous integration (CI) integration: Playwright can easily integrate with popular CI/CD tools, such as Jenkins, Travis CI, and GitHub Actions.
• Unified API: Playwright provides a unified API for automating web browsers. This means that you can use the same API to automate different browser browsers.
• Built-in wait mechanisms: Playwright automatically waits for web page elements to become available before executing the next step.
• Integrated screenshots and video recording: The Playwright can take screenshots and record videos of the test execution, which makes it easier to debug and analyze test failures.
• Supports multiple programming languages: Playwright supports a variety of programming languages, including JavaScript, TypeScript, Python, Java, and C#. This allows developers to use the language they are most comfortable with to write their tests.

Let's Do a Comparison Between Cypress vs. Playwright Features

Below are a few points for comparing Cypress vs. Playwright:

1. Installation and Configuration

Cypress

Cypress installation is very easy. To set up Cypress, please follow the below steps:

1. Pre-requisites: Node should already be installed NodeJS installed.
2. Generate package.json using the command npm init.
3. Command npm install Cypress --save-dev will install the latest version of Cypress. At the time of writing this blog, the latest version of Cypress was 12.7.0.

Playwright

In the same way as Cypress, Playwright is also easy to set up. You have two ways to install the Playwright, explained in detail below.

Either use the init command or by using the VS Code extension.

Using the VS Code extension:

1. Create a new folder, e.g., Installs_playwright.
2. Now open the particular folder in Visual Studio.
3. Search for the Playwright extension in Visual Studio and try to install it.

    4. Press the command from machine shortcuts command+shift+P (in Mac) and finally click on the OK button.

5. Playwright installation start as we click on the OK button.

Using the init command:

• Create a folder, e.g., playwright_lastet_scripts.
• Open the above folder in Visual Studio.
• From the Project root directory, run npm init playwright@latest.

After executing the above command, Playwright starts installing. 

In the below screenshot, you can see we have two options. You can select either TypeScript or JavaScript. Select JavaScript, and finally, Playwright is installed.

Conclusion

Installation is easy in both Playwright and Cypress.

2. Interaction With Elements

Cypress

Let's first see how we interact with elements in Cypress. For example purpose here, I am taking the example of the test tribe site with login into the site.

describe('Login', () => {
 it('Logs in successfully into the site', () => {
   cy.on('uncaught:exception', (err, runnable) => {
   return false
  })
   cy.visit('https://www.thetesttribe.com/my-account/edit-account/')
   cy.get('#username').click();
   cy.get('#username').type('thetesttribe@yopmail.com')
   cy.get('#password').click();
   cy.get('#password').click().type('1234567')
   cy.get('[name="login"]').click()
 })
})

Output

Run the above test case using the command 'yarn run cypress open.' Below is the screenshot of the site.

Playwright

For the same scenario, below is the attached code for login into the site.

const { test, expect } = require("@playwright/test");
test("Open the site 'thetesttribe.com' and login ", async ({
 page,
}) => {
 await page.goto('https://www.thetesttribe.com/my-account/edit-account/');
 // Fill in email and password fields
 await page.fill('#username', 'thetesttribe@yopmail.com');
 await page.fill('#password', '1234567');
 await page.click('[name="login"]')
});

Output

Run the above test case using the command 'npx playwright test.' Below is the screenshot after login into the site. 

Run the command 'npx playwright show-report'.

Conclusion

If we compare the code, the code is almost the same, but the syntax in Cypress was slightly more concise.

cy.get('#my-button', { timeout: 10000 }).click();

•  Use explicit assertions.

cy.get('#my-element').should('be.visible').click();
cy.get('#my-element').should('exist');
cy.get('#my-element').contains('Test Tribe ');

• We can use Test Retires in Cypress to reduce the flakiness.

We can bypass the retries option in the configuration file cypress.config.js by configuring an object with the following options:

runMode 

permit you to choose the number of test retries when using the command cypress run.

openMode 

permit you to choose the number of test retries when using the command Cypress open.

Playwright

Following are some of the best ways to deal with flakiness in Playwrights.

1. Use waitFor methods: Playwright provides several waitFor methods to help you wait for specific conditions to be met before continuing with your test. 

waitForSelector: Waits for an element matching the given selector to be added to the DOM and become visible. If the element doesn't appear within a specified timeout, the method will throw an error.

await page.waitForSelector('#my-element');

waitForNavigation: Waits for a navigation event to occur. By default, it waits for the first navigation event after calling the method, but you can also specify a specific type of navigation event to wait for.

await page.click('#my-link');
await page.waitForNavigation();

waitForLoadState is used to wait until a specific page state is reached.

await page.waitForLoadState('load', { timeout: 2000 });
await page.waitForLoadState('domcontentloaded', { timeout: 1000 });
await page.waitForLoadState('networkidle', { timeout: 5000 });

2. Use timeouts: Playwright allows setting timeouts for various actions. By setting an appropriate timeout, we can avoid flakiness caused by network latency or slow page loads.

await page.click('#myElement', { timeout: 5000 });

3. Avoid race conditions: Race conditions can cause flakiness in tests when two or more actions are performed simultaneously. To avoid race conditions, use awaits statements to ensure that actions are performed one after the other.

// Bad Practice
page.click('#myButton');
page.type('#myInput', 'Hello Test Tribe);


// Good Practice
await page.click('#myButton');
await page.type('#myInput', 'Hello Test Tribe);

4. Retries: We can include the Retries option in the Playwright.config.js file so that when test cases fail, the system will retry, and the probability of the test case passing is increased.

module.exports = {
 testDir: 'tests',
 testMatch: '**/*.test.js',
 timeout: 30000,
 retries: 3 // Add the retries option
};

In this example, the retries option is set to 3, which means that each test will be retried up to three times before it fails.

Conclusion

Flakiness can be easily handled in both Cypress and Playwright. 

4. iFrame

Cypress

Cypress does not support iframe directly, but we can implement iframe in Cypress by installing the plugin.

npm install -D cypress-iframe

Below is an example of jqueryui site.

import 'cypress-iframe'
describe('iframe ', function () {
 // test case
 it('iframe example ', function (){
    // launch the URL
    cy.visit("https://jqueryui.com/draggable/");
    // frame is loading in below line
    cy.frameLoaded('.demo-frame');
    //shifting the focus
    cy.iframe().find("#draggable").then(function(testIframe){
       const ifrmtxt = testIframe.text()
       //assertion to verify text
       expect(ifrmtxt).to.contains('Hey Test Tribe Drag me around');
       cy.log(ifrmtxt);
    })
 });
});

Playwright

When testing iFrames in Playwright, we can use the FrameLocator method to retrieve the iFrame and locate elements within it.

Let's take a simple example using the herokuapp site. We have to enter data 'Hi Test Tribe' in the iframe.

Enter the code to the text in the iframe given below.

import {test,expect} from '@playwright/test'


test("frames", async ({ page }) => {
await page.goto('https://the-internet.herokuapp.com/iframe')
const frame1 = page.frameLocator('#mce_0_ifr').locator('html')
 await frame1.click()
 await frame1.type('Hello Test Tribe')
 await page.pause()
})

Conclusion

In Playwright, implementing an iframe is a bit easy compared to Cypress; in Cypress, we have to install a plugin which is one extra kind of dependency.

it("POST API testing Using Cypress", () => {
 cy.request("POST", "https://reqres.in/api/users", {
   name: "Test Tribe",
   job: "QA Automation",
 }).should((response) => {
   expect(response.status).to.eq(201);
 });
});

Playwright

Playwright can be used to access your application's REST API.

test("POST API Request with -- Valid 201 Response ", async ({ request }) => {
  const response = await request.post(`${baseurl}/users/2`, {
    data: {
      name: 'John',
      Job: 'QA Engg',
    },
  });
  const responseBody = JSON.parse(await response.text());
  expect(response.status()).toBe(201);
});

Conclusion

Both Cypress and Playwright handle API requests really well. Cypress uses its existing command chain syntax to both fire a request and tests it.

6. Community Support

Cypress

Cypress has a growing Community and excellent documentation. Furthermore, there are numerous unofficial forums and communities where Cypress users can connect and share their experiences with the tool.

Playwright

Playwright is new to the market and has a smaller but growing set of community resources. The Playwright team provides excellent documentation and maintains an active presence on GitHub.

Conclusion

Both Cypress and Playwright have good community support though Playwright is new to the market but growing very fast.

7. Language Support

Cypress

Cypress supports JavaScript and also supports TypeScript, which is a typed superset of JavaScript that adds additional features and syntax to the language.

Playwright

Playwright supports a variety of programming languages, including JavaScript, TypeScript, Python, Java, and C#. This allows developers to use the language they are most comfortable with to write their tests.

Conclusion

In Language support definitely, Playwright has an edge over Cypress.

8. Browser Support

Cypress

Cypress supports Chrome, Firefox, Safari,Edge, and Electron.

Playwright

Playwright supports Chrome, Firefox, Safari, and Edge.

Conclusion

In browser support, both tools have good support on various browsers.

Use Case of Cypress and Playwright

Use Case for Cypress

We can perform the below type of testing using Cypress. Below are some use cases where we can use Cypress in Testing.

UI Testing 

UI testing with Cypress involves testing the user interface and interactions of a web application. Here are some examples of UI testing scenarios that can be done using Cypress

• Testing Forms
• Testing Navigation
• Testing Dynamic Content
• Testing Responsiveness
• Testing User Interactions

API Testing

API testing with Cypress involves testing the back-end functionality of a web application by sending requests to the API and verifying the response. Some examples of API testing scenarios that can be done using Cypress:

• Testing CRUD Operation. 
• Testing Authentication and Authorization.
• Testing Performance of APIs.

Component Testing

Component testing with Cypress involves testing individual components of a web application in isolation to ensure that they function correctly. This allows developers to test their code as they build, which can help catch errors earlier in the development cycle and improve the overall quality of the application.

Cross-browser testing: Cypress provides support for cross-browser testing, which allows you to test your application on different browsers to ensure that it works as expected across different platforms and configurations.

Accessibility Testing

Accessibility testing involves evaluating web applications to ensure that they are usable by individuals with disabilities, including those who may use assistive technologies like screen readers or keyboard navigation. 'Cypress-axe' is a Cypress plugin that integrates the Axe-core library to perform automated accessibility testing on web applications.

Visual testing: Cypress can perform visual testing. To perform visual testing with Cypress, you need to install a visual testing plugin. Some popular options include cypress-image-snapshot, Percy-cypress, and apply tools-eyes-cypress. These plugins provide additional commands that you can use in your Cypress tests to capture screenshots and compare them to reference images.

Use Case for Playwright

We can perform the below testing using Playwright. Below are some use cases where we can use Playwright in Testing.

Functional Testing

Playwright allows you to simulate user actions, such as clicking on buttons, filling forms, and navigating between pages.

Cross-Browser Testing

Playwright supports testing on multiple browsers, including Chromium, Firefox, and WebKit, allowing you to verify that your application works consistently across different browsers. API testing Using Playwright's API testing features, you can write test scripts that send requests to your application's APIs and validate the responses. You can use assertions to verify the response status code, response body, and other aspects of the response.

Accessibility Testing

Playwright provides features to test the accessibility of your application, including checking for keyboard navigation, ARIA attributes, and color contrast.

Visual Testing

Playwright can perform visual testing to ensure that the application's visual components are rendered correctly and consistently across different browsers and devices. As you make changes to your application, use Playwright to capture new screenshots and compare them to the "golden" image using the assert screenshot method.

Comparison Table: Cypress vs. Playwright

Let's do a comparison between Cypress vs. Playwright:

Wrapping Up

Both Cypress and Playwright are powerful tools for cross-browser testing and have their own unique strengths and weaknesses. The choice between them ultimately depends on your specific testing needs and requirements. While they each have their own architectures, user bases, and goals, it is up to testing teams to determine which tool is best suited to their project and skill set.