From 6745aad0b985c5381cf0297b8cf3ea89ba2b59c6 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Sun, 16 Nov 2025 09:44:20 +0100 Subject: [PATCH 1/3] fix(vr-tests): update test scripts and fix story errors --- apps/vr-tests/package.json | 2 +- apps/vr-tests/src/stories/HoverCard.stories.tsx | 4 ++-- .../src/stories/react-charting/AreaChart.stories.tsx | 6 +++++- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 4e42b542a11241..e5eaec3438f5de 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -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": "*", diff --git a/apps/vr-tests/src/stories/HoverCard.stories.tsx b/apps/vr-tests/src/stories/HoverCard.stories.tsx index 8b91b47fa9c4b8..a9c1bc06c4cde2 100644 --- a/apps/vr-tests/src/stories/HoverCard.stories.tsx +++ b/apps/vr-tests/src/stories/HoverCard.stories.tsx @@ -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', { cropTo: '.ms-Layer' }) .end(), }, } satisfies StoryParameters, diff --git a/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx index 85bbe4a9c92c3c..e7ce1c2318ae3a 100644 --- a/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx +++ b/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx @@ -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(); From 17c9f0953f1062212f6329b880683637da835652 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Mon, 17 Nov 2025 10:28:11 +0100 Subject: [PATCH 2/3] update query selectors and wait times in story parameters --- apps/vr-tests/src/stories/PivotOverflow.stories.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/vr-tests/src/stories/PivotOverflow.stories.tsx b/apps/vr-tests/src/stories/PivotOverflow.stories.tsx index 0d5ad4d097a68c..948a91cb3a032a 100644 --- a/apps/vr-tests/src/stories/PivotOverflow.stories.tsx +++ b/apps/vr-tests/src/stories/PivotOverflow.stories.tsx @@ -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(), From 1e1daf4dfda556a011c82a0bcfe8b2e92e358d11 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Mon, 17 Nov 2025 11:03:53 +0100 Subject: [PATCH 3/3] remove cropTo option from snapshot steps in story tests --- apps/vr-tests/src/stories/ComboBox.stories.tsx | 2 +- .../stories/ContextutalMenu/ContextualMenu.stories.tsx | 6 +++--- .../ContextutalMenu/ContextualMenuSubmenus.stories.tsx | 8 ++++---- .../src/stories/DatePicker/DatePicker.stories.tsx | 6 +++--- .../src/stories/DatePicker/DatePickerDisabled.stories.tsx | 2 +- .../DatePicker/DatePickerNoMonthOption.stories.tsx | 4 ++-- apps/vr-tests/src/stories/Dropdown/Dropdown.stories.tsx | 4 ++-- .../src/stories/Dropdown/DropdownDisabled.stories.tsx | 2 +- apps/vr-tests/src/stories/HoverCard.stories.tsx | 2 +- apps/vr-tests/src/stories/Layer.stories.tsx | 2 +- 10 files changed, 19 insertions(+), 19 deletions(-) diff --git a/apps/vr-tests/src/stories/ComboBox.stories.tsx b/apps/vr-tests/src/stories/ComboBox.stories.tsx index 25b4185f1ac054..b8a635982e067d 100644 --- a/apps/vr-tests/src/stories/ComboBox.stories.tsx +++ b/apps/vr-tests/src/stories/ComboBox.stories.tsx @@ -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, diff --git a/apps/vr-tests/src/stories/ContextutalMenu/ContextualMenu.stories.tsx b/apps/vr-tests/src/stories/ContextutalMenu/ContextualMenu.stories.tsx index cb7f3c35c1b456..659a09006a05a9 100644 --- a/apps/vr-tests/src/stories/ContextutalMenu/ContextualMenu.stories.tsx +++ b/apps/vr-tests/src/stories/ContextutalMenu/ContextualMenu.stories.tsx @@ -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, diff --git a/apps/vr-tests/src/stories/ContextutalMenu/ContextualMenuSubmenus.stories.tsx b/apps/vr-tests/src/stories/ContextutalMenu/ContextualMenuSubmenus.stories.tsx index 89db14c499716c..c6a1fa425c9586 100644 --- a/apps/vr-tests/src/stories/ContextutalMenu/ContextualMenuSubmenus.stories.tsx +++ b/apps/vr-tests/src/stories/ContextutalMenu/ContextualMenuSubmenus.stories.tsx @@ -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, diff --git a/apps/vr-tests/src/stories/DatePicker/DatePicker.stories.tsx b/apps/vr-tests/src/stories/DatePicker/DatePicker.stories.tsx index 82a9419cda9cc1..e519bc5f410b9d 100644 --- a/apps/vr-tests/src/stories/DatePicker/DatePicker.stories.tsx +++ b/apps/vr-tests/src/stories/DatePicker/DatePicker.stories.tsx @@ -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, diff --git a/apps/vr-tests/src/stories/DatePicker/DatePickerDisabled.stories.tsx b/apps/vr-tests/src/stories/DatePicker/DatePickerDisabled.stories.tsx index e24369612eaa58..d8f9cb88b67085 100644 --- a/apps/vr-tests/src/stories/DatePicker/DatePickerDisabled.stories.tsx +++ b/apps/vr-tests/src/stories/DatePicker/DatePickerDisabled.stories.tsx @@ -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, diff --git a/apps/vr-tests/src/stories/DatePicker/DatePickerNoMonthOption.stories.tsx b/apps/vr-tests/src/stories/DatePicker/DatePickerNoMonthOption.stories.tsx index 76333c18de33f5..a2ccd986bc00cc 100644 --- a/apps/vr-tests/src/stories/DatePicker/DatePickerNoMonthOption.stories.tsx +++ b/apps/vr-tests/src/stories/DatePicker/DatePickerNoMonthOption.stories.tsx @@ -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, diff --git a/apps/vr-tests/src/stories/Dropdown/Dropdown.stories.tsx b/apps/vr-tests/src/stories/Dropdown/Dropdown.stories.tsx index 797fd23d8b341c..402000559df904 100644 --- a/apps/vr-tests/src/stories/Dropdown/Dropdown.stories.tsx +++ b/apps/vr-tests/src/stories/Dropdown/Dropdown.stories.tsx @@ -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, diff --git a/apps/vr-tests/src/stories/Dropdown/DropdownDisabled.stories.tsx b/apps/vr-tests/src/stories/Dropdown/DropdownDisabled.stories.tsx index c4634ffebe49c5..520bc91f725fd6 100644 --- a/apps/vr-tests/src/stories/Dropdown/DropdownDisabled.stories.tsx +++ b/apps/vr-tests/src/stories/Dropdown/DropdownDisabled.stories.tsx @@ -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, diff --git a/apps/vr-tests/src/stories/HoverCard.stories.tsx b/apps/vr-tests/src/stories/HoverCard.stories.tsx index a9c1bc06c4cde2..40ffb99f6d7c17 100644 --- a/apps/vr-tests/src/stories/HoverCard.stories.tsx +++ b/apps/vr-tests/src/stories/HoverCard.stories.tsx @@ -29,7 +29,7 @@ export default { steps: new Steps() .snapshot('default', { cropTo: '.testWrapper' }) .click('.ms-HoverCard-host') - .snapshot('fully expanded with test content', { cropTo: '.ms-Layer' }) + .snapshot('fully expanded with test content') .end(), }, } satisfies StoryParameters, diff --git a/apps/vr-tests/src/stories/Layer.stories.tsx b/apps/vr-tests/src/stories/Layer.stories.tsx index aa70fac9fedcd1..49e1334fdfb7aa 100644 --- a/apps/vr-tests/src/stories/Layer.stories.tsx +++ b/apps/vr-tests/src/stories/Layer.stories.tsx @@ -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, };