setup playwright

.github/workflows/frontend.yml

@@ -59,3 +59,31 @@ jobs:
  with:
  name: coverage-report
  path: frontend/test
+ end-to-end-test:
+ timeout-minutes: 60
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v2
+ - name: Setup Node.js
+ uses: actions/setup-node@v2
+ with:
+ node-version: "20"
+ cache: "pnpm"
+ - name: Install pnpm
+ run: npm install -g pnpm
+ - name: Install dependencies
+ working-directory: frontend
+ run: pnpm install
+ - name: Install Playwright Browsers
+ working-directory: frontend
+ run: pnpm exec playwright install --with-deps
+ - name: Run Playwright tests
+ working-directory: frontend
+ run: pnpm exec playwright test
+ - uses: actions/upload-artifact@v4
+ if: always()
+ with:
+ name: playwright-report
+ path: frontend/playwright-report/
+ retention-days: 30

frontend/.gitignore

@@ -36,3 +36,7 @@ yarn-error.log*
 next-env.d.ts
 
 .env
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

frontend/package.json

@@ -8,7 +8,8 @@
  "start": "next start",
  "lint": "next lint",
  "test": "vitest",
- "test:cov": "vitest run --coverage"
+ "test:cov": "vitest run --coverage",
+ "test:e2e": "playwright test"
  },
  "dependencies": {
  "@chakra-ui/icons": "^2.1.1",
@@ -33,6 +34,7 @@
  "zod": "^3.23.5"
  },
  "devDependencies": {
+ "@playwright/test": "^1.46.0",
  "@testing-library/dom": "^10.4.0",
  "@testing-library/jest-dom": "^6.4.8",
  "@testing-library/react": "^16.0.0",

frontend/playwright.config.ts

@@ -0,0 +1,78 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testDir: "./src/__tests__/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: "html",
+ /* 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: 'http://127.0.0.1:3000',
+
+ /* 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,
+ // },
+});

frontend/src/__tests__/e2e/404.test.ts

@@ -0,0 +1,5 @@
+import { test, expect } from "@playwright/test";
+
+test("404", async ({ page }) => {
+ await page.goto("http://localhost:3000/not-found");
+});