chore(tests): visual regression tests for `post-header` #6826

alionazherdetska · 2025-12-09T18:51:13Z

📄 Description

Please include a summary of the changes made in this PR.

🚀 Demo

If applicable, please add a screenshot or video to illustrate the changes.

🔮 Design review

Design review done
No design review needed

📝 Checklist

✅ My code follows the style guidelines of this project
🛠️ I have performed a self-review of my own code
📄 I have made corresponding changes to the documentation
⚠️ My changes generate no new warnings or errors
🧪 I have added tests that prove my fix is effective or that my feature works
✔️ New and existing unit tests pass locally with my changes

changeset-bot · 2025-12-09T18:51:17Z

⚠️ No Changeset found

Latest commit: f93480b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

swisspost-bot · 2025-12-09T18:54:07Z

Related Previews

https://preview-6826--swisspost-design-system-next.netlify.app?devModeEnabled=true

Copilot

Pull request overview

This PR introduces comprehensive visual regression testing for the post-header component using Playwright. The implementation adds test infrastructure, helper utilities, and HTML fixtures for testing 7 header variants (portal, microsite, jobs, and onepager - each with logged-in/out states) across 3 breakpoints (desktop, tablet, mobile) and 3 browsers (Chromium, Firefox, WebKit).

Key changes:

Adds Playwright test framework with configuration for visual regression testing
Creates reusable test helpers for interacting with header components (megadropdowns, language menus, user menus, burger menus)
Implements consolidated test suite that efficiently tests shared features once while testing variant-specific features separately
Sets up GitHub Actions workflow with snapshot caching and optimization

Reviewed changes

Copilot reviewed 18 out of 19 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
`packages/components/playwright.config.ts`	Playwright configuration with test directories, screenshot settings, and multi-browser setup
`packages/components/visual-tests/post-header.consolidated.spec.ts`	Main test suite implementing comprehensive visual regression tests for all header variants
`packages/components/visual-tests/helpers/header-test-helpers.ts`	Reusable helper functions for interacting with header components (hover, focus, open/close actions)
`packages/components/visual-tests/helpers/header-variants.config.ts`	Configuration defining feature sets for each header variant to enable selective testing
`packages/components/visual-tests/components/*.html`	HTML test fixtures for 7 header variants (onepager, microsite logged-in/out, jobs logged-in/out, portal logged-in/out)
`packages/components/package.json`	Adds test:visual scripts and Playwright/http-server dependencies
`packages/components/tsconfig.json`	Includes Playwright types and visual-tests directory in compilation
`packages/components/tsconfig.eslint.json`	Extends ESLint configuration to include visual test files
`packages/components/stencil.config.ts`	Excludes visual-tests from Jest coverage
`packages/components/.gitignore`	Ignores test results and generated screenshot artifacts
`package.json`	Adds convenience scripts at root level for running visual tests
`.github/workflows/visual-tests.yaml`	GitHub Actions workflow for automated visual regression testing with caching
`pnpm-lock.yaml`	Updates lock file with Playwright and http-server dependencies

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

packages/components/visual-tests/components/post-header-jobs-loggedout.html

Copilot · 2025-12-09T18:56:51Z

.github/workflows/visual-tests.yaml

+      - name: Optimize PNG screenshots
+        if: |
+          (github.ref == 'refs/heads/main' && steps.snapshot-cache.outputs.cache-hit != 'true') ||
+          github.event.inputs.update-snapshots == 'true'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y pngquant
+          find packages/components/visual-tests/__screenshots__ -name "*.png" -exec pngquant --force --ext .png --quality 80-95 {} \;
+


The --quality 80-95 setting for pngquant is quite aggressive and may degrade image quality significantly, potentially causing false positives in visual regression tests due to compression artifacts. Playwright's screenshot comparison is pixel-perfect by nature, and lossy compression can introduce differences between baseline and test screenshots even when the UI hasn't changed. Consider either:

Using lossless PNG optimization tools like optipng or oxipng instead

Using a higher quality range like --quality 95-100 to minimize compression artifacts

Skipping PNG optimization entirely for visual regression test baselines

Suggested change

- name: Optimize PNG screenshots

if: |

(github.ref == 'refs/heads/main' && steps.snapshot-cache.outputs.cache-hit != 'true') ||

github.event.inputs.update-snapshots == 'true'

run: |

sudo apt-get update

sudo apt-get install -y pngquant

find packages/components/visual-tests/__screenshots__ -name "*.png" -exec pngquant --force --ext .png --quality 80-95 {} \;

packages/components/package.json

Copilot · 2025-12-09T18:56:51Z

packages/components/visual-tests/components/post-header-portal-loggedin.html

+    <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
+  </head>
+  <body>
+    <!-- One Pager Variant -->


The comment "" is misleading in multiple files. This comment appears in files for portal, microsite, and jobs variants, not just the onepager variant. Either remove the comment or update it to match the actual variant being tested.

Suggested change

packages/components/visual-tests/components/post-header-jobs-loggedin.html

Copilot · 2025-12-09T18:56:53Z

packages/components/visual-tests/components/post-header-portal-loggedout.html

+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="design-system-settings" data-post-icon-base="/www/assets/icons" />
+    <title>Post Header Portal Logout Component Visual Regression Test</title>


The title tag is inconsistent with the other HTML files. Other variants use "Post Header Component Visual Regression Test" while this one says "Post Header Portal Logout Component Visual Regression Test". Consider using a consistent title format across all variants, such as "Post Header [variant] Visual Regression Test".

Suggested change

<title>Post Header Portal Logout Component Visual Regression Test</title>

<title>Post Header Portal Logged Out Visual Regression Test</title>

Copilot · 2025-12-09T18:56:53Z

