Skip to content

fix(vr-tests): update test scripts and fix story errors #35496

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dmytrokirpa merged 3 commits into from
Nov 18, 2025
Merged

fix(vr-tests): update test scripts and fix story errors #35496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6745aad
fix(vr-tests): update test scripts and fix story errors
dmytrokirpa Nov 16, 2025
17c9f09
update query selectors and wait times in story parameters
dmytrokirpa Nov 17, 2025
1e1daf4
remove cropTo option from snapshot steps in story tests
dmytrokirpa Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/vr-tests/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"lint": "just-scripts lint",
"start": "storybook dev -p 3000",
"type-check": "tsc -p . --noEmit --baseUrl .",
"test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --stepsApi parameters"
"test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --stepsApi parameters --bailOnStoriesError"
},
"devDependencies": {
"@fluentui/eslint-plugin": "*",
Expand Down
2 changes: 1 addition & 1 deletion apps/vr-tests/src/stories/ComboBox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default {
.snapshot('hover', { cropTo: '.testWrapper' })
.click('.ms-Button-flexContainer')
.hover('.ms-Button-flexContainer')
.snapshot('click', { cropTo: '.ms-Layer' }) // Dropdown extends beyond testWrapper
.snapshot('click') // Dropdown extends beyond testWrapper
.end(),
},
} satisfies StoryParameters,
Expand Down
6 changes: 3 additions & 3 deletions apps/vr-tests/src/stories/ContextutalMenu/ContextualMenu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,12 +243,12 @@ export default {
parameters: {
storyWright: {
steps: new Steps()
.snapshot('default', { cropTo: '.ms-Layer' })
.snapshot('default')
.hover('.ms-ContextualMenu-linkContent')
.snapshot('hover', { cropTo: '.ms-Layer' })
.snapshot('hover')
.click('.ms-ContextualMenu-linkContent')
.hover('.ms-ContextualMenu-linkContent')
.snapshot('click', { cropTo: '.ms-Layer' })
.snapshot('click')
.end(),
},
} satisfies StoryParameters,
Expand Down
8 changes: 4 additions & 4 deletions apps/vr-tests/src/stories/ContextutalMenu/ContextualMenuSubmenus.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,13 @@ export default {
storyWright: {
steps: new Steps()
.click('#button')
.snapshot('menu opened', { cropTo: '.ms-Layer' })
.snapshot('menu opened')
.hover('#parent')
.snapshot('parent hovered', { cropTo: '.ms-Layer' })
.snapshot('parent hovered')
.hover('#item1')
.snapshot('item1 hovered', { cropTo: '.ms-Layer' })
.snapshot('item1 hovered')
.hover('#item2')
.snapshot('item2 hovered', { cropTo: '.ms-Layer' })
.snapshot('item2 hovered')
.end(),
},
} satisfies StoryParameters,
Expand Down
6 changes: 3 additions & 3 deletions apps/vr-tests/src/stories/DatePicker/DatePicker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,11 @@ export default {
.snapshot('hover datepicker', { cropTo: '.testWrapper' })
.click('.ms-DatePicker')
.hover('.ms-DatePicker')
.snapshot('click', { cropTo: '.ms-Layer' })
.snapshot('click')
.hover(daySelector)
.snapshot('hover day', { cropTo: '.ms-Layer' })
.snapshot('hover day')
.hover(monthSelector)
.snapshot('hover month', { cropTo: '.ms-Layer' })
.snapshot('hover month')
.end(),
},
} satisfies StoryParameters,
Expand Down
2 changes: 1 addition & 1 deletion apps/vr-tests/src/stories/DatePicker/DatePickerDisabled.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default {
.snapshot('hover datepicker', { cropTo: '.testWrapper' })
.click('.ms-DatePicker')
.hover('.ms-DatePicker')
.snapshot('click', { cropTo: '.ms-Layer' })
.snapshot('click')
.end(),
},
} satisfies StoryParameters,
Expand Down
4 changes: 2 additions & 2 deletions apps/vr-tests/src/stories/DatePicker/DatePickerNoMonthOption.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ export default {
.snapshot('hover datepicker', { cropTo: '.testWrapper' })
.click('.ms-DatePicker')
.hover('.ms-DatePicker')
.snapshot('click', { cropTo: '.ms-Layer' })
.snapshot('click')
.hover(daySelector)
.snapshot('hover day', { cropTo: '.ms-Layer' })
.snapshot('hover day')
.end(),
},
} satisfies StoryParameters,
Expand Down
4 changes: 2 additions & 2 deletions apps/vr-tests/src/stories/Dropdown/Dropdown.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ export default {
.snapshot('hover', { cropTo: '.testWrapper' })
.click('.ms-Dropdown')
.hover('.ms-Dropdown')
.snapshot('click', { cropTo: '.ms-Layer' })
.snapshot('click')
.hover('.ms-Dropdown-item')
.snapshot('hover item', { cropTo: '.ms-Layer' })
.snapshot('hover item')
.end(),
},
} satisfies StoryParameters,
Expand Down
2 changes: 1 addition & 1 deletion apps/vr-tests/src/stories/Dropdown/DropdownDisabled.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default {
.snapshot('hover', { cropTo: '.testWrapper' })
.click('.ms-Dropdown')
.hover('.ms-Dropdown')
.snapshot('click', { cropTo: '.ms-Layer' })
.snapshot('click')
.end(),
},
} satisfies StoryParameters,
Expand Down
4 changes: 2 additions & 2 deletions apps/vr-tests/src/stories/HoverCard.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ export default {
storyWright: {
steps: new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-HoverCard-content')
.snapshot('hover', { cropTo: '.testWrapper' })
.click('.ms-HoverCard-host')
.snapshot('fully expanded with test content')
.end(),
},
} satisfies StoryParameters,
Expand Down
2 changes: 1 addition & 1 deletion apps/vr-tests/src/stories/Layer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default {

decorators: [TestWrapperDecorator],
parameters: {
storyWright: { steps: new Steps().snapshot('default', { cropTo: '.ms-Layer' }).end() },
storyWright: { steps: new Steps().snapshot('default').end() },
} satisfies StoryParameters,
};

