Add e2e tests for AnchoredOverlay by siddharthkp · Pull Request #7641 · primer/react

siddharthkp · 2026-03-09T12:49:46Z

Preparatory step for AnchoredOverlay: Add support for CSS anchor positioning #7604
Add VRT tests for all AnchoredOverlay stories (default, features, dev)
Bonus: Also added new tests from ActionMenu from AnchoredOverlay: Add support for CSS anchor positioning #7604

Rollout strategy

None; Only adding tests

Merge checklist

Added/updated tests

- Add VRT tests for all AnchoredOverlay stories (default, features, dev) - Run each test with CSS anchor positioning feature flag on/off

changeset-bot · 2026-03-09T12:49:51Z

⚠️ No Changeset found

Latest commit: db791d5

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

Copilot

Pull request overview

Adds Playwright VRT coverage for AnchoredOverlay Storybook stories as a preparatory step for upcoming CSS anchor-positioning work.

Changes:

Introduces a new AnchoredOverlay Playwright test suite covering default, features, and dev stories.
Runs VRT snapshots across all supported themes.
Adds a second snapshot variant with primer_react_css_anchor_positioning enabled.

e2e/components/AnchoredOverlay.test.ts

- Add viewport support for Fullscreen Variant (xs breakpoint) - Add delay for Reposition dev stories - Use .first() for button locator to handle multi-button stories

- Add 7 new feature stories: CenteredOnPage, AnchorPositionGrid, ScrollWithAnchor, WithinDialog, WithinNestedDialog, WithinDialogOverflowing, WithinStickyElement - Add corresponding CSS styles for new stories - Add e2e tests for all new stories with dialog/nested dialog support

This reverts commit ef646f9.

llastflowers

Looks great! I left a couple small comments. Approving in advance so you won't be blocked ✨

llastflowers · 2026-03-10T19:18:46Z

...ay.test.ts-snapshots/AnchoredOverlay-Centered-On-Page-light-css-anchor-positioning-linux.png

Just noticed this one is a bit weird; is this intentional?

Oops, not at all. This test is too wide for snapshotting. Removing it.

llastflowers · 2026-03-10T19:20:25Z

packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx

  )
 }
