-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## Ticket navapbc/template-application-nextjs#358 ## Changes - add playwright e2e tests against preview env
- Loading branch information
Showing
16 changed files
with
429 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| name: E2E Tests | ||
|
|
||
| on: | ||
| workflow_call: | ||
| inputs: | ||
| service_endpoint: | ||
| required: true | ||
| type: string | ||
| app_name: | ||
| required: false | ||
| type: string | ||
|
|
||
| jobs: | ||
| e2e: | ||
| name: " " # GitHub UI is noisy when calling reusable workflows, so use whitespace for name to reduce noise | ||
| runs-on: ubuntu-latest | ||
|
|
||
| steps: | ||
| - name: Checkout code | ||
| uses: actions/checkout@v4 | ||
|
|
||
| - name: Set up Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '20' | ||
|
|
||
| - name: Install Playwright browsers | ||
| run: make e2e-setup-ci | ||
|
|
||
| - name: Run e2e tests | ||
| run: make e2e-test APP_NAME=${{ inputs.app_name }} BASE_URL=${{ inputs.service_endpoint }} | ||
|
|
||
| - name: Upload Playwright report | ||
| uses: actions/upload-artifact@v4 | ||
| with: | ||
| name: playwright-report | ||
| path: ./e2e/playwright-report |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| # End-to-End (E2E) Tests | ||
|
|
||
| ## Overview | ||
|
|
||
| This repository uses [Playwright](https://playwright.dev/) to perform end-to-end (E2E) tests. The tests can be run locally, but also run on [Pull Request preview environments](../infra/pull-request-environments.md). This ensures that any new code changes are validated through E2E tests before being merged. | ||
|
|
||
| ## Folder Structure | ||
| In order to support e2e for multiple apps, the folder structure will include a base playwright config (`./e2e/playwright.config.js`), and app-specific derived playwright config that override the base config. See the example folder structure below: | ||
| ``` | ||
| - e2e | ||
| - playwright.config.js | ||
| - app/ | ||
| - playwright.config.js | ||
| - tests/ | ||
| - index.spec.js | ||
| - app2/ | ||
| - playwright.config.js | ||
| - tests/ | ||
| - index.spec.js | ||
| ``` | ||
|
|
||
| Some highlights: | ||
| - By default, the base config is defined to run on a minimal browser-set (desktop and mobile chrome). Browsers can be added in the app-specific playwright config. | ||
| - Snapshots will be output locally or in the artifacts of the CI job | ||
| - HTML reports are output to the `playwright-report` folder | ||
| - Parallelism limited on CI to ensure stable execution | ||
| - Accessibility testing can be performed using the `@axe-core/playwright` package (https://playwright.dev/docs/accessibility-testing) | ||
|
|
||
|
|
||
| ## Running Locally | ||
|
|
||
| ### Running Locally From the Root Directory | ||
|
|
||
| Make targets are setup to easily pass in a particular app name and URL to run tests against | ||
|
|
||
| ```bash | ||
| make e2e-setup # install playwright deps | ||
| make e2e-test APP_NAME=app BASE_URL=http://localhost:3000 # run tests on a particular app | ||
| ``` | ||
|
|
||
| ### Running Locally From the `./e2e` Directory | ||
|
|
||
| If you prefer to run package.json run scripts, you can do so from the e2e folder: | ||
|
|
||
| ``` | ||
| cd e2e | ||
| npm install | ||
| APP_NAME=app npm run e2e-test | ||
| ``` | ||
|
|
||
| ### PR Environments | ||
|
|
||
| The E2E tests are triggered in PR preview environments on each PR update. For more information on how PR environments work, please refer to [PR Environments Documentation](../infra/pull-request-environments.md). | ||
|
|
||
| ### Workflows | ||
|
|
||
| The following workflows trigger E2E tests: | ||
| - [PR Environment Update](../../.github/workflows/pr-environment-checks.yml) | ||
| - [E2E Tests Workflow](../../.github/workflows/e2e-tests.yml) | ||
|
|
||
| The [E2E Tests Workflow](../../.github/workflows/e2e-tests.yml) takes a `service_endpoint` URL and an `app_name` to run the tests against specific configurations for your app. | ||
|
|
||
| ## Configuration | ||
|
|
||
| The E2E tests are configured using the following files: | ||
| - [Base Configuration](../../e2e/playwright.config.js) | ||
| - [App-specific Configuration](../../e2e/app/playwright.config.js) | ||
|
|
||
| The app-specific configuration files extend the common base configuration. | ||
|
|
||
| By default when running `make e2e-test APP_NAME=app BASE_URL=http://localhost:3000 ` - you don't necessarily need to pass an `BASE_URL` since the default is defined in the app-specific playwright config (`./e2e/app/playwright.config.js`). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| node_modules/ | ||
| /test-results/ | ||
| /playwright-report/ | ||
| /blob-report/ | ||
| /playwright/.cache/ | ||
| *.png* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import baseConfig from '../playwright.config'; | ||
| import { deepMerge } from '../util'; | ||
| import { defineConfig } from '@playwright/test'; | ||
|
|
||
| export default defineConfig(deepMerge( | ||
| baseConfig, | ||
| { | ||
| use: { | ||
| baseUrl: baseConfig.use.baseUrl || "localhost:3000" | ||
| }, | ||
| } | ||
| )); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| const { test, expect } = require('@playwright/test'); | ||
|
|
||
| import AxeBuilder from '@axe-core/playwright'; | ||
|
|
||
| test.describe('Generic Webpage Tests', () => { | ||
| test('should load the webpage successfully', async ({ page }) => { | ||
| const response = await page.goto('/'); | ||
| const title = await page.title(); | ||
| await expect(response.status()).toBe(200); | ||
| }); | ||
|
|
||
| test('should take a screenshot of the webpage', async ({ page }) => { | ||
| await page.goto('/'); | ||
| await page.screenshot({ path: 'example-screenshot.png', fullPage: true }); | ||
| }); | ||
|
|
||
| // https://playwright.dev/docs/accessibility-testing | ||
| test('should not have any automatically detectable accessibility issues', async ({ page }) => { | ||
| await page.goto('/'); | ||
| const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); | ||
| expect(accessibilityScanResults.violations).toEqual([]); | ||
| }); | ||
|
|
||
| // Example test of finding a an html element on the index/home page | ||
| // test('should check for an element to be visible', async ({ page }) => { | ||
| // await page.goto('/'); | ||
| // const element = page.locator('h1'); | ||
| // await expect(element).toBeVisible(); | ||
| // }); | ||
|
|
||
| }); |
Oops, something went wrong.