E2E tests basic setup

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+jobs:
+  e2e-tests:
+    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 install -g yarn && yarn
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn test:e2e:all
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -46,3 +46,7 @@ next-env.d.ts
 **/public/workbox-*.js.map
 **/public/worker-*.js.map
 **/public/fallback-*.js
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e-tests/inventory/smoke.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test'
+
+
+test.describe('Inventory Smoke Tests', () => {
+  test('has title', async ({ page }) => {
+    await page.goto('/en/inventory')
+
+    await expect(page).toHaveTitle(/Inventory — Princess Helpers/)
+  })
+})

e2e-tests/inventory/snapshots.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test'
+
+import { testLocales } from '../shared/consts'
+
+test.describe('Inventory Snapshots Tests', () => {
+  for (const { locale } of testLocales) {
+    test(`matches screenshot default view [${locale}]`, async ({ page }) => {
+      await page.goto(`/${locale}/inventory`)
+
+      await expect(page).toHaveScreenshot(`default-view-${locale}.png`, {
+        fullPage: true,
+      })
+    })
+  }
+})

e2e-tests/shared/consts.ts

@@ -0,0 +1,10 @@
+import type { LOCALE_SHORT } from '@/translations/languages'
+
+export type TestLocale = {
+  locale: LOCALE_SHORT
+}
+export const testLocales: Array<TestLocale> = [
+  { locale: 'ru' },
+  { locale: 'en' },
+  { locale: 'cz' },
+]

jest.config.mjs

@@ -16,6 +16,7 @@ const config = {
     '^@/shared/(.*)$': '<rootDir>/src/shared/$1',
     '^@/state/(.*)$': '<rootDir>/src/state/$1',
   },
+  testMatch: ['<rootDir>/src/**/*.test.ts', '<rootDir>/src/**/*.test.tsx'],
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

package.json

@@ -9,6 +9,9 @@
     "lint": "next lint",
     "test": "jest",
     "test:coverage": "jest --collectCoverage",
+    "test:e2e:all": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e": "playwright test --project chrome --project mobileChrome",
     "format": "prettier . --check",
     "format:fix": "yarn lint -- --fix && prettier --write .",
     "weok": "yarn tsc && yarn lint && yarn format && yarn test && echo WE OK",
@@ -42,6 +45,7 @@
     "@lingui/loader": "^4.5.0",
     "@lingui/macro": "^4.5.0",
     "@lingui/swc-plugin": "^4.0.4",
+    "@playwright/test": "^1.43.1",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.0",
     "@types/jest": "^29.5.8",

playwright.config.ts

@@ -0,0 +1,67 @@
+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-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: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost: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: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    {
+      name: 'mobileChrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'mobileSafari',
+      use: { ...devices['iPhone 12'] },
+    },
+
+    /* Test against branded browsers. */
+    {
+      name: 'chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'yarn dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+})

yarn.lock

@@ -1809,6 +1809,13 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@playwright/test@^1.43.1":
+  version "1.43.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.43.1.tgz#16728a59eb8ce0f60472f98d8886d6cab0fa3e42"
+  integrity sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==
+  dependencies:
+    playwright "1.43.1"
+
 "@prettier/cli@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@prettier/cli/-/cli-0.1.5.tgz#be88fa678f0d9af8076f9750fa6dfbb9d50ded45"
@@ -4064,6 +4071,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+[email protected]:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 fsevents@^2.3.2, fsevents@~2.3.1, fsevents@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -5973,6 +5985,20 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+[email protected]:
+  version "1.43.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.43.1.tgz#0eafef9994c69c02a1a3825a4343e56c99c03b02"
+  integrity sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==
+
+[email protected]:
+  version "1.43.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.43.1.tgz#8ad08984ac66c9ef3d0db035be54dd7ec9f1c7d9"
+  integrity sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==
+  dependencies:
+    playwright-core "1.43.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 pofile@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/pofile/-/pofile-1.1.4.tgz#eab7e29f5017589b2a61b2259dff608c0cad76a2"