Stabilize Mobile Visual Snapshots

[google-labs-jules]

This PR stabilizes the Playwright visual regression suite to prevent false-positive failures across different environments (local vs. CI).

Key improvements:

• Standardized Environments: Added dedicated Mobile Chrome and Mobile Safari projects to playwright.config.ts, ensuring consistent emulation parameters.
• Automated Snapshot Management: Migrated multiple test files from manual page.screenshot() to Playwright's native expect(page).toHaveScreenshot(). This allows Playwright to handle environment-specific snapshot naming (e.g., -linux.png) automatically.
• Enhanced Stability Helpers:
  • Updated disableAnimations to suppress View Transitions and force immediate scrolling.
  • Added a global document.fonts.ready check to the page fixture to ensure snapshots are captured only after web fonts have settled.
• Test Cleanup: Removed manual viewport and device overrides in individual test files to ensure they inherit the standardized project settings.

Fixes #2900

---

PR created automatically by Jules for task 5203909596431698698 started by @arii

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[arii]

🤖 AI Technical Audit

ANTI-AI-SLOP

The refactoring of visual regression tests is generally high-quality and aligns with Playwright best practices. However, the verify_ux_consistency.spec.ts test remains an anti-pattern. Mixing multiple test scenarios (homepage/detail page, mobile/desktop) into a single monolithic test case makes failures difficult to debug and prevents parallelization. Furthermore, the use of isMobile checks inside the test body to toggle screenshot paths negates the benefit of Playwright's project-based configuration. Tests should rely on the project setup, not procedural logic.

FINAL RECOMMENDATION

approved with suggestions

Review automatically published via RepoAuditor.

[github-actions]

🚀 Deployment Details (Last updated: Jun 26, 2026, 3:06 PM PST)

🚀 Pushed to gh-pages; publish in progress

• Preview URL: https://arii.github.io/tech-dancer/feat/stabilize-mobile-snapshots-5203909596431698698/
• Preview Dashboard: https://arii.github.io/tech-dancer/previews/index.html
• Commit SHA: 06f0018
• Marker File: verify here

[arii]

Issue audit result

Recommendation: Completed, close

Reason:
The PR implements standard visual test approaches, replacing manual page.screenshot() with expect(page).toHaveScreenshot() across mobile tests. It updates playwright.config.ts to standard 'chromium', 'mobile-chrome', and 'mobile-safari' projects. It introduces test.skip(({ isMobile }) => !isMobile, ...) where appropriate and disables CSS animations globally to reduce flakiness. Snapshot file names now match the required standard. All CI steps including visual tests succeeded.

Implementation evidence:

• Files checked: playwright.config.ts, tests/affiliate-mobile.spec.ts, tests/blog-post-mobile.spec.ts, tests/fixtures/visual.ts, tests/research-mobile.spec.ts, tests/search_mobile.spec.ts, tests/utils/playwright-helpers.ts, tests/verify_ux_consistency.spec.ts, tests/visual-affiliate.spec.ts
• PRs checked: #2936
• Routes checked: N/A
• Tests or validation: CI tests successfully passed on this PR, including Build & E2E checking snapshots.

Remaining work:
None.

[arii]

@jules-fix-ci

[github-actions]

🤖 Jules is on it!

Initialized autonomous repair session (sessions/4812018917954590741) for branch feat/stabilize-mobile-snapshots-5203909596431698698.

[arii]

🤖 AI Technical Audit

ANTI-AI-SLOP

The refactoring is generally sound; however, verify_ux_consistency.spec.ts remains a monolithic test file that violates the SRP (Single Responsibility Principle). While consolidating snapshots is good, the test contains excessive conditional branching (if (isMobile)) that makes local debugging difficult and hides the true state of the application across different device profiles. Please break these into separate test files or use project-specific tagging.

FINAL RECOMMENDATION

Approved with Minor Changes

DEFINITION OF DONE

1. Refactor verify_ux_consistency.spec.ts to remove the isMobile conditional branches. Use test.describe or split into homepage.spec.ts and guide.spec.ts utilizing project-based configuration.
2. Verify tests pass for all three projects (chromium, mobile-chrome, mobile-safari).
3. Run audit for anti-patterns to ensure no lingering page.screenshot calls remain in the codebase.
4. Update snapshots if necessary.

