From 40345125812343151d5d2bcd80de49e6fa71340d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ann=20Kilzer=20=E3=82=AD=E3=83=AB=E3=82=B6=E3=83=BC?= =?UTF-8?q?=E6=9D=8F?= Date: Sat, 15 Jun 2024 19:28:44 +0900 Subject: [PATCH] Install Playwright for E2E testing (#39) * switch to hash router to avoid 404 bug * add playwright and create an initial test --- .github/workflows/playwright.yml | 27 +++++++++++ .gitignore | 4 ++ e2e/home.spec.ts | 8 ++++ package-lock.json | 60 +++++++++++++++++++++++++ package.json | 5 ++- playwright.config.ts | 77 ++++++++++++++++++++++++++++++++ tsconfig.json | 1 + tsconfig.node.json | 5 ++- 8 files changed, 184 insertions(+), 3 deletions(-) create mode 100644 .github/workflows/playwright.yml create mode 100644 e2e/home.spec.ts create mode 100644 playwright.config.ts diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 0000000..5bbb1c0 --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,27 @@ +name: Playwright Tests +on: + push: + branches: [ main ] + pull_request: + branches: [ main ] +jobs: + test: + timeout-minutes: 60 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: lts/* + - name: Install dependencies + run: npm ci + - name: Install Playwright Browsers + run: npx playwright install --with-deps + - name: Run Playwright tests + run: npx playwright test + - uses: actions/upload-artifact@v4 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/.gitignore b/.gitignore index 1eb4319..8e6c928 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,7 @@ dist-ssr *.sln *.sw? coverage +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/e2e/home.spec.ts b/e2e/home.spec.ts new file mode 100644 index 0000000..555f7c6 --- /dev/null +++ b/e2e/home.spec.ts @@ -0,0 +1,8 @@ +import { test, expect } from '@playwright/test'; + +test('has title', async ({ page }) => { + await page.goto('/'); + + // Expect a title "to contain" a substring. + await expect(page).toHaveTitle(/WiSE/); +}); diff --git a/package-lock.json b/package-lock.json index 8a56576..ca96d91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "styled-components": "6.1.8" }, "devDependencies": { + "@playwright/test": "^1.44.1", "@stylistic/eslint-plugin-ts": "1.7.2", "@testing-library/jest-dom": "6.4.2", "@testing-library/react": "15.0.2", @@ -1442,6 +1443,21 @@ "node": ">= 8" } }, + "node_modules/@playwright/test": { + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz", + "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==", + "dev": true, + "dependencies": { + "playwright": "1.44.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/@polka/url": { "version": "1.0.0-next.25", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz", @@ -6063,6 +6079,50 @@ "pathe": "^1.1.2" } }, + "node_modules/playwright": { + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz", + "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==", + "dev": true, + "dependencies": { + "playwright-core": "1.44.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz", + "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==", + "dev": true, + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/possible-typed-array-names": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", diff --git a/package.json b/package.json index a9c40c4..f2e6f1b 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,9 @@ "preview": "vite preview", "prepare": "husky", "test": "vitest", - "test:ui": "vitest --ui" + "test:ui": "vitest --ui", + "test:e2e": "npx playwright test", + "test:e2e:ui": "npx playwright test --ui" }, "lint-staged": { "*.{ts,tsx,js,cjs}": "eslint" @@ -30,6 +32,7 @@ "styled-components": "6.1.8" }, "devDependencies": { + "@playwright/test": "1.44.1", "@stylistic/eslint-plugin-ts": "1.7.2", "@testing-library/jest-dom": "6.4.2", "@testing-library/react": "15.0.2", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..d15a1f5 --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,77 @@ +import { defineConfig, devices } from '@playwright/test'; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: './e2e', + /* Run tests in files in parallel */ + fullyParallel: true, + /* 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: process.env.CI ? 'dot' : 'list', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Base URL to use in actions like `await page.goto('/')`. */ + baseURL: process.env.PLAYWRIGHT_BASE_URL ?? (process.env.CI ? 'https://womeninsoftware.jp' : 'http://localhost:5173/'), + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + + /* Test against mobile viewports. */ + { + name: 'Mobile Chrome', + use: { ...devices['Pixel 5'] }, + }, + { + name: 'Mobile Safari', + use: { ...devices['iPhone 12'] }, + }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { ...devices['Desktop Edge'], channel: 'msedge' }, + // }, + // { + // name: 'Google Chrome', + // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + // }, + ], + + /* Run your local dev server before starting the tests */ + // webServer: { + // command: 'npm run start', + // url: 'http://127.0.0.1:3000', + // reuseExistingServer: !process.env.CI, + // }, +}); diff --git a/tsconfig.json b/tsconfig.json index 4c05c59..68dac6d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,6 +28,7 @@ }, "include": [ "src", + "e2e" ], "references": [ { diff --git a/tsconfig.node.json b/tsconfig.node.json index 4620c94..ada6068 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -8,13 +8,14 @@ "strict": true, "paths": { "@/*": [ - "./src/*" + "./src/*", ] }, }, "include": [ "vite.config.ts", "vite-env.d.ts", - "vitest.config.ts" + "vitest.config.ts", + "playwright.config.ts" ] } \ No newline at end of file