Skip to content

Commit

Permalink
Install Playwright for E2E testing (#39)
Browse files Browse the repository at this point in the history
* switch to hash router to avoid 404 bug

* add playwright and create an initial test
  • Loading branch information
ann-kilzer authored Jun 15, 2024
1 parent 7db8a69 commit 4034512
Show file tree
Hide file tree
Showing 8 changed files with 184 additions and 3 deletions.
27 changes: 27 additions & 0 deletions .github/workflows/playwright.yml
Original file line number Diff line number Diff line change
@@ -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
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,7 @@ dist-ssr
*.sln
*.sw?
coverage
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
8 changes: 8 additions & 0 deletions e2e/home.spec.ts
Original file line number Diff line number Diff line change
@@ -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/);
});
60 changes: 60 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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",
Expand Down
77 changes: 77 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -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,
// },
});
1 change: 1 addition & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
},
"include": [
"src",
"e2e"
],
"references": [
{
Expand Down
5 changes: 3 additions & 2 deletions tsconfig.node.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
}

0 comments on commit 4034512

Please sign in to comment.