+
+export const CenteredOnPage = () => {


I left a comment on the corresponding snapshot, but also looking at this story, it seems a little bit off. The button isn't visible unless I zoom out a lot. Just wanted to confirm what the expected behavior is here!

Yeah, it's intentionally a really big story. Doesn't make for a good visual test though.

llastflowers · 2026-03-10T19:23:47Z

...st.ts-snapshots/AnchoredOverlay-Within-Sticky-Element-light-css-anchor-positioning-linux.png

Just a small thing, but I wonder if we would want to have this overlay on top of the header (in the z-index sense) instead of underneath it? 👀

We should, but that's the bug 😄 that Tyler is fixing with anchored position (next PR). I'm just making sure we have tests to not have any regressions

Oh, ha! Makes sense 😂

Add e2e tests for AnchoredOverlay with feature flag variants

98521f3

- Add VRT tests for all AnchoredOverlay stories (default, features, dev) - Run each test with CSS anchor positioning feature flag on/off

siddharthkp requested a review from a team as a code owner March 9, 2026 12:49

siddharthkp requested review from Copilot and llastflowers March 9, 2026 12:49

siddharthkp self-assigned this Mar 9, 2026

siddharthkp added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Mar 9, 2026

github-actions bot added the staff Author is a staff member label Mar 9, 2026

Copilot started reviewing on behalf of siddharthkp March 9, 2026 12:50 View session

siddharthkp added the skip changeset This change does not need a changelog label Mar 9, 2026

Copilot AI reviewed Mar 9, 2026

View reviewed changes

e2e/components/AnchoredOverlay.test.ts Show resolved Hide resolved

e2e/components/AnchoredOverlay.test.ts Outdated Show resolved Hide resolved

e2e/components/AnchoredOverlay.test.ts Show resolved Hide resolved

e2e/components/AnchoredOverlay.test.ts Show resolved Hide resolved

This was referenced Mar 9, 2026

Add narrow viewport VRT for AnchoredOverlay Fullscreen Variant #7642

Closed

Fix AnchoredOverlay e2e test button selectors for strict-mode robustness #7643

Closed

siddharthkp deployed to github-pages March 9, 2026 13:00 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7641 March 9, 2026 13:00 Inactive

siddharthkp added the integration-tests: skipped manually Changes in this PR do not require an integration test label Mar 9, 2026

siddharthkp added 2 commits March 9, 2026 14:28

Update AnchoredOverlay e2e tests

6c91a3b

- Add viewport support for Fullscreen Variant (xs breakpoint) - Add delay for Reposition dev stories - Use .first() for button locator to handle multi-button stories

primer deleted a comment from Copilot AI Mar 9, 2026

github-actions bot requested a deployment to storybook-preview-7641 March 9, 2026 13:37 Abandoned

siddharthkp deployed to github-pages March 9, 2026 13:47 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7641 March 9, 2026 13:47 Inactive

Fix Fullscreen Variant button name in e2e test

2fcd605

siddharthkp added update snapshots 🤖 Command that updates VRT snapshots on the pull request and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Mar 9, 2026

siddharthkp deployed to github-pages March 9, 2026 14:00 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7641 March 9, 2026 14:00 Inactive

test(vrt): update snapshots

0f814d5

primer bot requested a review from a team as a code owner March 9, 2026 14:15

siddharthkp deployed to github-pages March 10, 2026 09:24 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7641 March 10, 2026 09:24 Inactive

Revert "Reset dialog scroll position before screenshot"

f6ad2b0

This reverts commit ef646f9.

siddharthkp added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Mar 10, 2026

siddharthkp deployed to github-pages March 10, 2026 10:07 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7641 March 10, 2026 10:07 Inactive

test(vrt): update snapshots

450d80f

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Mar 10, 2026

Add scroll position debugging to dialog screenshots

28e44fd

github-actions bot temporarily deployed to storybook-preview-7641 March 10, 2026 10:28 Inactive

siddharthkp deployed to github-pages March 10, 2026 10:38 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7641 March 10, 2026 10:39 Inactive

within dialog: more stable even if a little incorrect snapshots

e89111b

siddharthkp deployed to github-pages March 10, 2026 12:12 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7641 March 10, 2026 12:13 Inactive

remove flaky tests

8d1be53

lukasoppermann approved these changes Mar 10, 2026

View reviewed changes

siddharthkp deployed to github-pages March 10, 2026 13:44 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7641 March 10, 2026 13:44 Inactive

siddharthkp enabled auto-merge March 10, 2026 17:02

llastflowers approved these changes Mar 10, 2026

View reviewed changes

Simplify AnchoredOverlay e2e tests, remove problematic dialog tests

e0555d9

siddharthkp deployed to github-pages March 10, 2026 21:35 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7641 March 10, 2026 21:36 Inactive

siddharthkp added 2 commits March 10, 2026 23:02

copy e2e/ActionMenu.test.ts as well

b059e72

generate snapshots for ActionMenu

f469574

siddharthkp deployed to github-pages March 10, 2026 22:15 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7641 March 10, 2026 22:16 Inactive

siddharthkp mentioned this pull request Mar 10, 2026

(do not merge) Anchored Overlay e2e diffs #7649

Closed

Merge branch 'main' into anchored-overlay-e2e-tests

db791d5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add e2e tests for AnchoredOverlay #7641

Add e2e tests for AnchoredOverlay #7641
siddharthkp merged 25 commits intomainfrom
anchored-overlay-e2e-tests

siddharthkp commented Mar 9, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 9, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

llastflowers left a comment

Uh oh!

llastflowers Mar 10, 2026

Uh oh!

siddharthkp Mar 10, 2026

Uh oh!

llastflowers Mar 10, 2026

Uh oh!

siddharthkp Mar 10, 2026

Uh oh!

llastflowers Mar 10, 2026

Uh oh!

siddharthkp Mar 10, 2026

Uh oh!

llastflowers Mar 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

siddharthkp commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rollout strategy

Merge checklist

Uh oh!

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

Uh oh!

⚠️ No Changeset found

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

llastflowers left a comment

Choose a reason for hiding this comment

Uh oh!

llastflowers Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

siddharthkp Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

llastflowers Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

siddharthkp Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

llastflowers Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

siddharthkp Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

llastflowers Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

siddharthkp commented Mar 9, 2026 •

edited

Loading

changeset-bot bot commented Mar 9, 2026 •

edited

Loading