Playwright

.github/workflows/master-pull-request.yml

@@ -1,18 +1,19 @@
 name: Tests
-
 on:
   pull_request:
-    branches:
-      - master
-
+    branches: [main, master]
 jobs:
   tests:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
       - name: Install
-        run: |
-          yarn install
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
       - name: Waiting for 200 from the Netlify Preview
         uses: jakepartusch/wait-for-netlify-action@v1.1
         id: waitFor200
@@ -21,20 +22,20 @@ jobs:
           max_timeout: 300
       - name: E2E tests
         run: |
-          CYPRESS_BASE_URL=${{ steps.waitFor200.outputs.url }} npm run cypress:cli
+          BASE_URL=${{ steps.waitFor200.outputs.url }} npx playwright test
 
-      - name: Cypress tests Slack notification
+      - name: Integration tests Slack notification
         uses: 8398a7/action-slack@v3
         with:
           status: custom
           fields: job,repo,ref,author,took
           custom_payload: |
             {
-              username: 'Cypress tests',
+              username: 'Integration tests',
               icon_emoji: ':octocat:',
               attachments: [{
                 color: '${{ job.status }}' === 'success' ? 'good' : '${{ job.status }}' === 'failure' ? 'danger' : 'warning',
-                text: `Cypress tests completed for repo ${process.env.AS_REPO}`,
+                text: `Integration tests completed for repo ${process.env.AS_REPO}`,
               }]
             }
         env:

.github/workflows/master-push.yml

@@ -1,10 +1,7 @@
 name: Tests
-
 on:
   push:
-    branches:
-      - master
-
+    branches: [main, master]
 jobs:
   tests:
     runs-on: ubuntu-latest

.gitignore

@@ -15,3 +15,7 @@ cypress/videos
 .DS_Store
 cypress/fixtures/example.json
 .hugo_build.lock
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.nvmrc

@@ -1 +1 @@
-v20.10.0
+v20.11.0

Dockerfile

@@ -0,0 +1,30 @@
+FROM mcr.microsoft.com/playwright:v1.41.2 as playwright
+
+FROM playwright as playwright-hugo
+RUN wget -O /tmp/hugo.tar.gz https://github.com/gohugoio/hugo/releases/download/v0.122.0/hugo_extended_0.122.0_Linux-64bit.tar.gz
+RUN tar zxvf /tmp/hugo.tar.gz -C /tmp/
+RUN mv /tmp/hugo /usr/bin/
+
+FROM playwright-hugo as install
+WORKDIR /app
+COPY .nvmrc package.json package-lock.json ./
+RUN --mount=type=cache,target=/root/.npm \
+  npm ci --no-update-notifier --no-audit --no-fund
+RUN npx playwright install
+
+FROM install as build
+COPY playwright.config.ts config.toml config-dev.toml ./
+COPY assets ./assets
+COPY build ./build
+COPY content ./content
+COPY layouts ./layouts
+COPY resources ./resources
+COPY static ./static
+COPY tests ./tests
+RUN npm run build
+
+# UI tests are sometimes flaky, so always run them
+FROM build as test
+ARG CACHEBUST=1
+RUN echo "$CACHEBUST"
+RUN npm run test

README.md

@@ -4,23 +4,22 @@
 
 This is my personal blog based on [Hugo][1] available at <https://www.henriksommerfeld.se>
 
-## Pre-requisites:
+## Local dev
+
+[package.json](./package.json) contains a bunch of scripts that act as documentation.
+
+### Using Docker and Docker Compose
+1. To run the site: `docker-compose up`
+2. To run the tests: `docker build`
+
+### Using NPM
+
+#### Pre-requisites:
 1. Install Node https://nodejs.org/en/download/ (working version specified in [.nvmrc](./.nvmrc))
 2. Install Hugo https://github.com/gohugoio/hugo/releases See expected version in [netlify.toml](./netlify.toml)). Extended version required.
 
-## Running the site
+#### Running the site
 1. `npm run install:prod`
 2. `npm start`
 
-## Build (compile) the site to folder _public_
-1. `npm run build`
-
-## Tests (headless)
-1. `npm install`
-2. `npm test`
-
-## Tests (Cypress GUI)
-1. `npm install`
-2. `npm run test:open`
-
 [1]: http://gohugo.io/