diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 00000000..11b573ab --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore index 5dc24d17..f99203a8 100644 --- a/.gitignore +++ b/.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/ diff --git a/e2e-tests/inventory/smoke.spec.ts b/e2e-tests/inventory/smoke.spec.ts new file mode 100644 index 00000000..0d71af60 --- /dev/null +++ b/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/) + }) +}) \ No newline at end of file diff --git a/e2e-tests/inventory/snapshots.spec.ts b/e2e-tests/inventory/snapshots.spec.ts new file mode 100644 index 00000000..bc7071c3 --- /dev/null +++ b/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, + }) + }) + } +}) diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-chrome-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-chrome-linux.png new file mode 100644 index 00000000..454dba85 Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-chrome-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-firefox-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-firefox-linux.png new file mode 100644 index 00000000..3c3f70cb Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-firefox-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-mobileChrome-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-mobileChrome-linux.png new file mode 100644 index 00000000..2e5eff01 Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-mobileChrome-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-mobileSafari-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-mobileSafari-linux.png new file mode 100644 index 00000000..3a499704 Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-mobileSafari-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-webkit-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-webkit-linux.png new file mode 100644 index 00000000..1f575fc1 Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-cz-webkit-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-chrome-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-chrome-linux.png new file mode 100644 index 00000000..e2cdb715 Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-chrome-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-firefox-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-firefox-linux.png new file mode 100644 index 00000000..cb8be025 Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-firefox-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-mobileChrome-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-mobileChrome-linux.png new file mode 100644 index 00000000..af08ad3d Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-mobileChrome-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-mobileSafari-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-mobileSafari-linux.png new file mode 100644 index 00000000..46efbcb2 Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-mobileSafari-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-webkit-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-webkit-linux.png new file mode 100644 index 00000000..de9b2dcf Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-en-webkit-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-chrome-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-chrome-linux.png new file mode 100644 index 00000000..5be79997 Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-chrome-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-firefox-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-firefox-linux.png new file mode 100644 index 00000000..2bb46b65 Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-firefox-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-mobileChrome-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-mobileChrome-linux.png new file mode 100644 index 00000000..843a6e52 Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-mobileChrome-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-mobileSafari-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-mobileSafari-linux.png new file mode 100644 index 00000000..eb780184 Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-mobileSafari-linux.png differ diff --git a/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-webkit-linux.png b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-webkit-linux.png new file mode 100644 index 00000000..7a383607 Binary files /dev/null and b/e2e-tests/inventory/snapshots.spec.ts-snapshots/default-view-ru-webkit-linux.png differ diff --git a/e2e-tests/shared/consts.ts b/e2e-tests/shared/consts.ts new file mode 100644 index 00000000..04248574 --- /dev/null +++ b/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 = [ + { locale: 'ru' }, + { locale: 'en' }, + { locale: 'cz' }, +] \ No newline at end of file diff --git a/jest.config.mjs b/jest.config.mjs index a5eb155c..c0f96f82 100644 --- a/jest.config.mjs +++ b/jest.config.mjs @@ -16,6 +16,7 @@ const config = { '^@/shared/(.*)$': '/src/shared/$1', '^@/state/(.*)$': '/src/state/$1', }, + testMatch: ['/src/**/*.test.ts', '/src/**/*.test.tsx'], } // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async diff --git a/package.json b/package.json index 0650d3bd..7df5195a 100644 --- a/package.json +++ b/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", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 00000000..b46b6d19 --- /dev/null +++ b/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, + }, +}) diff --git a/yarn.lock b/yarn.lock index 21e15901..5b608475 100644 --- a/yarn.lock +++ b/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== +fsevents@2.3.2: + 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" +playwright-core@1.43.1: + version "1.43.1" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.43.1.tgz#0eafef9994c69c02a1a3825a4343e56c99c03b02" + integrity sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg== + +playwright@1.43.1: + 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"