Skip to content

Commit

Permalink
feat: replace cypress with playwright
Browse files Browse the repository at this point in the history
  • Loading branch information
kingyue737 committed Oct 19, 2023
1 parent 3347061 commit fb4f6e4
Show file tree
Hide file tree
Showing 17 changed files with 183 additions and 1,095 deletions.
14 changes: 7 additions & 7 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,21 @@ module.exports = {
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-unused-vars': 'off'
'@typescript-eslint/no-unused-vars': 'off',
},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'@vue/eslint-config-typescript/recommended',
'@vue/eslint-config-prettier/skip-formatting'
'@vue/eslint-config-prettier/skip-formatting',
],
overrides: [
{
files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'],
extends: ['plugin:cypress/recommended']
}
files: ['e2e/**/*.{js,ts,jsx,tsx}'],
extends: ['plugin:playwright/recommended'],
},
],
parserOptions: {
ecmaVersion: 'latest'
}
ecmaVersion: 'latest',
},
}
48 changes: 15 additions & 33 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -64,41 +64,23 @@ jobs:
- run: pnpm install
- run: pnpm run test:unit

test-e2e:
e2e:
timeout-minutes: 60
runs-on: ubuntu-latest

strategy:
matrix:
node-version: [18.x]
os: [ubuntu-latest]
fail-fast: false

steps:
- uses: actions/checkout@v3
- uses: actions/cache@v3
with:
path: |
~/.cache
key: cypress-cache-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}

- uses: pnpm/action-setup@v2

- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
- uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
registry-url: https://registry.npmjs.org/
cache: pnpm

- run: pnpm install

- name: Cypress PNPM Patch
run: cp pnpm-lock.yaml package-lock.json

- name: Cypress
uses: cypress-io/github-action@v4
node-version: 18
- name: Install dependencies
run: pnpm install
- name: Install Playwright Browsers
run: pnpm playwright install chromium
- name: Run Playwright tests
run: pnpm run test:e2e
- uses: actions/upload-artifact@v3
if: always()
with:
install-command: echo
build: pnpm run build
start: pnpm run preview
command-prefix: '--'
name: playwright-report
path: playwright-report/
retention-days: 30
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ dist-ssr
coverage
*.local

/cypress/videos/
/cypress/screenshots/
test-results/
playwright-report/

