Skip to content

chore(website): switch from Cypress to Playwright #5814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 13, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .github/actions/prepare-install/action.yml
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ runs:
with:
path: |
${{ steps.yarn-cache-dir-path.outputs.dir }}
~/.cache/Cypress
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
Expand Down
5 changes: 0 additions & 5 deletions .github/renovate.json5
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,6 @@
matchPackagePrefixes: ['@types/jest'],
groupName: 'jest',
},
{
matchPackageNames: ['cypress', 'cypress-axe'],
matchUpdateTypes: ['minor', 'patch', 'pin', 'digest'],
groupName: 'cypress',
},
],
postUpdateOptions: [
// run yarn dedupe to cleanup the lockfile after updates
Expand Down
24 changes: 9 additions & 15 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,6 @@ jobs:
website_tests:
permissions:
contents: read # to fetch code (actions/checkout)
actions: read # to correctly identify workflow run (cypress-io/github-action)

name: Website tests
needs: [build]
Expand All @@ -192,23 +191,18 @@ jobs:
- name: Build
uses: ./.github/actions/prepare-build

- name: Install Cypress
run: yarn cypress install
- name: Install Playwright Browsers
run: npx playwright install --with-deps

- env:
DEBUG: '@cypress/github-action'
name: Cypress run
uses: cypress-io/github-action@v2
with:
project: ./packages/website
start: yarn start
- name: Run Playwright tests
run: yarn playwright test --reporter=list
working-directory: packages/website

- uses: actions/upload-artifact@v3
- if: always()
uses: actions/upload-artifact@v3
with:
name: screenshots
path: |
packages/website/cypress/screenshots/
packages/website/cypress/videos/
name: playwright-report
path: packages/website/playwright-report

upload_coverage:
name: Upload Codecov Coverage
Expand Down
5 changes: 3 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ yarn-error.log*
packages/website/.docusaurus
packages/website/.cache-loader
packages/website/build
packages/website/cypress/screenshots
packages/website/cypress/videos
packages/website/playwright-report
packages/website/playwright/.cache
packages/website/static/sandbox
packages/website/test-results

# Runtime data
pids
Expand Down
1 change: 1 addition & 0 deletions packages/website/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ module.exports = {
overrides: [
{
files: [
'./*.config.*',
'./src/pages/*.tsx',
'./src/components/**/*.tsx',
'./src/components/hooks/*.ts',
Expand Down
15 changes: 0 additions & 15 deletions packages/website/cypress/integration/index.spec.js

This file was deleted.

17 changes: 0 additions & 17 deletions packages/website/cypress/plugins/index.js

This file was deleted.

1 change: 0 additions & 1 deletion packages/website/cypress/support/commands.js

This file was deleted.

1 change: 0 additions & 1 deletion packages/website/cypress/support/index.js

This file was deleted.

28 changes: 0 additions & 28 deletions packages/website/cypress/utils.js

This file was deleted.

7 changes: 3 additions & 4 deletions packages/website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@
"serve": "docusaurus serve",
"start": "docusaurus start",
"swizzle": "docusaurus swizzle",
"test": "cypress run",
"test:open": "cypress open",
"test": "playwright test",
"typecheck": "tsc"
},
"dependencies": {
Expand Down Expand Up @@ -43,14 +42,14 @@
"react": "^18.0.0"
},
"devDependencies": {
"@axe-core/playwright": "^4.4.5",
"@docusaurus/module-type-aliases": "~2.1.0",
"@playwright/test": "^1.27.1",
"@types/react": "^18.0.9",
"@types/react-helmet": "^6.1.5",
"@types/react-router-dom": "^5.3.3",
"@typescript-eslint/eslint-plugin": "5.40.0",
"copy-webpack-plugin": "^11.0.0",
"cypress": "8.7.0",
"cypress-axe": "^0.14.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.5.0",
Expand Down
29 changes: 29 additions & 0 deletions packages/website/playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';

const config: PlaywrightTestConfig = {
forbidOnly: !!process.env.CI,
fullyParallel: true,
reporter: 'html',
retries: 0,
testDir: './tests',
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
},
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
},
},
],
webServer: {
command: 'yarn start',
port: 3000,
},
workers: process.env.CI ? 1 : undefined,
};

export default config;
7 changes: 7 additions & 0 deletions packages/website/tests/index.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import AxeBuilder from '@axe-core/playwright';
import { test } from '@playwright/test';

test('Index', async ({ page }) => {
await page.goto('/');
await new AxeBuilder({ page }).analyze();
});
8 changes: 1 addition & 7 deletions packages/website/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,5 @@
},
"types": ["@docusaurus/module-type-aliases", "@docusaurus/theme-classic"]
},
"include": [
"src/",
"plugins/",
"typings",
"./docusaurusConfig.ts",
"./rulesMeta.ts"
]
"include": ["src", "tests", "plugins", "typings", "./*.ts"]
}
Loading