Review automatically published via RepoAuditor.

[arii]

🤖 AI Technical Audit

ANTI-AI-SLOP

• The PR is well-structured and addresses the core issues of flakiness in visual regression tests.
• Cleanup of redundant test.use({ viewport: ... }) is appreciated.
• snapshotPathTemplate is correctly implemented to prevent collision and aid maintenance.
• The manual font waiting logic in the visual.ts fixture is a robust addition to avoid layout shift-related noise.

FINAL RECOMMENDATION

Approved with Minor Changes

DEFINITION OF DONE

• Clean up orphaned snapshot files. Many renames left behind leftover files in the old directory structure that should be purged from the repository.
• Add a note in playwright.config.ts or a README update explaining the new snapshot directory structure for future contributors.
• Verify all snapshots are actually being generated in the correct folders (run tests locally to confirm output alignment).

Review automatically published via RepoAuditor.

[arii]

PR Review

Summary: This PR aims to stabilize mobile visual snapshots by adopting native Playwright snapshot features (toHaveScreenshot) instead of manual file path string manipulations. It removes hardcoded viewports in favor of leveraging Playwright project configurations and adds some fixes for view-transition animations.

Findings:

• CI Failure: The Build & E2E check failed. Looking at the diff, this PR introduces -linux.png snapshots (e.g., tests/verify_ux_consistency.spec.ts-snapshots/detail-page-v2-chromium-linux.png). This directly violates the repository context ("Playwright visual regression snapshots are structured using a custom snapshotPathTemplate... Default Playwright OS suffixes (like -linux.png) are obsolete and should be purged").
• Flawed Snapshot Naming: The PR is actively adding OS-suffixed snapshots which likely broke the CI environment that doesn't expect them, and conflicts with the stated goal of using snapshotPathTemplate.
• Refactoring: The shift to expect(page).toHaveScreenshot(name) is correct and an improvement over page.screenshot({ path: ... }).

Recommendation: Not Approved. The PR introduces obsolete -linux.png suffixed snapshots which violates the repository's Playwright configuration constraints and fails the CI. Please remove the OS suffixes from the snapshot names to rely on the project-level directory grouping.

[arii]

ANTI-AI-SLOP

The Build & E2E check failed. This PR introduces -linux.png snapshots which directly violates the repository context ("Default Playwright OS suffixes (like -linux.png) are obsolete and should be purged").

FINDINGS

This PR aims to stabilize mobile visual snapshots by adopting native Playwright snapshot features (toHaveScreenshot). However, the PR introduces obsolete -linux.png suffixed snapshots which violates the repository's Playwright configuration constraints and fails the CI. Please remove the OS suffixes from the snapshot names to rely on the project-level directory grouping.

FINAL RECOMMENDATION

Not Approved

[arii]

ANTI-AI-SLOP

The Build & E2E check failed. This PR introduces -linux.png snapshots which directly violates the repository context ("Default Playwright OS suffixes (like -linux.png) are obsolete and should be purged").

FINDINGS

This PR aims to stabilize mobile visual snapshots by adopting native Playwright snapshot features (toHaveScreenshot). However, the PR introduces obsolete -linux.png suffixed snapshots which violates the repository's Playwright configuration constraints and fails the CI. Please remove the OS suffixes from the snapshot names to rely on the project-level directory grouping.

FINAL RECOMMENDATION

Not Approved

[arii]

ANTI-AI-SLOP

The Build & E2E check failed. This PR introduces -linux.png snapshots which directly violates the repository context ("Default Playwright OS suffixes (like -linux.png) are obsolete and should be purged").

FINDINGS

This PR aims to stabilize mobile visual snapshots by adopting native Playwright snapshot features (toHaveScreenshot). However, the PR introduces obsolete -linux.png suffixed snapshots which violates the repository's Playwright configuration constraints and fails the CI. Please remove the OS suffixes from the snapshot names to rely on the project-level directory grouping.

FINAL RECOMMENDATION

Not Approved