Skip to content
Latchkey
Start Free

End-to-end tests (playwright) workflow (Choices-js/Choices)

The End-to-end tests (playwright) workflow from Choices-js/Choices, explained and optimized by Latchkey.

A

CI health: A - excellent

Run this on Latchkey for self-healing, caching, and up to 58% lower cost.

Grade your own workflow free or run it on Latchkey →
Source: Choices-js/Choices.github/workflows/browsers.ymlLicense MITView source

What it does

This is the End-to-end tests (playwright) workflow from the Choices-js/Choices repository, a real project running GitHub Actions. It is shown here with attribution under its MIT license.

Below, Latchkey shows a faster, safer version produced by its optimization engine.

The workflow

workflow (.yml)
name: End-to-end tests (playwright)
on:
  push:
    branches: [ main ]
    paths:
      - 'src/**'
      - 'test-e2e/**'
      - 'package-lock.json'
      - '.browserslistrc'
      - 'babel.config.json'
      - 'public/index.html'
      - 'public/**/index.html'
      - '.github/workflows/browsers.yml'
      - 'playwright.config.ts'
  pull_request:
    paths:
      - 'src/**'
      - 'test-e2e/**'
      - 'package-lock.json'
      - '.browserslistrc'
      - 'babel.config.json'
      - 'public/index.html'
      - 'public/**/index.html'
      - '.github/workflows/browsers.yml'
      - 'playwright.config.ts'
jobs:
  test-e2e-playwright:
    timeout-minutes: 60
    strategy:
      fail-fast: false
      matrix:
        os: [windows-latest, macos-latest, ubuntu-latest]
        browser: [chromium, firefox, webkit]
        exclude:
          - os: windows-latest
            browser: webkit
          - os: windows-latest
            browser: firefox
          - os: macos-latest
            browser: firefox
    runs-on: ${{ matrix.os }}
    steps:
    - uses: actions/checkout@v4
      with:
        fetch-depth: 1

    - uses: actions/setup-node@v4
      with:
        node-version: 24
        cache: 'npm'

    - name: Install dependencies
      run: npm ci --no-audit
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - run: npx playwright install-deps

    - name: Run Playwright tests
      run: npx playwright test --project=${{ matrix.browser }}

    - uses: actions/upload-artifact@v4
      name: Upload screenshots to GitHub Actions Artifacts
      if: failure()
      with:
        name: screenshot-${{ matrix.os }}-${{ matrix.browser }}
        path: test-results/**/*.png

    - uses: actions/upload-artifact@v4
      name: Upload blob report to GitHub Actions Artifacts
      if: ${{ !cancelled() }}
      with:
        name: playwright-report-${{ matrix.os }}-${{ matrix.browser }}
        path: playwright-report/
        retention-days: 30

The same workflow, on Latchkey

Removes redundant runs and caps runaway jobs. Added and changed lines are highlighted.

name: End-to-end tests (playwright)
on:
  push:
    branches: [ main ]
    paths:
      - 'src/**'
      - 'test-e2e/**'
      - 'package-lock.json'
      - '.browserslistrc'
      - 'babel.config.json'
      - 'public/index.html'
      - 'public/**/index.html'
      - '.github/workflows/browsers.yml'
      - 'playwright.config.ts'
  pull_request:
    paths:
      - 'src/**'
      - 'test-e2e/**'
      - 'package-lock.json'
      - '.browserslistrc'
      - 'babel.config.json'
      - 'public/index.html'
      - 'public/**/index.html'
      - '.github/workflows/browsers.yml'
      - 'playwright.config.ts'
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
 
jobs:
  test-e2e-playwright:
    timeout-minutes: 60
    strategy:
      fail-fast: false
      matrix:
        os: [windows-latest, macos-latest, ubuntu-latest]
        browser: [chromium, firefox, webkit]
        exclude:
          - os: windows-latest
            browser: webkit
          - os: windows-latest
            browser: firefox
          - os: macos-latest
            browser: firefox
    runs-on: ${{ matrix.os }}
    steps:
    - uses: actions/checkout@v4
      with:
        fetch-depth: 1
 
    - uses: actions/setup-node@v4
      with:
        node-version: 24
        cache: 'npm'
 
    - name: Install dependencies
      run: npm ci --no-audit
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - run: npx playwright install-deps
 
    - name: Run Playwright tests
      run: npx playwright test --project=${{ matrix.browser }}
 
    - uses: actions/upload-artifact@v4
      name: Upload screenshots to GitHub Actions Artifacts
      if: failure()
      with:
        name: screenshot-${{ matrix.os }}-${{ matrix.browser }}
        path: test-results/**/*.png
 
    - uses: actions/upload-artifact@v4
      name: Upload blob report to GitHub Actions Artifacts
      if: ${{ !cancelled() }}
      with:
        name: playwright-report-${{ matrix.os }}-${{ matrix.browser }}
        path: playwright-report/
        retention-days: 30

What changed

What Latchkey heals here

This workflow has steps that commonly fail on transient issues (network, registries, flaky browsers). On Latchkey managed runners they are detected, retried, and self-healed instead of failing your build:

This workflow runs 1 job (9 with the matrix expanded) per trigger. On Latchkey the same minutes cost up to 58% less than GitHub-hosted, with zero queue time.

Actions used in this workflow

actions/checkout actions/setup-node actions/upload-artifact