From a1fa80d5c2088b92efb8a1ab54d530426321bc87 Mon Sep 17 00:00:00 2001 From: Marais Devis Date: Wed, 10 Jul 2024 12:07:34 +0200 Subject: [PATCH] Add playwright simple nav. test that passes --- .github/workflows/ci-cd.yml | 164 +++++++++++++++++----------------- .gitignore | 3 + package.json | 1 + playwright.config.ts | 28 ++++++ playwright/navigation.spec.ts | 11 +++ pnpm-lock.yaml | 43 ++++++++- 6 files changed, 166 insertions(+), 84 deletions(-) create mode 100644 playwright.config.ts create mode 100644 playwright/navigation.spec.ts diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml index 4d631ea..9e4d075 100644 --- a/.github/workflows/ci-cd.yml +++ b/.github/workflows/ci-cd.yml @@ -1,87 +1,87 @@ -# name: CI -# on: push +name: CI +on: push -# jobs: -# ci: -# name: Jest Unit Tests, Type Checking, Linting, Playwright End to End Tests -# runs-on: ubuntu-latest # or macos-latest, windows-latest -# timeout-minutes: 30 -# # TODO: Update environment variables with your own database credentials -# env: -# PGHOST: localhost -# PGDATABASE: next_js_example_spring_2024 -# PGUSERNAME: next_js_example_spring_2024 -# PGPASSWORD: next_js_example_spring_2024 -# steps: -# - name: Start preinstalled PostgreSQL on Ubuntu -# run: | -# sudo systemctl start postgresql.service -# pg_isready -# - name: Create database user -# run: | -# sudo -u postgres psql --command="CREATE USER $PGUSERNAME PASSWORD '$PGPASSWORD'" --command="\du" -# - name: Create database and allow user -# run: | -# sudo -u postgres createdb --owner=$PGUSERNAME $PGDATABASE -# - uses: actions/checkout@v4 -# - uses: pnpm/action-setup@v4 +jobs: + ci: + name: Jest Unit Tests, Type Checking, Linting, Playwright End to End Tests + runs-on: ubuntu-latest # or macos-latest, windows-latest + timeout-minutes: 30 + # TODO: Update environment variables with your own database credentials + env: + PGHOST: localhost + PGDATABASE: next_js_example_spring_2024 + PGUSERNAME: next_js_example_spring_2024 + PGPASSWORD: next_js_example_spring_2024 + steps: + - name: Start preinstalled PostgreSQL on Ubuntu + run: | + sudo systemctl start postgresql.service + pg_isready + - name: Create database user + run: | + sudo -u postgres psql --command="CREATE USER $PGUSERNAME PASSWORD '$PGPASSWORD'" --command="\du" + - name: Create database and allow user + run: | + sudo -u postgres createdb --owner=$PGUSERNAME $PGDATABASE + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v4 -# # Use the official setup-node action (sets up Node.js): -# # https://github.com/actions/setup-node -# - name: Use Node.js -# uses: actions/setup-node@v4 -# with: -# node-version: 'lts/*' -# cache: 'pnpm' + # Use the official setup-node action (sets up Node.js): + # https://github.com/actions/setup-node + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: 'lts/*' + cache: 'pnpm' -# - name: Install dependencies -# run: pnpm install -# - name: Jest unit tests -# run: pnpm jest -# - name: Run database migrations -# run: pnpm migrate up -# - name: Build Next.js app (types needed for TSC and ESLint) -# run: pnpm build -# - name: Check TypeScript Types -# run: pnpm tsc -# - name: Lint with ESLint -# run: pnpm eslint . --max-warnings 0 -# - name: Lint with Stylelint -# run: pnpm stylelint '**/*.{css,scss,less,js,tsx}' + - name: Install dependencies + run: pnpm install + - name: Jest unit tests + run: pnpm jest + - name: Run database migrations + run: pnpm migrate up + - name: Build Next.js app (types needed for TSC and ESLint) + run: pnpm build + - name: Check TypeScript Types + run: pnpm tsc + - name: Lint with ESLint + run: pnpm eslint . --max-warnings 0 + - name: Lint with Stylelint + run: pnpm stylelint '**/*.{css,scss,less,js,tsx}' -# # Cache and install Playwright browser binaries, modified version of: -# # https://github.com/microsoft/playwright/issues/7249#issuecomment-1154603556 -# # https://github.com/microsoft/playwright/issues/7249#issuecomment-1385567519 -# # https://playwrightsolutions.com/playwright-github-action-to-cache-the-browser-binaries/ -# - name: Get installed Playwright version for cache key -# run: echo "PLAYWRIGHT_VERSION=$(yq eval '.version' --output-format=yaml ./node_modules/@playwright/test/package.json)" >> $GITHUB_ENV -# - name: Cache Playwright browser binaries -# uses: actions/cache@v4 -# id: playwright-browser-cache -# with: -# path: | -# ~/.cache/ms-playwright -# key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }} -# - name: Install Playwright browsers only on cache miss -# run: pnpm playwright install --with-deps chromium -# if: steps.playwright-browser-cache.outputs.cache-hit != 'true' + # Cache and install Playwright browser binaries, modified version of: + # https://github.com/microsoft/playwright/issues/7249#issuecomment-1154603556 + # https://github.com/microsoft/playwright/issues/7249#issuecomment-1385567519 + # https://playwrightsolutions.com/playwright-github-action-to-cache-the-browser-binaries/ + - name: Get installed Playwright version for cache key + run: echo "PLAYWRIGHT_VERSION=$(yq eval '.version' --output-format=yaml ./node_modules/@playwright/test/package.json)" >> $GITHUB_ENV + - name: Cache Playwright browser binaries + uses: actions/cache@v4 + id: playwright-browser-cache + with: + path: | + ~/.cache/ms-playwright + key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }} + - name: Install Playwright browsers only on cache miss + run: pnpm playwright install --with-deps chromium + if: steps.playwright-browser-cache.outputs.cache-hit != 'true' -# - name: Run tests -# run: pnpm playwright test -# - uses: actions/upload-artifact@v4 -# if: failure() -# with: -# name: playwright-screenshots-videos -# path: playwright/test-results/ -# cd: -# name: Deploy to Fly.io -# runs-on: ubuntu-latest -# timeout-minutes: 30 -# needs: ci -# if: github.ref == 'refs/heads/main' -# env: -# FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }} -# steps: -# - uses: actions/checkout@v4 -# - uses: superfly/flyctl-actions/setup-flyctl@master -# - run: flyctl deploy --remote-only + - name: Run tests + run: pnpm playwright test + - uses: actions/upload-artifact@v4 + if: failure() + with: + name: playwright-screenshots-videos + path: playwright/test-results/ + cd: + name: Deploy to Fly.io + runs-on: ubuntu-latest + timeout-minutes: 30 + needs: ci + if: github.ref == 'refs/heads/main' + env: + FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }} + steps: + - uses: actions/checkout@v4 + - uses: superfly/flyctl-actions/setup-flyctl@master + - run: flyctl deploy --remote-only diff --git a/.gitignore b/.gitignore index 7231072..6617111 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,6 @@ yarn-error.log* next-env.d.ts .eslintcache +playwright/test-results/ +/playwright/report/ +/playwright/.cache/ diff --git a/package.json b/package.json index e523d83..2598614 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ }, "devDependencies": { "@jest/globals": "^29.7.0", + "@playwright/test": "^1.45.1", "@testing-library/jest-dom": "^6.4.6", "@testing-library/react": "^16.0.0", "@ts-safeql/eslint-plugin": "^3.3.1", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..f7d9c3a --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,28 @@ +import { PlaywrightTestConfig } from '@playwright/test'; + +// Config file docs: https://playwright.dev/docs/test-configuration +const config: PlaywrightTestConfig = { + webServer: { + command: '"./node_modules/.bin/next" start', + port: 3000, + stdout: 'pipe', + }, + testMatch: '**/playwright/**', + // Fail tests if test.only() found on CI + forbidOnly: !!process.env.CI, + // Run tests in files also in parallel + fullyParallel: true, + // Disable all parallelization on CI + workers: process.env.CI ? 1 : undefined, + reporter: process.env.CI + ? 'github' + : [['html', { outputFolder: 'playwright/report/' }]], + outputDir: 'playwright/test-results/', + use: { + testIdAttribute: 'data-test-id', + screenshot: 'only-on-failure', + video: 'retain-on-failure', + }, +}; + +export default config; diff --git a/playwright/navigation.spec.ts b/playwright/navigation.spec.ts new file mode 100644 index 0000000..94b3dd7 --- /dev/null +++ b/playwright/navigation.spec.ts @@ -0,0 +1,11 @@ +import { expect, test } from '@playwright/test'; + +test('navigation test', async ({ page }) => { + await page.goto('/'); + + await expect( + page.getByRole('heading', { + name: 'Welcome to the Event Network Project!', + }), + ).toBeVisible(); +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 38e064d..defb643 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -19,7 +19,7 @@ importers: version: 9.1.0(dotenv@16.4.5) next: specifier: 15.0.0-canary.44 - version: 15.0.0-canary.44(@babel/core@7.24.7)(react-dom@19.0.0-rc.0(react@19.0.0-rc.0))(react@19.0.0-rc.0)(sass@1.77.6) + version: 15.0.0-canary.44(@babel/core@7.24.7)(@playwright/test@1.45.1)(react-dom@19.0.0-rc.0(react@19.0.0-rc.0))(react@19.0.0-rc.0)(sass@1.77.6) postgres: specifier: ^3.4.4 version: 3.4.4 @@ -48,6 +48,9 @@ importers: '@jest/globals': specifier: ^29.7.0 version: 29.7.0 + '@playwright/test': + specifier: ^1.45.1 + version: 1.45.1 '@testing-library/jest-dom': specifier: ^6.4.6 version: 6.4.6(@jest/globals@29.7.0)(jest@29.7.0(@types/node@20.14.10)) @@ -802,6 +805,11 @@ packages: resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} + '@playwright/test@1.45.1': + resolution: {integrity: sha512-Wo1bWTzQvGA7LyKGIZc8nFSTFf2TkthGIFBR+QVNilvwouGzFd4PYukZe3rvf5PSqjHi1+1NyKSDZKcQWETzaA==} + engines: {node: '>=18'} + hasBin: true + '@sinclair/typebox@0.27.8': resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==} @@ -1958,6 +1966,11 @@ packages: fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} + fsevents@2.3.2: + resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -3035,6 +3048,16 @@ packages: resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==} engines: {node: '>=8'} + playwright-core@1.45.1: + resolution: {integrity: sha512-LF4CUUtrUu2TCpDw4mcrAIuYrEjVDfT1cHbJMfwnE2+1b8PZcFzPNgvZCvq2JfQ4aTjRCCHw5EJ2tmr2NSzdPg==} + engines: {node: '>=18'} + hasBin: true + + playwright@1.45.1: + resolution: {integrity: sha512-Hjrgae4kpSQBr98nhCj3IScxVeVUixqj+5oyif8TdIn2opTCPEzqAqNMeK42i3cWDCVu9MI+ZsGWw+gVR4ISBg==} + engines: {node: '>=18'} + hasBin: true + pluralize@8.0.0: resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==} engines: {node: '>=4'} @@ -4602,6 +4625,10 @@ snapshots: '@pkgr/core@0.1.1': {} + '@playwright/test@1.45.1': + dependencies: + playwright: 1.45.1 + '@sinclair/typebox@0.27.8': {} '@sinonjs/commons@3.0.1': @@ -6104,6 +6131,9 @@ snapshots: fs.realpath@1.0.0: {} + fsevents@2.3.2: + optional: true + fsevents@2.3.3: optional: true @@ -7136,7 +7166,7 @@ snapshots: negotiator@0.6.3: {} - next@15.0.0-canary.44(@babel/core@7.24.7)(react-dom@19.0.0-rc.0(react@19.0.0-rc.0))(react@19.0.0-rc.0)(sass@1.77.6): + next@15.0.0-canary.44(@babel/core@7.24.7)(@playwright/test@1.45.1)(react-dom@19.0.0-rc.0(react@19.0.0-rc.0))(react@19.0.0-rc.0)(sass@1.77.6): dependencies: '@next/env': 15.0.0-canary.44 '@swc/helpers': 0.5.11 @@ -7157,6 +7187,7 @@ snapshots: '@next/swc-win32-arm64-msvc': 15.0.0-canary.44 '@next/swc-win32-ia32-msvc': 15.0.0-canary.44 '@next/swc-win32-x64-msvc': 15.0.0-canary.44 + '@playwright/test': 1.45.1 sass: 1.77.6 sharp: 0.33.4 transitivePeerDependencies: @@ -7374,6 +7405,14 @@ snapshots: dependencies: find-up: 4.1.0 + playwright-core@1.45.1: {} + + playwright@1.45.1: + dependencies: + playwright-core: 1.45.1 + optionalDependencies: + fsevents: 2.3.2 + pluralize@8.0.0: {} possible-typed-array-names@1.0.0: {}