Playwright vs Cypress

This is a PoC for Playwright vs Cypress a simple React TS app.

Table of contents

• Setup
• Playwright
• Cypress
• CI Test results
• Comparison

Setup

After cloning this repo install the project dependencies at the project directory:

npm i

Start the app

npm start

Playwright

The tests are under ./playwright.

In a new tab inside your terminal, run the tests with the following command:

npm run playwright

There are two ways to view the UI while executing Playwright tests:

1. To execute tests with debugger, use Playwright Inspector.

   PWDEBUG=1 npm run playwright
   

2. Add { headless: false } to chromium launch function in the spec file.

Cypress

The tests are under ./cypress/integration.

To start the test runner:

npm run cypress:open

To run headlessly:

npm run cypress:run

CI Test results

Cypress Dashboard - uses 2 parallel machines.

Github Actions

yml file

Comparison

What matters as of the end of 2022:

• Cypress runs in the browser vs PW runs in Node
  • running in the browser has huge advantages
    • control browser apis directly (ex: fetch)
    • control window events (ex: win.addEventListener)
    • control application code directly (ex: app actions, spy/stub problematic application methods)
• Developer experience / feedback: cy-time-travel-debug vs pw-watch-mode
• syntax: declarative, flow right, terse, fp-like VS imperative, left-hand-side-assignments, jest-like
• component testing: Cy has full support (4 UI frameworks), in browser vs PW has experimental support, in node (React)