Playwright Reports Deployment

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

Return to the main article