feat(Next > CI): Add Playwright end-to-end test workflow

.github/workflows/playwright.yml

@@ -0,0 +1,29 @@
+name: Playwright Tests
+on:
+ push:
+ branches:
+ - main
+ pull_request: {}
+jobs:
+ test:
+ timeout-minutes: 60
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
+ with:
+ node-version-file: "next/.nvmrc"
+ - name: 📥 Download deps
+ uses: bahmutov/npm-install@v1
+ with:
+ working-directory: next
+ - name: Install Playwright Browsers
+ run: npx playwright install --with-deps
+ - name: Run Playwright tests
+ run: npx playwright test
+ - uses: actions/upload-artifact@v3
+ if: always()
+ with:
+ name: playwright-report
+ path: playwright-report/
+ retention-days: 30

next/.gitignore

@@ -2,9 +2,9 @@
 /node_modules
 
 # testing
-/coverage
-test-results/
-playwright-report/
+/test-results/
+/playwright-report/
+/playwright/.cache/
 
 # next.js
 /.next/

next/__tests__/view/[gallery]/all.e2e.spec.js → next/__tests__/view/[gallery]/all.e2e.spec.ts

@@ -1,4 +1,4 @@
-const { test, expect } = require('@playwright/test')
+import { test, expect } from '@playwright/test'
 
 const HOST_URL = 'http://localhost:3030'
 

next/package.json

@@ -35,7 +35,7 @@
  "xml2js": "^0.4.23"
  },
  "devDependencies": {
- "@playwright/test": "~1.27.1",
+ "@playwright/test": "^1.37.1",
  "@testing-library/jest-dom": "~5.16.5",
  "@testing-library/react": "~14.0.0",
  "@types/geojson": "~7946.0.10",

next/playwright.config.js → next/playwright.config.ts

@@ -1,45 +1,31 @@
-const { devices } = require('@playwright/test')
+import { defineConfig, devices } from '@playwright/test';
 
 /**
- * @see https://playwright.dev/docs/test-configuration
- * @type {import('@playwright/test').PlaywrightTestConfig}
+ * Read environment variables from file.
+ * https:/motdotla/dotenv
  */
-const config = {
- testMatch: /.*e2e.spec.js/,
- testDir: './__tests__',
-
- /* 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,
- },
+// require('dotenv').config();
 
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testMatch: /.*e2e.spec.ts/,
+ testDir: './__tests__',
+ /* 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: {
-
- /* 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:3000',
+ // 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',
@@ -49,63 +35,44 @@ const config = {
  projects: [
  {
  name: 'chromium',
-
- /* Project-specific settings. */
- use: {
- ...devices['Desktop Chrome'],
- },
+ use: { ...devices['Desktop Chrome'] },
  },
 
  {
  name: 'firefox',
- use: {
- ...devices['Desktop Firefox'],
- },
+ use: { ...devices['Desktop Firefox'] },
  },
 
  {
  name: 'webkit',
- use: {
- ...devices['Desktop Safari'],
- },
+ use: { ...devices['Desktop Safari'] },
  },
 
  /* Test against mobile viewports. */
  // {
  // name: 'Mobile Chrome',
- // use: {
- // ...devices['Pixel 5'],
- // },
+ // use: { ...devices['Pixel 5'] },
  // },
  // {
  // name: 'Mobile Safari',
- // use: {
- // ...devices['iPhone 12'],
- // },
+ // use: { ...devices['iPhone 12'] },
  // },
 
  /* Test against branded browsers. */
  // {
  // name: 'Microsoft Edge',
- // use: {
- // channel: 'msedge',
- // },
+ // use: { ...devices['Desktop Edge'], channel: 'msedge' },
  // },
  // {
  // name: 'Google Chrome',
- // use: {
- // channel: 'chrome',
- // },
+ // use: { ...devices['Desktop Chrome'], channel: 'chrome' },
  // },
  ],
 
- /* Folder for test artifacts such as screenshots, videos, traces, etc. */
- // outputDir: 'test-results/',
-
  /* Run your local dev server before starting the tests */
  // webServer: {
  // command: 'npm run start',
- // port: 3000,
+ // url: 'http://127.0.0.1:3000',
+ // reuseExistingServer: !process.env.CI,
  // },
-}
-module.exports = config
+});