Deactivation of Tailwind and Stylex Templates UI Testing in GitHub Actions (Desktop Only)

[swiiny]

Description

The UI testing for Tailwind and Stylex templates has been deactivated in the GitHub Actions workflow only for desktop environments due to persistent snapshot mismatches. These mismatches occur despite the tests working perfectly in the local environment and on mobile in GitHub Actions.

The issue is limited to desktop environments in GitHub Actions, as:

• All other templates pass both locally and in GitHub Actions (desktop and mobile).
• Tailwind and Stylex templates pass on mobile in GitHub Actions without issues.

Steps to Reproduce

1. Run the following command locally:

   npm run test:desktop:templates

   • Result: Tests pass, and snapshots match expectations.

2. Run the desktop tests in GitHub Actions using Act:

   npm run test:gh:test-desktop-templates

   • Result: Tests for Tailwind and Stylex templates fail due to snapshot mismatches.

Observations

• Tailwind and Stylex Desktop Tests in GitHub Actions:

  • Snapshots do not match expectations.
  • Diff images suggest subtle differences (e.g., font rendering, spacing).

• Mobile Tests in GitHub Actions:

  • All templates, including Tailwind and Stylex, pass and match snapshots.

• Local Tests (Desktop and Mobile):

  • All templates, including Tailwind and Stylex, pass and match snapshots.

Temporary Action

• Deactivation: Tailwind and Stylex templates have been temporarily excluded from UI testing on desktop environments in GitHub Actions.
• Mobile tests remain active as they work correctly.

Expected Behavior

• Tailwind and Stylex templates should pass UI tests in GitHub Actions (desktop environment) just like they do locally and on mobile.

Possible Causes

1. Font rendering differences in the GitHub Actions desktop environment (e.g., anti-aliasing, subpixel rendering).
2. Subtle differences in Tailwind or Stylex configuration that manifest only under specific rendering conditions.
3. Environment-specific behavior of the Chromium browser used in the CI environment.

Next Steps

• Investigate the root cause of the snapshot mismatches for Tailwind and Stylex templates on desktop in GitHub Actions.
• Identify if it’s related to:
  • Font rendering differences.
  • Tailwind or Stylex configuration.
  • Chromium-specific rendering in the CI environment.
• Re-enable tests for Tailwind and Stylex templates on desktop once resolved.

Notes

• This issue affects only desktop tests in GitHub Actions.
• Mobile tests and local tests are not impacted.

Related Commands

• Run desktop tests locally:

  npm run test:desktop:templates

• Run mobile tests locally:

  npm run test:mobile:templates

• Run desktop tests in GitHub Actions using Act:

  npm run test:gh:test-desktop-templates