Playwright Testing
Cache both playwright browsers and pnpm installs on GitHub Actions to speed up build times
Copy and paste ready!
.github/workflows/playwright.yml
1name: Playwright Tests
2on:
3 push:
4 branches: [main, master]
5 pull_request:
6 branches: [main, master]
7jobs:
8 test:
9 timeout-minutes: 60
10 runs-on: ubuntu-latest
11 steps:
12 - uses: actions/checkout@v3
13 - uses: actions/setup-node@v3
14 with:
15 node-version: 18
16 - uses: pnpm/action-setup@v2
17 name: Install pnpm
18 with:
19 version: 8
20 run_install: false
21
22 - name: Get pnpm store directory
23 shell: bash
24 run: |
25 echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
26
27 - uses: actions/cache@v3
28 name: Setup pnpm cache
29 with:
30 path: ${{ env.STORE_PATH }}
31 key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
32 restore-keys: |
33 ${{ runner.os }}-pnpm-store-
34
35 - name: Install dependencies
36 run: pnpm install
37 - name: Get installed Playwright version
38 id: playwright-version
39 run: echo PLAYWRIGHT_VERSION=$(bash playwright-version.sh) >> $GITHUB_ENV
40 - name: Cache playwright binaries
41 uses: actions/cache@v3
42 id: playwright-cache
43 with:
44 path: |
45 ~/.cache/ms-playwright
46 key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
47 - run: pnpm exec playwright install --with-deps
48 if: steps.playwright-cache.outputs.cache-hit != 'true'
49 - run: pnpm exec playwright install-deps
50 - name: Build project
51 run: pnpm build
52 - name: Run Playwright tests
53 run: pnpm exec playwright test
54 - uses: actions/upload-artifact@v3
55 if: always()
56 with:
57 name: playwright-report
58 path: playwright-report/
59 retention-days: 30
.github/workflows/playwright.yml
1name: Playwright Tests
2on:
3 push:
4 branches: [main, master]
5 pull_request:
6 branches: [main, master]
7jobs:
8 test:
9 timeout-minutes: 60
10 runs-on: ubuntu-latest
11 steps:
12 - uses: actions/checkout@v3
13 - uses: actions/setup-node@v3
14 with:
15 node-version: 18
16 - uses: pnpm/action-setup@v2
17 name: Install pnpm
18 with:
19 version: 8
20 run_install: false
21
22 - name: Get pnpm store directory
23 shell: bash
24 run: |
25 echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
26
27 - uses: actions/cache@v3
28 name: Setup pnpm cache
29 with:
30 path: ${{ env.STORE_PATH }}
31 key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
32 restore-keys: |
33 ${{ runner.os }}-pnpm-store-
34
35 - name: Install dependencies
36 run: pnpm install
37 - name: Get installed Playwright version
38 id: playwright-version
39 run: echo PLAYWRIGHT_VERSION=$(bash playwright-version.sh) >> $GITHUB_ENV
40 - name: Cache playwright binaries
41 uses: actions/cache@v3
42 id: playwright-cache
43 with:
44 path: |
45 ~/.cache/ms-playwright
46 key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
47 - run: pnpm exec playwright install --with-deps
48 if: steps.playwright-cache.outputs.cache-hit != 'true'
49 - run: pnpm exec playwright install-deps
50 - name: Build project
51 run: pnpm build
52 - name: Run Playwright tests
53 run: pnpm exec playwright test
54 - uses: actions/upload-artifact@v3
55 if: always()
56 with:
57 name: playwright-report
58 path: playwright-report/
59 retention-days: 30
Tests
The power of this setup is fast testing of your application. In my case, I test that every single page loads.
tests/page-load.spec.js
1import { test, expect } from "@playwright/test";
2
3test("title page", async ({ page }) => {
4 await page.goto("/snippets/pnpm-playwright");
5
6 // Expect a title "to contain" a substring.
7 await expect(page).toHaveTitle(/iancleary.me/);
8});
tests/page-load.spec.js
1import { test, expect } from "@playwright/test";
2
3test("title page", async ({ page }) => {
4 await page.goto("/snippets/pnpm-playwright");
5
6 // Expect a title "to contain" a substring.
7 await expect(page).toHaveTitle(/iancleary.me/);
8});
References
GitHub Actions
pnpm run exec
Running executables inside your downloaded dependencies
For example npx jest.
The pnpm equivalent is pnpm exec jest.