Add Screenshots to E2E Tests

[ianpaschal]

Summary by CodeRabbit

• Chores

  • Automated documentation screenshot capture and synchronization through CI/CD workflows
  • Standardized browser viewport configuration for consistent test execution

• Tests

  • Enhanced visual test coverage with automated screenshot captures at key UI component states
  • Improved test stability through explicit animation synchronization before visual verification

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
combat-command-app	Ready	Preview, Comment	Jun 12, 2026 12:44am

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 3556b27b-f369-4b7a-9fe3-894f924f6baa

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Walkthrough

This PR establishes an end-to-end documentation screenshot workflow. It introduces a screenshot() helper function that waits for animations to complete before capturing, updates Playwright configuration to set explicit viewport dimensions (1920×1080 globally, 1280×960 for Firefox), and integrates screenshot captures throughout the tournament pairings test suite at key UI states. The CI workflow is updated to upload captured screenshots as artifacts, and a new sync workflow downloads those artifacts and commits them to a static site repository. Toast and listbox synchronization waits are added to stabilize screenshot timing.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add Screenshots to E2E Tests' directly and clearly summarizes the main objective of the pull request, which adds screenshot functionality to the Playwright E2E test suite.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch ian/add-screenshots-to-e2e-tests-v2

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.github/workflows/sync-docs-screenshots.yml:
- Line 5: The workflow currently triggers on PR events (types: [opened,
synchronize, closed]) which causes the "Find CI run" step to race against an
in-progress CI; change the trigger to use a workflow_run trigger for the CI
workflow (trigger on completed runs) or revert the types to only [closed] as
originally intended, and update the job condition so it only runs when
github.event.workflow_run.conclusion == 'success' (or when github.event.action
== 'closed' if using closed-only). Locate the triggers block and the job with
the "Find CI run" step and update the event types and job condition accordingly
to ensure the job runs only after the CI workflow completes successfully.
- Around line 3-5: Add GitHub Actions concurrency to the workflow that triggers
on pull_request to prevent overlapping runs: add a top-level concurrency block
with a stable group (e.g., use github.head_ref or github.ref and github.workflow
to uniquely identify the PR/run) and set cancel-in-progress: true so a new run
cancels any in-flight run for the same PR; update the workflow that contains the
"on: pull_request" trigger and ensure the concurrency group name is
deterministic (for example referencing github.head_ref) to avoid simultaneous
pushes to the same static-site branch.

In `@test/helpers/screenshot.ts`:
- Around line 8-14: The waitForFunction callback can hang when an animation's
timing or timing.iterations is undefined; update the predicate inside
page.waitForFunction (which iterates document.getAnimations()) to explicitly
guard that timing is defined and iterations is a finite number before treating
the animation as a blocking running animation — e.g., use the KeyframeEffect
timing only when (a.effect as KeyframeEffect | null)?.getTiming() returns an
object and timing.iterations is not undefined and not Infinity (or use
Number.isFinite(timing.iterations)); if timing or iterations is absent, treat
that animation as non-blocking so the wait can complete.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 376688f6-fb44-4664-8318-00e5ca94c76c

📥 Commits

Reviewing files that changed from the base of the PR and between 7c8ed0c and 6e85bbb.

📒 Files selected for processing (7)

• .github/workflows/ci.yml
• .github/workflows/sync-docs-screenshots.yml
• .gitignore
• playwright.config.ts
• src/components/ToastProvider/ToastProvider.tsx
• test/helpers/screenshot.ts
• test/tournament-pairings.spec.ts