Expand Down
10 changes: 5 additions & 5 deletions apps/vr-tests/src/stories/PivotOverflow.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,17 @@ export default {
parameters: {
storyWright: {
steps: new Steps()
.executeScript('document.getElementById("testWrapper").style.width = "500px"')
.executeScript('document.querySelector(".testWrapper").style.width = "500px"')
.snapshot('Medium', { cropTo: '.testWrapper' })
.executeScript('document.getElementById("testWrapper").style.width = "750px"')
.executeScript('document.querySelector(".testWrapper").style.width = "750px"')
.snapshot('Wide', { cropTo: '.testWrapper' })
.executeScript('document.getElementById("testWrapper").style.width = "250px"')
.executeScript('document.querySelector(".testWrapper").style.width = "250px"')
.click('.ms-Pivot-overflowMenuButton')
.wait(1500)
.wait(2500)
.click('.ms-Pivot-linkInMenu[data-last-tab]')
.snapshot('Narrow - Last tab selected', { cropTo: '.testWrapper' })
.click('.ms-Pivot-overflowMenuButton')
.wait(1500)
.wait(2500)
.hover('.ms-Pivot-overflowMenuButton')
.snapshot('Narrow - Overflow menu', { cropTo: '.testWrapper' })
.end(),
Expand Down
6 changes: 5 additions & 1 deletion apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@ export default {

const stepsWithHover = new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-AreaChart-line')
// to hover over the area charts and show the callout
.executeScript(
// eslint-disable-next-line @fluentui/max-len
`document.querySelector('rect').dispatchEvent(new MouseEvent('mouseover',{bubbles: true,cancelable: true,clientX:400,clientY:100}))`,
)
.snapshot('hover', { cropTo: '.testWrapper' })
.end();

Expand Down