Playwright Showcase

Live Demo Form

A small interactive form that is automatically tested by Playwright on each commit.

Name: Submit

Test Scripts

Selected Playwright snippets:

test('get started link', async ({ page }) => {
  await page.goto('./PlaywrightTestSite');
  await page.fill('#inputName', 'Diver Dave');
  await page.click('button[data-test="submitName"]');
  await expect(page.locator('#result')).toHaveText('Hello, Diver Dave!');
});

CI/CD Workflow

GitHub Actions auto-runs Playwright tests and deploys if passing:

name: Test and Deploy Portfolio

on:
  push:
    branches: [ "main" ] # Only trigger when source pushes

jobs:
  playwrighttests:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      # Setup Node environment
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*

      # Install dependencies
      - name: Install dependencies
        run: npm ci

      # Install Playwright browsers
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps

      # Run Playwright tests
      - name: Run Playwright BVTs
        run: npx playwright test --reporter=html

      # Upload Playwright report as artifact
      - uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

  deploy:
    needs: playwrighttests # Only deploy if tests pass
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      # Inject timestamp into the built HTML
      - name: Insert build timestamp
        run: |
          TIMESTAMP=$(date -u +"%Y-%m-%d %H:%M:%S UTC")
          sed -i "s|<!--BUILDSTAMP-->|<p class='build-stamp'>Last Tested: ${TIMESTAMP}</p>|" _site/index.html
      
      # Deploy only the site folder
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./_site # only my site, not the tests, nothing else
          publish_branch: gh-pages