packages/components/playwright.config.ts

+
+  expect: {
+    toHaveScreenshot: {
+      threshold: 0.2,


A screenshot comparison threshold of 0.2 (20%) is very high for visual regression testing. This means screenshots can differ by up to 20% and still pass the test, which could allow significant visual regressions to go undetected. Industry standard thresholds are typically 0.01-0.05 (1-5%). Consider lowering this threshold to 0.02-0.05 to catch meaningful visual regressions while allowing for minor anti-aliasing differences across browsers.

Suggested change

threshold: 0.2,

threshold: 0.02,

Copilot · 2025-12-09T18:56:54Z

.github/workflows/visual-tests.yaml

+        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684
+        with:
+          path: packages/components/visual-tests/__screenshots__
+          key: visual-snapshots-main-${{ hashFiles('packages/components/src/**/*.{tsx,ts,scss}') }}


The cache key on line 50 doesn't include the visual test files themselves. If you modify the HTML test fixtures, helper functions, or test spec files without changing component source code, the cache will still be used, potentially causing stale baselines. Consider including the visual test files in the hash:

key: visual-snapshots-main-${{ hashFiles('packages/components/src/**/*.{tsx,ts,scss}', 'packages/components/visual-tests/**/*.{html,ts}') }}

Suggested change

key: visual-snapshots-main-${{ hashFiles('packages/components/src/**/*.{tsx,ts,scss}') }}

key: visual-snapshots-main-${{ hashFiles('packages/components/src/**/*.{tsx,ts,scss}', 'packages/components/visual-tests/**/*.{html,ts}') }}

Copilot · 2025-12-09T18:56:54Z

packages/components/.gitignore

+**/visual-tests/__screenshots__/
+


Line 39 appears to be redundant with lines 36-38. Lines 36-38 already ignore *-actual.png, *-diff.png, and *-expected.png files in __screenshots__ directories. Line 39 attempts to ignore the entire __screenshots__/ directory tree, but the patterns on lines 36-38 are more specific. Consider whether you want to ignore only the generated comparison images (lines 36-38) or the entire __screenshots__/ directory (line 39). If you want to commit baseline snapshots to git, keep lines 36-38 and remove line 39. If you don't want to commit any screenshots, keep only line 39.

Suggested change

+**/visual-tests/__screenshots__/

Copilot · 2025-12-09T18:56:54Z

packages/components/visual-tests/helpers/header-test-helpers.ts

+    const menu = document.querySelector<any>('post-language-menu');
+    const button = (menu?.shadowRoot as any)?.querySelector('button');


Using any type circumvents TypeScript's type safety. Consider using proper types or unknown instead. For example:

const menu = document.querySelector('post-language-menu'); const button = menu?.shadowRoot?.querySelector('button');

This maintains type safety without needing to cast to any.

…oggedout.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…oggedin.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…wisspost/design-system into visual-regression-tests-header

sonarqubecloud · 2025-12-11T15:23:01Z

Quality Gate failed

Failed conditions
1 Security Hotspot
3 New Code Smells (required ≤ 0)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

alionazherdetska added 7 commits December 8, 2025 12:52

initial setup

a32f849

added test for one pager header

b8e94c7

added the tests for all the header variants

f114473

added the helpers

26b18f0

slight changes

99d73c3

refactored tests

0ebaad4

Merge branch 'main' into visual-regression-tests-header

a78e448

Copilot AI review requested due to automatic review settings December 9, 2025 18:51

alionazherdetska requested a review from a team as a code owner December 9, 2025 18:51

alionazherdetska requested a review from alizedebray December 9, 2025 18:51

alionazherdetska marked this pull request as draft December 9, 2025 18:51

Copilot started reviewing on behalf of alionazherdetska December 9, 2025 18:51 View session

Copilot AI reviewed Dec 9, 2025

View reviewed changes

alionazherdetska and others added 11 commits December 10, 2025 07:45

small refactors

cb7b534

Update packages/components/visual-tests/components/post-header-jobs-l…

4820c53

…oggedout.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update packages/components/package.json

4198ee9

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update packages/components/visual-tests/components/post-header-jobs-l…

db690f3

…oggedin.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Merge branch 'main' into visual-regression-tests-header

a35504f

Merge branch 'visual-regression-tests-header' of https://github.com/s…

fdb668c

…wisspost/design-system into visual-regression-tests-header

fixed sonar

0a4251b

fixed sonar

b166f79

fixed sonar

afe421c

Merge branch 'main' into visual-regression-tests-header

dac1559

refactored the generate header script

f93480b

	<title>Post Header Portal Logout Component Visual Regression Test</title>
	<title>Post Header Portal Logged Out Visual Regression Test</title>

	key: visual-snapshots-main-${{ hashFiles('packages/components/src/*/.{tsx,ts,scss}') }}
	key: visual-snapshots-main-${{ hashFiles('packages/components/src/*/.{tsx,ts,scss}', 'packages/components/visual-tests/*/.{html,ts}') }}

		const menu = document.querySelector<any>('post-language-menu');
		const button = (menu?.shadowRoot as any)?.querySelector('button');

chore(tests): visual regression tests for post-header #6826

Are you sure you want to change the base?

chore(tests): visual regression tests for post-header #6826

Uh oh!

Conversation

alionazherdetska commented Dec 9, 2025

📄 Description

🚀 Demo

🔮 Design review

📝 Checklist

Uh oh!

changeset-bot bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

swisspost-bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Dec 11, 2025

Quality Gate failed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

chore(tests): visual regression tests for `post-header` #6826

chore(tests): visual regression tests for `post-header` #6826

changeset-bot bot commented Dec 9, 2025 •

edited

Loading

swisspost-bot commented Dec 9, 2025 •

edited

Loading