Playwright local

.github/workflows/build-nextjs.yml

@@ -12,18 +12,21 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v3
         with:
           path: |
-            node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            **/.next/cache
+          key: ${{ runner.os }}-build-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-build-yarn-
 
       - name: Install dependencies
         run: yarn
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
 
       - name: Build frontend
         run: |

.github/workflows/check-pr.yml

@@ -80,3 +80,7 @@ jobs:
           service_account_credentials: ${{ secrets.MONDOO_SECRET }}
           scan_type: k8s
           path: prod-manifests.yaml
+
+  run-playwright:
+    name: Run Playwright
+    uses: ./.github/workflows/playwright.yml

.github/workflows/playwright.yml

@@ -0,0 +1,75 @@
+name: Playwright tests
+on:
+  workflow_call:
+
+jobs:
+  run-playwright:
+    name: Run Playwright
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          path: './frontend'
+
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          repository: podkrepi-bg/api
+          ref: master
+          path: './api'
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v3
+        with:
+          path: |
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            **/.next/cache
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Run db
+        working-directory: ./api
+        run: docker compose up -d pg-db
+
+      - name: Run api
+        working-directory: ./api
+        run: docker compose up -d --force-recreate --no-build migrate-db seed-db api keycloak
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+
+      - name: Install dependencies
+        working-directory: ./frontend
+        run: yarn
+
+      - name: Build frontend
+        working-directory: ./frontend
+        run: yarn run next build
+
+      - name: Setup env
+        working-directory: ./frontend
+        run: cp .env.local.example .env.local
+
+      - name: Start frontend
+        working-directory: ./frontend
+        run: yarn start &
+
+      - name: Install Playwright Browsers
+        working-directory: ./frontend
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        working-directory: ./frontend
+        run: yarn playwright test e2e/local
+
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: playwright-report
+          path: ./frontend/playwright-report/
+          retention-days: 30

.github/workflows/release.yml

@@ -113,10 +113,14 @@ jobs:
           scan_type: k8s
           path: prod-manifests.yaml
 
+  run-playwright:
+    name: Run Playwright
+    uses: ./.github/workflows/playwright.yml
+
   release-dev:
     name: Release to dev
     runs-on: ubuntu-latest
-    needs: [build-frontend-image, build-maintenance-image, scan-manifests]
+    needs: [build-frontend-image, build-maintenance-image, scan-manifests, run-playwright]
     environment:
       name: dev
       url: https://dev.podkrepi.bg

.github/workflows/test.yml

@@ -22,11 +22,15 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
-      - uses: actions/cache@v2
-        id: yarn-cache
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v3
         with:
           path: |
-            node_modules
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            **/.next/cache
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-

.gitignore

@@ -47,3 +47,6 @@ build/
 bld/
 [Bb]in/
 [Oo]bj/
+/test-results/
+/playwright-report/
+/playwright/.cache/

README.md

@@ -10,7 +10,7 @@
   <p align="center"><a target="_blank" rel="noopener noreferrer" href="https://github.com/podkrepi-bg/frontend/actions/workflows/lint.yml"><img src="https://github.com/podkrepi-bg/frontend/actions/workflows/lint.yml/badge.svg" alt="Lint" style="max-width: 100%;"></a>
 <a target="_blank" rel="noopener noreferrer" href="https://github.com/podkrepi-bg/frontend/actions/workflows/release.yml"><img src="https://github.com/podkrepi-bg/frontend/actions/workflows/release.yml/badge.svg" alt="Build" style="max-width: 100%;"></a>
 <a href="https://github.com/podkrepi-bg/frontend/actions/workflows/check-pr.yml"><img src="https://github.com/podkrepi-bg/frontend/actions/workflows/check-pr.yml/badge.svg" alt="Build docker image" style="max-width: 100%;"></a></p>
-  
+
   <p align="center"><a target="_blank" rel="noopener noreferrer" href="https://img.shields.io/github/license/podkrepi-bg/frontend"><img src="https://img.shields.io/github/license/podkrepi-bg/frontend" alt="" data-canonical-src="https://img.shields.io/github/license/podkrepi-bg/frontend" style="max-width: 100%;"></a>
 <a target="_blank" rel="noopener noreferrer" href="https://img.shields.io/github/issues/podkrepi-bg/frontend"><img src="https://img.shields.io/github/issues/podkrepi-bg/frontend" alt="" data-canonical-src="https://img.shields.io/github/issues/podkrepi-bg/frontend" style="max-width: 100%;"></a></p>
 
