Playwright reports are essential in a project since they provide a quick analysis about pass/fail ratio, scenarios, browsers behaviour, logs, etc. In this technical post, we will go over two approaches to exporting reports: static HTML pages and NGINX server. NOTE: If you need to know how to setup Playwright, please refer my previous post: Playwright Getting Started. Then, let’s create a file named static.yml in your ${PROJECT_HOME}/.github/workflows directory with this content:
name: Deploy static content to Pages
on:
push:
branches: ["main"]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
path: "playwright-report/"
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
That is right; using upload-pages-artifact GitHub actions, we export our Playwright build-in reporter into GitHub pages. If you want to know more about how to deploy to GitHub Pages using custom workflows, go here. Whenever there is a push to the main branch of the repository, we will trigger a new exporting process; how cool is that? Here you can see the result from this repository playwright-workshop
Publishing Reports using NGINX
This approach uses an NGINX server. In order to do that, we will use another GitHub actions project: scp-action. For authentication, we can use an SSH key which you can store inside a repository secret; also we need to specify HOST, PORT, and USERNAME. This is how our .github/workflows/main.yml in deploys section looks like:
- name: Deploy using SSH key
uses: appleboy/scp-action@v0.1.4
with:
host: ${{ secrets.HOST }}
username: ${{ secrets.USERNAME }}
port: ${{ secrets.PORT }}
key: ${{ secrets.SSH_KEY }}
source: "playwright-report/index.html"
target: "/usr/share/nginx/html"
That’s it, whenever there is a push to the main branch of the repository, we will trigger a new deployment process to an external NGINX server. Here you can see the result from this repository playwright-workshop. To browse the code go here, to download the project:
git clone git@github.com:josdem/playwright-workshop.git