# Editor directories and files
!.vscode/extensions.json
Expand Down
1 change: 1 addition & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"recommendations": [
"vue.volar",
"ms-playwright.playwright",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"editorconfig.editorconfig",
Expand Down
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ Lightweight Vue 3 version of <a href="https://github.com/kingyue737/vitify-admin

- ☁️ Deploy on [Netlify](https://www.netlify.com/), zero-config

- 🧪 Unit/Component Testing with [Vitest](https://github.com/vitest-dev/vitest) + [Testing Library](https://github.com/testing-library/vue-testing-library), E2E Testing with [Cypress](https://cypress.io/) on [GitHub Actions](https://github.com/features/actions)
- 🧪 Unit/Component Testing with [Vitest](https://github.com/vitest-dev/vitest) + [Testing Library](https://github.com/testing-library/vue-testing-library), E2E Testing with [Playwright](https://playwright.dev/) on [GitHub Actions](https://github.com/features/actions)

<br>

Expand Down Expand Up @@ -92,10 +92,10 @@ Currently I want to keep this template as light as possible, see [Vitify Admin](

- [TypeScript](https://www.typescriptlang.org/)
- [Vitest](https://github.com/vitest-dev/vitest) - Unit testing powered by Vite
- [Cypress](https://cypress.io/) - E2E testing
- [pnpm](https://pnpm.js.org/) - Fast, disk space efficient package manager
- [Netlify](https://www.netlify.com/) - zero-config deployment
- [VS Code Extensions](./.vscode/extensions.json)
- [Playwright](https://playwright.dev/docs/getting-started-vscode) - E2E testing
- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - TypeScript support inside Vue SFCs
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Find and fix problems in your code
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Code formatter
Expand Down
10 changes: 0 additions & 10 deletions cypress.config.ts

This file was deleted.

21 changes: 0 additions & 21 deletions cypress/e2e/example.cy.ts

This file was deleted.

10 changes: 0 additions & 10 deletions cypress/e2e/tsconfig.json

This file was deleted.

5 changes: 0 additions & 5 deletions cypress/fixtures/example.json

This file was deleted.

39 changes: 0 additions & 39 deletions cypress/support/commands.ts

This file was deleted.

20 changes: 0 additions & 20 deletions cypress/support/e2e.ts

This file was deleted.

11 changes: 11 additions & 0 deletions e2e/example.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { test, expect } from '@playwright/test'

test('example', async ({ page }) => {
await page.goto('/')
await page.getByText('Opinionated Starter Template').isVisible()
await page.getByLabel("What's your name?").fill('kingyue')
await page.getByRole('button', { name: 'Confirm', exact: true }).click()
const locator = page.getByText('Hi, kingyue!')
await locator.isVisible()
await expect(locator).toBeHidden({ timeout: 6000 })
})
4 changes: 4 additions & 0 deletions e2e/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"extends": "@tsconfig/node18/tsconfig.json",
"include": ["./**/*"]
}
8 changes: 3 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
"build": "vite build",
"preview": "vite preview --config vite.config.preview.ts",
"test:unit": "vitest",
"test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
"test:e2e": "playwright test",
"typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"format": "prettier --write src/"
Expand All @@ -26,6 +25,7 @@
"@kingyue/rollup-plugin-modify": "^4.1.0",
"@mdi/js": "^7.3.67",
"@pinia/testing": "^0.1.3",
"@playwright/test": "^1.39.0",
"@rushstack/eslint-patch": "^1.5.1",
"@testing-library/vue": "^7.0.0",
"@tsconfig/node18": "^18.2.2",
Expand All @@ -37,15 +37,13 @@
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/test-utils": "^2.4.1",
"@vue/tsconfig": "^0.4.0",
"cypress": "^13.3.0",
"eslint": "^8.51.0",
"eslint-plugin-cypress": "^2.15.1",
"eslint-plugin-playwright": "^0.17.0",
"eslint-plugin-vue": "^9.17.0",
"jsdom": "^22.1.0",
"lodash": "^4.17.21",
"prettier": "^3.0.3",
"sass": "^1.69.4",
"start-server-and-test": "^2.0.1",
"typescript": "^5.2.2",
"unplugin-auto-import": "^0.16.6",
"unplugin-vue-components": "^0.25.2",
Expand Down
75 changes: 75 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import type { PlaywrightTestConfig } from '@playwright/test'
import { devices } from '@playwright/test'

const port = 5173

/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// require('dotenv').config();

/**
* See https://playwright.dev/docs/test-configuration.
*/
const config: PlaywrightTestConfig = {
testDir: './e2e',
/* Maximum time one test can run for. */
timeout: 30 * 1000,
expect: {
/**
* Maximum time expect() should wait for the condition to be met.
* For example in `await expect(locator).toHaveText();`
*/
timeout: 5000,
},
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
actionTimeout: 0,
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: `http://localhost:${port}`,

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',

/* Only on CI systems run the tests headless */
headless: !!process.env.CI,
permissions: ['clipboard-read', 'clipboard-write'],
},

/* Configure projects for major browsers */
projects: [
{
name: 'chrome',
use: {
...devices['Desktop Chrome'],
},
},
],

/* Folder for test artifacts such as screenshots, videos, traces, etc. */
// outputDir: 'test-results/',

/* Run your local dev server before starting the tests */
webServer: {
/**
* Use the dev server by default for faster feedback loop.
* Use the preview server on CI for more realistic testing.
Playwright will re-use the local server if there is already a dev-server running.
*/
command: process.env.CI ? `pnpm preview --port ${port}` : 'pnpm dev',
port,
reuseExistingServer: !process.env.CI,
},
}

export default config
Loading

0 comments on commit fb4f6e4

Please sign in to comment.