@@ -25,6 +25,8 @@
   - [Formik](https://formik.org/) / [MobX](https://mobx.js.org/)
   - [ESlint](https://eslint.org/) / [Prettier](https://prettier.io/) / [Husky](https://github.com/typicode/husky) / [Stylelint](https://stylelint.io/) / [Lint Staged](https://github.com/okonet/lint-staged)
   - [Sentry](https://sentry.io/organizations/podkrepibg/)
+- Testing
+  - [Playwright](https://playwright.dev/)
 
 ## Initial setup
 
@@ -59,6 +61,12 @@ In order to use the frontend together with the API and be able to test donations
 
 Follow the instructions at <https://github.com/podkrepi-bg/api/blob/master/TESTING.md>
 
+## Testing
+
+End to end testing is done on every PR with [Playwright](https://playwright.dev/). Github Workflows start the whole stack and run tests in headless mode.
+
+Read more at [End-2-End Testing](https://github.com/podkrepi-bg/frontend/blob/master/e2e/README.md)
+
 ## Contributors ✨
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

e2e/README.md

@@ -0,0 +1,58 @@
+# End-to-end testing
+
+## Playwright
+
+- <https://playwright.dev/>
+
+## Running tests
+
+E2e tests are automated and running on every PR in Github Actions. [Link to the workflow](https://github.com/podkrepi-bg/frontend/blob/29b49f438541fa9254829a494e388202034b274d/.github/workflows/playwright.yml)
+
+```shell
+$ yarn test:e2e --help
+
+Run tests with Playwright Test
+
+Options:
+--browser <browser>          Browser to use for tests, one of "all", "chromium", "firefox" or "webkit" (default: "chromium")
+--headed                     Run tests in headed browsers (default: headless)
+--debug                      Run tests with Playwright Inspector. Shortcut for "PWDEBUG=1" environment variable and "--timeout=0 --maxFailures=1 --headed --workers=1" options
+-c, --config <file>          Configuration file, or a test directory with optional "playwright.config.ts"/"playwright.config.js"/"playwright.config.mjs"
+--forbid-only                Fail if test.only is called (default: false)
+--fully-parallel             Run all tests in parallel (default: false)
+-g, --grep <grep>            Only run tests matching this regular expression (default: ".*")
+-gv, --grep-invert <grep>    Only run tests that do not match this regular expression
+--global-timeout <timeout>   Maximum time this test suite can run in milliseconds (default: unlimited)
+-j, --workers <workers>      Number of concurrent workers, use 1 to run in a single worker (default: number of CPU cores / 2)
+--list                       Collect all the tests and report them, but do not run
+--max-failures <N>           Stop after the first N failures
+--output <dir>               Folder for output artifacts (default: "test-results")
+--quiet                      Suppress stdio
+--repeat-each <N>            Run each test N times (default: 1)
+--reporter <reporter>        Reporter to use, comma-separated, can be "list", "line", "dot", "json", "junit", "null", "github", "html" (default: "list")
+--retries <retries>          Maximum retry count for flaky tests, zero for no retries (default: no retries)
+--shard <shard>              Shard tests and execute only the selected shard, specify in the form "current/all", 1-based, for example "3/5"
+--project <project-name...>  Only run tests from the specified list of projects (default: run all projects)
+--timeout <timeout>          Specify test timeout threshold in milliseconds, zero for unlimited (default: 30000)
+-u, --update-snapshots       Update snapshots with actual results (default: only create missing snapshots)
+-x                           Stop after the first failure
+-h, --help                   display help for command
+```
+
+### Run all test suites
+
+```shell
+yarn test:e2e
+```
+
+### Run only local test suites
+
+```shell
+yarn test:e2e local
+```
+
+### Run local test suites in headed mode with enabled debug
+
+```shell
+yarn test:e2e local --headed --debug -x -g support
+```

e2e/local/homepage.spec.ts

@@ -0,0 +1,80 @@
+import { test, expect } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://localhost:3040/')
+})
+
+test('test homepage', async ({ page }) => {
+  // Click text=Това е бета версията на платформата на Подкрепи.бг преди предстоящия наесен офиц
+  await expect(
+    page.locator(
+      'text=Това е бета версията на платформата на Подкрепи.бг преди предстоящия наесен офиц',
+    ),
+  ).toBeDefined()
+
+  // Click text=Затвори
+  await page.locator('text=Затвори').click()
+
+  // Click text=Текущи кампании
+  await page.locator('text=Текущи кампании').click()
+
+  // Click text=Как работи Подкрепи.бг?
+  await page.locator('text=Как работи Подкрепи.бг?').click()
+
+  // Click text=Кой стои зад Подкрепи.бг?
+  await page.locator('text=Кой стои зад Подкрепи.бг?').click()
+
+  // Click text=Какво ни обединява?
+  await page.locator('text=Какво ни обединява?').click()
+
+  // Click text=Искам да помогна на Подкрепи.бг
+  await page.locator('text=Искам да помогна на Подкрепи.бг').click()
+
+  // Click h2:has-text("Често задавани въпроси")
+  await page.locator('h2:has-text("Често задавани въпроси")').click()
+
+  // Click text=Какво представлява Подкрепи.бг?Подкрепи.бг е платформа за среща между хора, коит >> [data-testid="ExpandMoreIcon"]
+  await page
+    .locator(
+      'text=Какво представлява Подкрепи.бг?Подкрепи.бг е платформа за среща между хора, коит >> [data-testid="ExpandMoreIcon"]',
+    )
+    .click()
+
+  // Click text=Подкрепи.бг е платформа за среща между хора, които искат да съберат средства за
+  await page
+    .locator(
+      'text=Подкрепи.бг е платформа за среща между хора, които искат да съберат средства за ',
+    )
+    .click()
+
+  // Click text=Защо направихте нова платформа, когато вече има и други?
+  await page.locator('text=Защо направихте нова платформа, когато вече има и други?').click()
+
+  // Click text=Накратко - целта ни е да увеличим доверието на обществото в дарителските организ
+  await page
+    .locator(
+      'text=Накратко - целта ни е да увеличим доверието на обществото в дарителските организ',
+    )
+    .click()
+
+  // Click text=Как гарантирате прозрачност и какво значи “софтуер с отворен код”?
+  await page
+    .locator('text=Как гарантирате прозрачност и какво значи “софтуер с отворен код”?')
+    .click()
+
+  // Click text=Софтуер с отворен код е установена практика, при която всеки, без ограничение, м
+  await page
+    .locator(
+      'text=Софтуер с отворен код е установена практика, при която всеки, без ограничение, м',
+    )
+    .click()
+
+  // Click text=Виж всички >> nth=1
+  await page.locator('text=Виж всички').nth(1).click()
+  await expect(page).toHaveURL('http://localhost:3040/faq')
+
+  // Click text=Моделът ни на работа се основава на Принципите, които ни обединяват
+  await page
+    .locator('text=Моделът ни на работа се основава на Принципите, които ни обединяват')
+    .click()
+})