Migrate Cypress tests to Playwright

.github/workflows/test.yml

@@ -26,10 +26,9 @@ jobs:
       - run: yarn src
       - run: yarn check-types
       - run: yarn check-types:docs
-      - run: yarn check-types:cypress
       - run: yarn lint
       - run: yarn test:coverage --maxWorkers=2
-      - uses: codecov/codecov-action@v3
+      - uses: codecov/codecov-action@v4
         # Only report coverage once
         if: matrix.os == 'ubuntu'
 
@@ -66,15 +65,19 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'yarn'
+
       - run: yarn install --frozen-lockfile --network-timeout 600000
       - run: yarn build
 
+      # https://playwright.dev/docs/browsers#install-system-dependencies
+      - run: npx playwright install --with-deps chromium
+
       # Generate static export for domExport test
       - run: yarn workspace example-${{ matrix.example }} export --lazy=${{ matrix.lazy }}
 
       - uses: BerniWittmann/background-server-action@v1
         with:
-          command: yarn test:cypress
+          command: yarn test:e2e
           # Start web servers for each test type:
           # - DOM dev server
           # - DOM export
@@ -85,16 +88,11 @@ jobs:
             yarn workspace example-${{ matrix.example }} native --lazy=${{ matrix.lazy }} --port 5002
           wait-on: 'http://localhost:5000,http://localhost:5001,http://localhost:5002'
         env:
-          CYPRESS_EXAMPLE_NAME: ${{ matrix.example }}
-          CYPRESS_LAZY: ${{ matrix.lazy }}
+          TEST_EXAMPLE_NAME: ${{ matrix.example }}
+          TEST_LAZY: ${{ matrix.lazy }}
 
-      - uses: actions/upload-artifact@v4
-        if: failure()
-        with:
-          name: cypress-screenshots-${{ matrix.example }}-${{ matrix.os }}-node${{ matrix.node-version }}${{ matrix.lazy == true && '-lazy' || '' }}
-          path: cypress/screenshots
       - uses: actions/upload-artifact@v4
         if: always()
         with:
-          name: cypress-videos-${{ matrix.example }}-${{ matrix.os }}-node${{ matrix.node-version }}${{ matrix.lazy == true && '-lazy' || '' }}
-          path: cypress/videos
+          name: playwright-report-${{ matrix.example }}-${{ matrix.os }}-node${{ matrix.node-version }}${{ matrix.lazy == true && '-lazy' || '' }}
+          path: tests/playwright-report

.gitignore

@@ -6,5 +6,3 @@ packages/*/dist
 __testFs__
 
 coverage
-cypress/screenshots
-cypress/videos

docs/pages/docs/dev/tech-debt.md

@@ -6,7 +6,6 @@ In general we keep dependencies up to date. The following packages, however, nee
 
 - `react-error-overlay@6.0.9` because of [this](https://github.com/facebook/create-react-app/issues/11773) and [this](https://github.com/react-cosmos/react-cosmos/issues/1359).
 - `styled-components@5.x` because [6.x added a breaking change](https://github.com/styled-components/styled-components/releases/tag/v6.0.0) where all component props that don't start with `$` ("transient props") are passed down to the underlying components, which in most cases are DOM elements that shouldn't receive random attributes. We can upgrade to 6.x safely after prefixing styled props with `$`.
-- `cypress@12.x` because installing 13.x fails with [this error](https://github.com/cypress-io/cypress/issues/27370). This could probably be fixed using dependency package resolutions (`string-width` or some other transient dependency). Not a priority because a) this problem might fix itself in time as Cypress and the conflicting dependencies evolve, and b) we might look at migrating Cypress tests to Playwright anyway.
 
 ### Pure ESM in Node.js
 

examples/shared/components/CounterButton.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 export function CounterButton({ suffix, count, increment }: Props) {
   return (
-    <button onClick={increment}>
+    <button title="Click to increment" onClick={increment}>
       {count} {suffix}
     </button>
   );

package.json

@@ -12,12 +12,12 @@
     "prettify": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
     "check-types": "tsc",
     "check-types:docs": "yarn tsc -p docs/tsconfig.json",
-    "check-types:cypress": "yarn tsc -p cypress/tsconfig.json",
     "lint": "eslint \"**/*.{ts,tsx}\"",
     "test": "jest --config .jest/config.cjs",
     "test:watch": "yarn test --watch",
     "test:coverage": "yarn test --coverage",
-    "test:cypress": "cypress run --config-file cypress/cypress.config.ts --record false",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
     "link-entries": "node --no-warnings=ExperimentalWarning --loader ts-node/esm ./scripts/linkEntries.ts",
     "src": "yarn link-entries src",
     "dist": "yarn link-entries dist",
@@ -29,6 +29,7 @@
     "release:next": "yarn release:check && yarn lerna publish --dist-tag=next --exact -m \"[release] %s\""
   },
   "devDependencies": {
+    "@playwright/test": "^1.41.2",
     "@skidding/async-retry": "4.0.0",
     "@testing-library/jest-dom": "6.2.0",
     "@testing-library/react": "14.1.2",
@@ -54,7 +55,6 @@
     "chalk": "5.3.0",
     "create-react-class": "15.7.0",
     "css-loader": "6.9.1",
-    "cypress": "12.17.4",
     "eslint": "8.56.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-react": "7.33.2",
@@ -86,5 +86,8 @@
     "webpack": "5.89.0",
     "webpack-cli": "5.1.4",
     "yargs": "17.7.2"
+  },
+  "resolutions": {
+    "string-width": "4.2.3"
   }
 }

packages/react-cosmos/src/getFixtures/__snapshots__/getFixtures.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`renders fixture elements 1`] = `
 <button
   onClick={[Function]}
+  title="Click to increment"
 >
   0
 
@@ -13,6 +14,7 @@ exports[`renders fixture elements 1`] = `
 exports[`renders fixture elements 2`] = `
 <button
   onClick={[Function]}
+  title="Click to increment"
 >
   555555555