Skip to content

feat: add Playwright visual regression example workflow for Frontend Developer persona#28550

Merged
pelikhan merged 5 commits intomainfrom
copilot/add-playwright-visual-regression-example
Apr 26, 2026
Merged

feat: add Playwright visual regression example workflow for Frontend Developer persona#28550
pelikhan merged 5 commits intomainfrom
copilot/add-playwright-visual-regression-example

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 26, 2026

Frontend Developer scenarios (especially visual regression with Playwright) were underserved — Playwright support existed but had no concrete example workflow to guide users.

Changes

  • New workflow.github/workflows/visual-regression-checker.md: pull_request example scoped to Astro Starlight infrastructure files with:

    • Trigger restricted to docs/package.json, docs/package-lock.json, docs/src/**/*.css, docs/src/**/*.tsx, docs/src/**/*.astro, and docs/astro.config.mjs
    • Pre-run steps: that checkout the repo, set up Node.js 24, run npm ci, npm run build, start the Astro dev server (npm run dev &), and poll http://localhost:4321/gh-aw/ for up to 30 seconds until ready — so the site is fully live before the agent starts
    • Playwright pinned to v1.52.0
    • Network scoped to defaults + playwright + local + node
    • Scoped bash tool
    • Multi-viewport screenshots (mobile 375×812 / tablet 768×1024 / desktop 1440×900)
    • Accessibility snapshot per page
    • add-comment safe-output for the report; falls back to noop on clean runs
  • Agent instructions — Expanded the playwright: entry in .github/aw/github-agentic-workflows.md to explain version pinning and network scope with a direct link to the new example.

on:
  pull_request:
    types: [opened, synchronize]
    paths:
      - 'docs/package.json'
      - 'docs/src/**/*.css'
      - 'docs/src/**/*.astro'
      - 'docs/astro.config.mjs'
steps:
  - name: Checkout repository
    uses: actions/checkout@v6
    with:
      persist-credentials: false
  - name: Install dependencies
    working-directory: ./docs
    run: npm ci
  - name: Build documentation
    working-directory: ./docs
    run: npm run build
  - name: Start Astro dev server
    working-directory: ./docs
    run: npm run dev &
  - name: Wait for dev server
    run: |
      for i in $(seq 1 30); do
        if curl -sf http://localhost:4321/gh-aw/ > /dev/null 2>&1; then
          echo "Dev server is ready"; exit 0
        fi
        sleep 1
      done
      exit 1
tools:
  playwright:
    version: "v1.52.0"
  bash:
    - "npm *"
    - "curl http://localhost:*"
network:
  allowed:
    - defaults
    - playwright
    - local
    - node
safe-outputs:
  add-comment:
    max: 1

Copilot AI and others added 2 commits April 26, 2026 05:25
…cs reference

Agent-Logs-Url: https://github.com/github/gh-aw/sessions/276d4cb6-d643-4321-a705-e0dadc2f0527

Co-authored-by: gh-aw-bot <259018956+gh-aw-bot@users.noreply.github.com>
…uidance

Agent-Logs-Url: https://github.com/github/gh-aw/sessions/276d4cb6-d643-4321-a705-e0dadc2f0527

Co-authored-by: gh-aw-bot <259018956+gh-aw-bot@users.noreply.github.com>
Copilot AI changed the title [WIP] Add minimal Playwright visual regression example for Frontend Developer feat: add Playwright visual regression example workflow for Frontend Developer persona Apr 26, 2026
Copilot AI requested a review from gh-aw-bot April 26, 2026 05:31
@github-actions

This comment has been minimized.

@github-actions
Copy link
Copy Markdown
Contributor

Hey @Copilot 👋 — great addition! The Playwright visual regression example for the Frontend Developer persona fills a real gap — having a concrete, pinned, network-scoped workflow to point users to is exactly what was missing.

A few small things worth noting:

  • No test coverage — the PR adds .md workflow files and a .lock.yml, so there's no Go code requiring unit tests here. However, if the project has any snapshot/integration tests for compiled workflow output (e.g. validating the .lock.yml round-trips correctly), it would be worth confirming those pass or adding a case.
  • Firewall warning in body — the PR description includes a firewall-block warning from the agent run. This is noise for reviewers; consider cleaning up the body before merge.

Everything else looks solid: the change is focused, well-described, on-topic, and authored by a core-team agent following the correct process.

Clean up the PR description for #28550: remove the firewall-block warning paragraph from the body, keeping only the feature summary, persona description, and verification steps.

Generated by Contribution Check · ● 1.5M ·

@@ -0,0 +1,49 @@
---
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot

  • update trigger restrict to changes to the Astro starlight infrastructure files (package json, css, tsx)
  • move docs build and initialization into steps to save turns

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in 1419c14:

  • Trigger: Added paths: filter restricting runs to changes in docs/package.json, docs/package-lock.json, docs/src/**/*.css, docs/src/**/*.tsx, docs/src/**/*.astro, and docs/astro.config.mjs.
  • Steps: Added pre-run steps: block — checkout (with persist-credentials: false), Setup Node.js, npm ci, and npm run build — so the docs are fully built before the agent starts. The agent prompt now just needs to npm run preview & and start taking screenshots.

Copy link
Copy Markdown
Contributor Author

Copilot AI commented Apr 26, 2026

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • https://api.github.com/repos/actions/checkout/git/ref/tags/v6
    • Triggering command: /usr/bin/gh gh api /repos/actions/checkout/git/ref/tags/v6 --jq [.object.sha, .object.type] | @tsv (http block)
  • https://api.github.com/repos/actions/setup-node/git/ref/tags/v6
    • Triggering command: /usr/bin/gh gh api /repos/actions/setup-node/git/ref/tags/v6 --jq [.object.sha, .object.type] | @tsv (http block)

If you need me to access, download, or install something from one of these locations, you can either:

Copilot AI requested a review from pelikhan April 26, 2026 10:10
@pelikhan
Copy link
Copy Markdown
Collaborator

@copilot add steps to launch Astro dev server and wait till it is ready

Copy link
Copy Markdown
Contributor Author

Copilot AI commented Apr 26, 2026

@copilot add steps to launch Astro dev server and wait till it is ready

Done in 740b58a. Added two pre-run steps in the frontmatter steps: block:

  • Start Astro dev server — runs npm run dev & in ./docs
  • Wait for dev server — polls http://localhost:4321/gh-aw/ with curl up to 30 times (1s apart), failing the job if the server isn't ready in time

The agent prompt now simply says the server is already running, removing the need for any startup turns.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • https://api.github.com/repos/actions/checkout/git/ref/tags/v6
    • Triggering command: /usr/bin/gh gh api /repos/actions/checkout/git/ref/tags/v6 --jq [.object.sha, .object.type] | @tsv (http block)
  • https://api.github.com/repos/actions/setup-node/git/ref/tags/v6
    • Triggering command: /usr/bin/gh gh api /repos/actions/setup-node/git/ref/tags/v6 --jq [.object.sha, .object.type] | @tsv (http block)

If you need me to access, download, or install something from one of these locations, you can either:

@pelikhan pelikhan marked this pull request as ready for review April 26, 2026 11:42
Copilot AI review requested due to automatic review settings April 26, 2026 11:42
@pelikhan pelikhan merged commit 8513739 into main Apr 26, 2026
18 of 19 checks passed
@pelikhan pelikhan deleted the copilot/add-playwright-visual-regression-example branch April 26, 2026 11:42
@github-actions github-actions Bot mentioned this pull request Apr 26, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a concrete Playwright-based visual regression workflow example for the Frontend Developer persona and links it from the agentic workflow tool documentation.

Changes:

  • Added a new PR-scoped visual regression checker workflow example using Playwright, including pre-run setup/build/dev-server readiness steps.
  • Updated agentic workflow documentation to expand Playwright guidance and link to the new example.
  • Updated workflow status listing and refreshed the actions/containers lock data to support the new workflow artifacts.
Show a summary per file
File Description
docs/src/content/docs/agent-factory-status.mdx Adds the new workflow to the published workflow status table.
.github/workflows/visual-regression-checker.md Introduces the new Playwright visual regression example workflow (frontmatter + agent instructions).
.github/workflows/visual-regression-checker.lock.yml Compiled lock workflow generated from the new .md workflow.
.github/aw/github-agentic-workflows.md Expands Playwright tool documentation and links to the new example.
.github/aw/actions-lock.json Updates the action/container lock entries required by the new compiled workflow.

Copilot's findings

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comments suppressed due to low confidence (4)

.github/workflows/visual-regression-checker.md:38

  • actions/checkout is referenced as actions/checkout@v6 here, but other workflows in this repo pin to a specific patch version (e.g. actions/checkout@v6.0.2 in .github/workflows/go-pattern-detector.md:20). Pinning the patch version in this example keeps the workflow deterministic and consistent with existing conventions.
  - name: Checkout repository
    uses: actions/checkout@v6
    with:

.github/workflows/visual-regression-checker.md:44

  • actions/setup-node is referenced as actions/setup-node@v6 here, but this repo typically pins the patch version (for example actions/setup-node@v6.4.0 in .github/workflows/daily-multi-device-docs-tester.md:24). Consider pinning the patch version in this example as well to avoid unexpected behavior changes when the major tag moves.
  - name: Setup Node.js
    uses: actions/setup-node@v6
    with:
      node-version: '24'

.github/workflows/visual-regression-checker.md:24

  • The bash allowlist entry "curl http://localhost:*" is unusually strict compared to other Playwright/docs workflows here (which generally use "curl*", e.g. .github/workflows/daily-multi-device-docs-tester.md:35). With the current pattern, common invocations like curl -sSf http://localhost:... may not be permitted by the tool allowlist. Consider broadening this to a wildcard form (or explicitly allowing the flag variants you expect) to avoid the agent being blocked during troubleshooting/reporting.
  bash:
    - "npm *"
    - "npx *"
    - "node *"
    - "curl http://localhost:*"

.github/workflows/visual-regression-checker.md:33

  • This workflow runs on pull_request for both opened and synchronize, but safe-outputs.add-comment doesn’t enable hide-older-comments. As written, each push to the PR can add another comment, which can get noisy. Consider setting hide-older-comments: true (common in this repo, e.g. .github/workflows/ci-doctor.md:25-27) so only the latest report remains visible.
safe-outputs:
  add-comment:
    max: 1
  • Files reviewed: 5/5 changed files
  • Comments generated: 2

engine: copilot
tools:
playwright:
version: "v1.52.0"
Copy link

Copilot AI Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Playwright tool is pinned to v1.52.0, which is noticeably behind versions used elsewhere in this repo (e.g. v1.56.1 in .github/workflows/daily-multi-device-docs-tester.md:28-30) and behind the docs site's @playwright/test devDependency (^1.59.1 in docs/package.json:36). For an example intended to be copied, aligning the pinned MCP Playwright version with the repo’s current Playwright version (or explaining the deliberate downgrade) will reduce confusion and avoid API/behavior mismatches.

This issue also appears in the following locations of the same file:

  • line 20
  • line 31
  • line 36
  • line 41
Suggested change
version: "v1.52.0"
version: "v1.56.1"

Copilot uses AI. Check for mistakes.
bash: ["*"]
```
- `playwright:` - Browser automation tools
- `playwright:` - Browser automation tools for visual regression, accessibility testing, and end-to-end testing. Pin a specific version with `version:` and restrict network access to `local` + `playwright` for security. See [`visual-regression-checker.md`](../../.github/workflows/visual-regression-checker.md) for a minimal pull-request example.
Copy link

Copilot AI Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Playwright guidance here says to “restrict network access to local + playwright for security”, but the linked example workflow (visual-regression-checker.md) currently allows defaults and node as well. Either adjust this guidance to reflect that additional network groups may be required/intentional, or tighten the example’s network.allowed to match the recommendation so users don’t get conflicting instructions.

Suggested change
- `playwright:` - Browser automation tools for visual regression, accessibility testing, and end-to-end testing. Pin a specific version with `version:` and restrict network access to `local` + `playwright` for security. See [`visual-regression-checker.md`](../../.github/workflows/visual-regression-checker.md) for a minimal pull-request example.
- `playwright:` - Browser automation tools for visual regression, accessibility testing, and end-to-end testing. Pin a specific version with `version:` and restrict network access to the minimum required for your workflow—typically `local` + `playwright` for security, but additional groups such as `defaults` or `node` may be needed when the workflow intentionally depends on them. See [`visual-regression-checker.md`](../../.github/workflows/visual-regression-checker.md) for a minimal pull-request example.

Copilot uses AI. Check for mistakes.
github-actions Bot added a commit that referenced this pull request Apr 27, 2026
- Add deployment_status trigger section to triggers.md (from #28549)
- Add deployment state filter (state:) and NL shorthands
- Add deployment incident monitor example
- Update Playwright visual regression example with dev server setup pattern (from #28550)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[plan] Add minimal Playwright visual regression example workflow for Frontend Developer persona

6 participants