How to use Playwright with GitHub Actions and GitHub Pages

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • playwright-gh-actions-gh-pages

    Playwright + GitHub Actions + Github Pages

  • ℹī¸ INFO The complete source code can be found in this repo: ysfaran/playwright-gh-actions-gh-pages

  • checkout

    Action for checking out a repo

  • publish_report: name: Publish HTML Report # using always() is not ideal here, because it would also run if the workflow was cancelled if: "success() || needs.test.result == 'failure'" needs: [test] runs-on: ubuntu-latest continue-on-error: true env: # Unique URL path for each workflow run attempt HTML_REPORT_URL_PATH: reports/${{ github.ref_name }}/${{ github.run_id }}/${{ github.run_attempt }} steps: - name: Checkout GitHub Pages Branch uses: actions/checkout@v2 with: ref: gh-pages - name: Set Git User # see: https://github.com/actions/checkout/issues/13#issuecomment-724415212 run: | git config --global user.name "github-actions[bot]" git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com" - name: Download zipped HTML report uses: actions/download-artifact@v2 with: name: playwright-report path: ${{ env.HTML_REPORT_URL_PATH }} - name: Push HTML Report timeout-minutes: 3 # commit report, then try push-rebase-loop until it's able to merge the HTML report to the gh-pages branch # this is necessary when this job is running at least twice at the same time (e.g. through two pushes at the same time) run: | git add . git commit -m "workflow: add HTML report for run-id ${{ github.run_id }} (attempt: ${{ github.run_attempt }})" while true; do git pull --rebase if [ $? -ne 0 ]; then echo "Failed to rebase. Please review manually." exit 1 fi git push if [ $? -eq 0 ]; then echo "Successfully pushed HTML report to repo." exit 0 fi done - name: Output Report URL as Worfklow Annotation run: | FULL_HTML_REPORT_URL=https://ysfaran.github.io/playwright-gh-actions-gh-pages/$HTML_REPORT_URL_PATH echo "::notice title=📋 Published Playwright Test Report::$FULL_HTML_REPORT_URL"

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • Playwright

    Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

  • const config: PlaywrightTestConfig = { testDir: "./tests", // Run all tests within a file in parallel to speed up test execution fullyParallel: true, // Helpful for uncontrollable flaky tests, which are tests, occasionally failing for various reasons retries: 3, // Generates a HTML report to ./playwright-report/ reporter: "html", use: { // Tests will be run against this page baseURL: "https://playwright.dev/", // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer trace: "on-first-retry", }, // Cross-browser testing setup projects: [ { name: "chromium", use: { ...devices["Desktop Chrome"], }, }, { name: "firefox", use: { ...devices["Desktop Firefox"], }, }, { name: "webkit", use: { ...devices["Desktop Safari"], }, }, ], };

  • pages-gem

    A simple Ruby Gem to bootstrap dependencies for setting up and maintaining a local Jekyll environment in sync with GitHub Pages

  • Playwright is a modern cross-browser testing framework developed by microsoft itself. GitHub Actions is the out-of-the-box solution for anything related to CI/CD pipelines on GitHub. Last but not least GitHub Pages is a GitHub feature which allows to deploy static websites.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts