[WIP] Add GitHub Actions PR pipeline for Playwright E2E tests

[Copilot]

• Identify root causes: stale bun lockfile + script-path not supported by actions/github-script@v7 + comment not being created on new commits
• Add @playwright/test, playwright, playwright-core to bun.lock (workspace devDependencies + package entries with correct integrity hashes)
• Fix Comment on PR step: use module.exports in comment-pr.js and call it via inline script: require(...) (correct pattern for external scripts with actions/github-script)
• Fix comment behavior: always createComment (no longer updates the existing one), so each commit push gets its own status entry

Original prompt

Create a GitHub Actions PR pipeline for repo podcodar/webapp that runs Playwright E2E tests and comments on the PR with a link to view the run results and a trace/video of the recorded navigation.

Requirements:

1. CI Workflow

• Trigger on pull_request (at least for opened/synchronize/reopened) and optionally workflow_dispatch.
• Install dependencies and browsers.
• Build and run the app as needed (detect existing setup; use appropriate package manager found in repo).
• Run Playwright tests headlessly.
• Ensure the workflow uploads Playwright artifacts:
  • HTML report
  • trace(s) (navigation recording)
  • video (if enabled)
  • screenshots on failure
• Publish artifacts using actions/upload-artifact.
• Add a PR comment with a link to the workflow run and/or uploaded artifacts / Playwright report. Use a strategy that works from PR workflows (e.g., github-script) and avoid leaking secrets for forks.

2. Playwright configuration

• Add/adjust Playwright config to:
  • record trace on failure (or on first retry) and optionally always for these navigation flows
  • record video on failure (or on first retry)
  • set baseURL from env (e.g., PLAYWRIGHT_BASE_URL)
  • configure retries in CI.

3. Tests / workflows to implement
   Implement Playwright tests to cover these user navigation flows:

Site (main webapp):

• Homepage: scroll down
• Navigate to Contributing page
• Navigate to Join Us page
• Navigate to Contact page

Blog:

• Navigate to blog homepage
• Open the first post
• Scroll down the post

Notes:

• Use robust locators and avoid brittle selectors.
• Prefer role-based locators (getByRole) and accessible names.
• If routes differ, infer the actual URLs/paths from the repo.

4. PR Comment content

• Comment should include:
  • status summary (pass/fail)
  • link to the workflow run
  • link to the Playwright HTML report artifact (or clear instructions where to download)
  • mention that traces/videos are attached as artifacts.

Deliverables:

• Add .github/workflows/playwright-e2e.yml (or similar).
• Add Playwright tests under tests/ or e2e/ as appropriate.
• Add/update playwright.config.* and any necessary scripts in package.json.
• Ensure pipeline is green on PRs and artifacts are available.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: Can you create a playwright PR pipeline taht will

• run e2e tests
• record app novigation
• adds a comment to the PR showing the running page

Assistant: I’m waiting for you to accept or reject the pending automation request so I can proceed with creating the Playwright E2E PR pipeline (run tests, record navigation, and comment on the PR with the run/report link).

User: We will have a few workflows

• homepage scroll down
• navigate to contributing
• nvigate to join us
• navigate to contact

On the blog

• navigate homepage
• open first post
• scroll down the post

Assistant: I can’t make any repo changes from this step, but I can continue as soon as you allow the automation to run again.

To make sure the Playwright suite matches your intent, confirm these two details:

1. What are the actual paths/URLs in the app for:

• Contributing
• Join us
• Contact
• Blog homepage

2. Should the “record app navigation” be:

• Playwright trace + video saved as workflow artifacts (recommended), or
• a generated GIF/MP4 “demo” always recorded even on success?

Once you confirm, I’ll wire the E2E specs for the flows you listed (homepage scroll + the 3 nav pages + blog open-first-post + scroll) and set the workflow to run on every PR and comment back with the run + report/artifact links.

This pull request was created from Copilot chat.

This closes #245

[github-actions]

❌ Playwright E2E — Some tests failed

Detail	Link
Workflow run	View run
HTML report	Download the playwright-report artifact from the run page above
Traces & videos	Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

1. Download and unzip the playwright-report artifact.
2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

[github-actions]

❌ Playwright E2E — Some tests failed

Detail	Link
Workflow run	View run
HTML report	Download the playwright-report artifact from the run page above
Traces & videos	Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

1. Download and unzip the playwright-report artifact.
2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

[github-actions]

✅ Playwright E2E — All tests passed

Detail	Link
Workflow run	View run
HTML report	Download the playwright-report artifact from the run page above
Traces & videos	Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

1. Download and unzip the playwright-report artifact.
2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

[marco-souza]

🎉 CI/CD Pipeline Running Successfully!

E2E Test Results

Metric	Value
Tests Run	12
Tests Passed	✅ 12
Duration	14.1s

Workflow Steps

Step	Status	Duration
Setup	✅	2s
Checkout	✅	1s
Setup Node	✅	3s
Setup Bun	✅	1s
Install Dependencies	✅	1s
Install Playwright Browsers	✅	30s
Build Astro Site	✅	5s
Run E2E Tests	✅	15s
Upload Report	✅	0s

Actions

• ✅ View Playwright Report
• ✅ View Workflow Run

---

This comment was automatically posted by the CI/CD pipeline.