From 9c89d080cf73917a57ac0ef5b70b6c48da4054b7 Mon Sep 17 00:00:00 2001 From: Olga Bulat Date: Fri, 13 Sep 2024 18:53:24 +0300 Subject: [PATCH] Add the ability to check two snapshots for each test --- .../decorators/with-theme-switcher.js | 38 ++++++++++++ frontend/.storybook/preview.ts | 4 +- .../src/components/meta/VButton.stories.js | 3 + frontend/test/playwright/utils/breakpoints.ts | 60 +++++++++++++------ .../test/playwright/utils/theme-switcher.ts | 29 +++++++++ .../components/content-report-form.spec.ts | 4 +- .../external-sources-section.spec.ts | 12 +++- .../components/filters.spec.ts | 20 ++++--- .../components/global-audio-player.spec.ts | 2 +- .../components/header.spec.ts | 22 ++++--- .../visual-regression/pages/errors.spec.ts | 31 ++++++---- .../visual-regression/pages/homepage.spec.ts | 24 +++++--- .../pages/pages-single-result.spec.ts | 21 ++++--- .../visual-regression/pages/pages.spec.ts | 13 ++-- .../pages/search-with-banners.spec.ts | 2 +- .../test/storybook/utils/expect-snapshot.ts | 39 ++++++++++-- .../custom-button-components.spec.ts | 19 +++++- .../storybook/visual-regression/focus.spec.ts | 4 +- .../visual-regression/v-button.spec.ts | 19 +++++- .../visual-regression/v-checkbox.spec.ts | 25 ++++---- .../v-collection-header.spec.ts | 1 + .../visual-regression/v-filter-button.spec.ts | 7 +++ .../visual-regression/v-filter-tab.spec.ts | 4 ++ .../visual-regression/v-footer.spec.ts | 6 +- .../v-header-internal.spec.ts | 16 +++-- .../visual-regression/v-icon-button.spec.ts | 1 + .../visual-regression/v-image-cell.spec.ts | 4 ++ .../v-language-select.spec.ts | 8 ++- .../visual-regression/v-media-license.spec.ts | 2 +- .../visual-regression/v-media-reuse.spec.ts | 1 + .../v-notitication-banner.spec.ts | 8 +-- .../visual-regression/v-safety-wall.spec.ts | 1 + .../v-search-bar-button.spec.ts | 44 +++++++++----- .../v-search-type-button.spec.ts | 2 + .../visual-regression/v-search-types.spec.ts | 12 ++-- .../visual-regression/v-select-field.spec.ts | 3 +- .../js/eslint-plugin/src/configs/index.ts | 1 + 37 files changed, 374 insertions(+), 138 deletions(-) create mode 100644 frontend/.storybook/decorators/with-theme-switcher.js create mode 100644 frontend/test/playwright/utils/theme-switcher.ts diff --git a/frontend/.storybook/decorators/with-theme-switcher.js b/frontend/.storybook/decorators/with-theme-switcher.js new file mode 100644 index 00000000000..50eb1cf2e5a --- /dev/null +++ b/frontend/.storybook/decorators/with-theme-switcher.js @@ -0,0 +1,38 @@ +import { useDarkMode } from "#imports" + +import { ref, watch, onMounted, h } from "vue" + +import VThemeSelect from "~/components/VThemeSelect/VThemeSelect.vue" + +export const WithThemeSwitcher = (story) => { + return { + components: { story }, + setup() { + const element = ref() + const { cssClass } = useDarkMode() + + onMounted(() => { + watch(cssClass, async (newClass, oldClass) => { + if (element.value) { + element.value.ownerDocument + .querySelector("#storybook-root") + .classList.add("bg-default") + element.value.ownerDocument.body.classList.add(newClass) + if (oldClass) { + element.value.ownerDocument.body.classList.remove(oldClass) + } + } + }) + }) + return () => + h("div", { ref: element }, [ + h(story()), + h( + "div", + { class: "absolute bottom-0", id: "storybook-theme-switcher" }, + [h(VThemeSelect)] + ), + ]) + }, + } +} diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts index de83d651fa1..386ef18e910 100644 --- a/frontend/.storybook/preview.ts +++ b/frontend/.storybook/preview.ts @@ -3,10 +3,12 @@ import { VIEWPORTS } from "~/constants/screens" import { WithUiStore } from "~~/.storybook/decorators/with-ui-store" import { WithRTL } from "~~/.storybook/decorators/with-rtl" +import { WithThemeSwitcher } from "~~/.storybook/decorators/with-theme-switcher" + import type { Preview } from "@storybook/vue3" const preview: Preview = { - decorators: [WithRTL, WithUiStore], + decorators: [WithRTL, WithUiStore, WithThemeSwitcher], globalTypes: { languageDirection: { name: "RTL", diff --git a/frontend/src/components/meta/VButton.stories.js b/frontend/src/components/meta/VButton.stories.js index 3bd5bb51edb..a750ea1351d 100644 --- a/frontend/src/components/meta/VButton.stories.js +++ b/frontend/src/components/meta/VButton.stories.js @@ -3,6 +3,8 @@ import { h } from "vue" import { buttonForms, buttonSizes, buttonVariants } from "~/types/button" import { capitalCase } from "~/utils/case" +import { WithScreenshotArea } from "~~/.storybook/decorators/with-screenshot-area" + import VButton from "~/components/VButton.vue" import VIcon from "~/components/VIcon/VIcon.vue" @@ -21,6 +23,7 @@ export default { viewport: { defaultViewport: "sm", }, + decorators: [WithScreenshotArea], }, args: { size: "medium", diff --git a/frontend/test/playwright/utils/breakpoints.ts b/frontend/test/playwright/utils/breakpoints.ts index 5f3adf20b08..eb2b9083f11 100644 --- a/frontend/test/playwright/utils/breakpoints.ts +++ b/frontend/test/playwright/utils/breakpoints.ts @@ -1,4 +1,11 @@ -import { test, expect, Expect } from "@playwright/test" +import { test, expect, Expect, Page } from "@playwright/test" + +import type { LanguageDirection } from "~~/test/playwright/utils/i18n" + +import { + setThemeSwitcherVisibility, + turnOnDarkMode, +} from "~~/test/playwright/utils/theme-switcher" import { VIEWPORTS } from "~/constants/screens" import type { Breakpoint } from "~/constants/screens" @@ -9,20 +16,25 @@ type ScreenshotAble = { } type ExpectSnapshot = ( + page: Page, name: string, s: T, - options?: Parameters[0], - snapshotOptions?: Parameters["toMatchSnapshot"]>[0] + config?: { + dir?: LanguageDirection + options?: Parameters[0] + snapshotOptions?: Parameters["toMatchSnapshot"]>[0] + } ) => Promise +type EffectiveColorMode = "dark" | "light" + type BreakpointBlock = (options: { - getConfigValues: (name: string) => { - name: `${typeof name}-${Breakpoint}-light.png` - } breakpoint: Breakpoint expectSnapshot: ExpectSnapshot }) => void +const USE_DARK_MODE = false + export const desktopBreakpoints = ["2xl", "xl", "lg"] as const export const mobileBreakpoints = ["md", "sm", "xs"] as const @@ -87,24 +99,38 @@ const makeBreakpointDescribe = userAgent: options.uaMocking ? mockUaStrings[breakpoint] : undefined, }) - const getConfigValues = (name: string) => ({ - name: `${name}-${breakpoint}-light.png` as const, - }) + const getSnapshotName = ( + name: string, + colorMode: EffectiveColorMode = "light", + dir?: LanguageDirection + ) => { + const dirString = dir ? `-${dir}` : "" + return `${name}${dirString}-${breakpoint}-${colorMode}.png` as const + } const expectSnapshot = async ( + page: Page, name: string, screenshotAble: T, - options?: Parameters[0], - snapshotOptions?: Parameters["toMatchSnapshot"]>[0] + { dir, options, snapshotOptions }: Parameters[3] = {} ) => { - const { name: snapshotName } = getConfigValues(name) - return expect(await screenshotAble.screenshot(options)).toMatchSnapshot( - snapshotName, - snapshotOptions - ) + await setThemeSwitcherVisibility(page, "hidden") + expect + .soft(await screenshotAble.screenshot(options)) + .toMatchSnapshot(getSnapshotName(name, "light", dir), snapshotOptions) + + if (!USE_DARK_MODE) { + return + } + + await turnOnDarkMode(page, dir ?? "ltr") + + expect + .soft(await screenshotAble.screenshot(options)) + .toMatchSnapshot(getSnapshotName(name, "dark", dir), snapshotOptions) } - _block({ breakpoint, getConfigValues, expectSnapshot }) + _block({ breakpoint, expectSnapshot }) }) } diff --git a/frontend/test/playwright/utils/theme-switcher.ts b/frontend/test/playwright/utils/theme-switcher.ts new file mode 100644 index 00000000000..45f71d3d373 --- /dev/null +++ b/frontend/test/playwright/utils/theme-switcher.ts @@ -0,0 +1,29 @@ +import { Page } from "@playwright/test" + +import { LanguageDirection, t } from "~~/test/playwright/utils/i18n" + +type EffectiveColorMode = "dark" | "light" +const themeSelectLabel = (dir: LanguageDirection) => t("theme.theme", dir) +const themeOption = (colorMode: EffectiveColorMode, dir: LanguageDirection) => + t(`theme.choices.${colorMode}`, dir) + +export const setThemeSwitcherVisibility = async ( + page: Page, + visibility: "visible" | "hidden" +) => { + await page.evaluate( + ([visibility]) => + ( + document.querySelector("#storybook-theme-switcher") as HTMLElement + )?.style.setProperty("visibility", visibility), + [visibility] + ) +} + +export const turnOnDarkMode = async (page: Page, dir: LanguageDirection) => { + await setThemeSwitcherVisibility(page, "visible") + await page + .getByLabel(themeSelectLabel(dir)) + .selectOption(themeOption("dark", dir)) + await setThemeSwitcherVisibility(page, "hidden") +} diff --git a/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts b/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts index 1728cf4d56a..5c21429a471 100644 --- a/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts +++ b/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts @@ -46,8 +46,8 @@ test.describe("content report form", () => { await button.click() - await expectSnapshot("content-report", page, undefined, { - maxDiffPixelRatio: 0.1, + await expectSnapshot(page, "content-report", page, { + snapshotOptions: { maxDiffPixelRatio: 0.01 }, }) }) }) diff --git a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts index bd55cf0ba76..2a80711dea7 100644 --- a/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts +++ b/frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts @@ -40,10 +40,16 @@ for (const dir of languageDirections) { await page.mouse.move(0, 0) await expectSnapshot( - `external-${mediaType}-sources-popover-${dir}`, + page, + `external-${mediaType}-sources-popover`, page.getByRole("dialog"), - {}, - { maxDiffPixelRatio: 0.01, maxDiffPixels: undefined } + { + dir, + snapshotOptions: { + maxDiffPixelRatio: 0.01, + maxDiffPixels: undefined, + }, + } ) }) } diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts b/frontend/test/playwright/visual-regression/components/filters.spec.ts index 7cded3c1964..afa4b78f458 100644 --- a/frontend/test/playwright/visual-regression/components/filters.spec.ts +++ b/frontend/test/playwright/visual-regression/components/filters.spec.ts @@ -26,13 +26,14 @@ for (const dir of languageDirections) { await filters.open(page, dir) }) test(`filters modal none selected - ${dir}`, async ({ page }) => { - const snapshotName = `${getFiltersName(breakpoint)}-${dir}` - await expectSnapshot( - snapshotName, + page, + getFiltersName(breakpoint), isDesktop ? page.locator(".sidebar") : page, - {}, - { maxDiffPixels: 2, maxDiffPixelRatio: undefined } + { + dir, + snapshotOptions: { maxDiffPixels: 2, maxDiffPixelRatio: undefined }, + } ) }) @@ -40,14 +41,17 @@ for (const dir of languageDirections) { const firstFilter = page.getByRole("checkbox").first() await firstFilter.check() - const snapshotName = `${getFiltersName(breakpoint)}-checked-${dir}` + const snapshotName = `${getFiltersName(breakpoint)}-checked` await firstFilter.hover() await expectSnapshot( + page, snapshotName, isDesktop ? page.locator(".sidebar") : page, - {}, - { maxDiffPixels: 2, maxDiffPixelRatio: undefined } + { + dir, + snapshotOptions: { maxDiffPixels: 2, maxDiffPixelRatio: undefined }, + } ) }) } diff --git a/frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts b/frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts index 016b44c0bc4..f61c7bec583 100644 --- a/frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts +++ b/frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts @@ -32,7 +32,7 @@ for (const dir of languageDirections) { // To make the tests consistent, set the played area to the same position await page.mouse.click(170, 650) - await expectSnapshot(`global-audio-player-on-search-${dir}`, page) + await expectSnapshot(page, "global-audio-player-on-search", page, { dir }) }) }) } diff --git a/frontend/test/playwright/visual-regression/components/header.spec.ts b/frontend/test/playwright/visual-regression/components/header.spec.ts index e76d078fc53..58d86c45693 100644 --- a/frontend/test/playwright/visual-regression/components/header.spec.ts +++ b/frontend/test/playwright/visual-regression/components/header.spec.ts @@ -29,8 +29,10 @@ for (const dir of languageDirections) { test("filters open", async ({ page }) => { await page.mouse.move(0, 150) await expectSnapshot( - `filters-open-${dir}`, - page.locator(headerSelector) + page, + "filters-open", + page.locator(headerSelector), + { dir } ) }) @@ -45,22 +47,28 @@ for (const dir of languageDirections) { test("resting", async ({ page }) => { // Make sure the header is not hovered on await page.mouse.move(0, 150) - await expectSnapshot(`resting-${dir}`, page.locator(headerSelector)) + await expectSnapshot(page, "resting", page.locator(headerSelector), { + dir, + }) }) test("scrolled", async ({ page }) => { await scrollToBottom(page) await page.mouse.move(0, 150) await sleep(200) - await expectSnapshot(`scrolled-${dir}`, page.locator(headerSelector)) + await expectSnapshot(page, "scrolled", page.locator(headerSelector), { + dir, + }) }) test("searchbar hovered", async ({ page }) => { await page.hover("input") await hideInputCursors(page) await expectSnapshot( - `searchbar-hovered-${dir}`, - page.locator(headerSelector) + page, + "searchbar-hovered", + page.locator(headerSelector), + { dir } ) }) @@ -74,7 +82,7 @@ for (const dir of languageDirections) { const locator = isMobileBreakpoint(breakpoint) ? page : page.locator(headerSelector) - await expectSnapshot(`searchbar-active-${dir}`, locator) + await expectSnapshot(page, "searchbar-active", locator, { dir }) }) }) }) diff --git a/frontend/test/playwright/visual-regression/pages/errors.spec.ts b/frontend/test/playwright/visual-regression/pages/errors.spec.ts index 1f9c5c0f0d5..093c918b65d 100644 --- a/frontend/test/playwright/visual-regression/pages/errors.spec.ts +++ b/frontend/test/playwright/visual-regression/pages/errors.spec.ts @@ -33,7 +33,9 @@ breakpoints.describeXl(({ breakpoint, expectSnapshot }) => { await page.goto(`/image/${imageId}`) // eslint-disable-next-line playwright/no-networkidle await page.waitForLoadState("networkidle") - await expectSnapshot("generic-error", page, { fullPage: true }) + await expectSnapshot(page, "generic-error", page, { + options: { fullPage: true }, + }) }) } @@ -57,7 +59,9 @@ breakpoints.describeXl(({ breakpoint, expectSnapshot }) => { // eslint-disable-next-line playwright/no-networkidle await page.waitForLoadState("networkidle") - await expectSnapshot("generic-error", page, { fullPage: true }) + await expectSnapshot(page, "generic-error", page, { + options: { fullPage: true }, + }) }) } }) @@ -76,8 +80,8 @@ for (const searchType of supportedSearchTypes) { await preparePageForTests(page, breakpoint) await goToSearchTerm(page, `SearchPage500error`, { searchType }) - await expectSnapshot("generic-error", page, { - fullPage: true, + await expectSnapshot(page, "generic-error", page, { + options: { fullPage: true }, }) }) }) @@ -100,7 +104,12 @@ for (const searchType of supportedSearchTypes) { searchType, }) - await expectSnapshot("generic-error", page, { fullPage: true }) + await expectSnapshot(page, "generic-error", page, { + dir, + options: { + fullPage: true, + }, + }) }) } @@ -115,10 +124,12 @@ for (const searchType of supportedSearchTypes) { await page.mouse.move(0, 82) await expectSnapshot( + page, `search-result-${ searchType === ALL_MEDIA ? "image" : searchType - }-no-results-${dir}`, - page.locator("#main-page") + }-no-results`, + page.locator("#main-page"), + { dir } ) }) @@ -133,11 +144,11 @@ for (const searchType of supportedSearchTypes) { await page.mouse.move(0, 82) await expectSnapshot( - `search-result-timeout-${dir}`, + page, + "search-result-timeout", page.locator("#main-page"), - {}, // Timeout pages attribution has icons that don't always load from CC site - { maxDiffPixelRatio: 0.01 } + { dir, snapshotOptions: { maxDiffPixelRatio: 0.01 } } ) }) } diff --git a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts index d72449346e9..a2090c70fa7 100644 --- a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts +++ b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts @@ -37,15 +37,17 @@ for (const dir of languageDirections) { await page.mouse.move(0, 0) }) - test(`${dir} full page`, async ({ page }) => { - await expectSnapshot(`index-${dir}`, page) + test("full page", async ({ page }) => { + await expectSnapshot(page, "index", page, { dir }) }) test.describe("search input", () => { test("unfocused", async ({ page }) => { await expectSnapshot( - `unfocused-search-${dir}`, - page.locator("form:has(input)") + page, + `unfocused-search`, + page.locator("form:has(input)"), + { dir } ) }) @@ -53,15 +55,17 @@ for (const dir of languageDirections) { await page.focus("input") await hideInputCursors(page) await expectSnapshot( - `focused-search-${dir}`, - page.locator("form:has(input)") + page, + "focused-search", + page.locator("form:has(input)"), + { dir } ) }) test("content switcher open", async ({ page }) => { await page.locator("#search-type-button").click() - await expectSnapshot(`content-switcher-open-${dir}`, page) + await expectSnapshot(page, "content-switcher-open", page, { dir }) }) }) }) @@ -79,8 +83,10 @@ for (const dir of languageDirections) { await page.locator("#search-type-button").click() await expectSnapshot( - `content-switcher-with-external-sources-open-${dir}`, - page + page, + "content-switcher-with-external-sources-open", + page, + { dir } ) }) }) diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts index 80d330f7b07..2507df1485c 100644 --- a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts +++ b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts @@ -42,10 +42,14 @@ for (const mediaType of supportedMediaTypes) { // This will include the "Back to results" link. await openFirstResult(page, mediaType, dir) await expectSnapshot( - `${mediaType}-${dir}-from-search-results-with-additional-search-views`, page, - { fullPage: true }, - { maxDiffPixelRatio: 0.01 } + `${mediaType}-from-search-results-with-additional-search-views`, + page, + { + dir, + options: { fullPage: true }, + snapshotOptions: { maxDiffPixelRatio: 0.01 }, + } ) }) }) @@ -64,12 +68,11 @@ for (const dir of languageDirections) { // Wait for the language select to hydrate. await sleep(500) - await expectSnapshot( - `${dir}-full-page-report`, - page, - { fullPage: true }, - { maxDiffPixelRatio: undefined, maxDiffPixels: 2 } - ) + await expectSnapshot(page, "full-page-report", page, { + dir, + options: { fullPage: true }, + snapshotOptions: { maxDiffPixelRatio: undefined, maxDiffPixels: 2 }, + }) }) }) } diff --git a/frontend/test/playwright/visual-regression/pages/pages.spec.ts b/frontend/test/playwright/visual-regression/pages/pages.spec.ts index 77af37ae192..9db2bfa4dca 100644 --- a/frontend/test/playwright/visual-regression/pages/pages.spec.ts +++ b/frontend/test/playwright/visual-regression/pages/pages.spec.ts @@ -38,14 +38,11 @@ for (const contentPage of contentPages) { // Make sure header is not hovered on await page.mouse.move(150, 150) - await expectSnapshot( - `${contentPage}-${dir}`, - page, - { - fullPage: true, - }, - { maxDiffPixelRatio: 0.005 } - ) + await expectSnapshot(page, contentPage, page, { + dir, + options: { fullPage: true }, + snapshotOptions: { maxDiffPixelRatio: 0.005 }, + }) }) }) }) diff --git a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts index 1d5b4c97356..b715e1cdf1f 100644 --- a/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts +++ b/frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts @@ -19,6 +19,6 @@ breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => { }) test("page with all banners", async ({ page }) => { - await expectSnapshot(`page-with-all-banners`, page) + await expectSnapshot(page, `page-with-all-banners`, page) }) }) diff --git a/frontend/test/storybook/utils/expect-snapshot.ts b/frontend/test/storybook/utils/expect-snapshot.ts index 3683f8cafcf..55135504aed 100644 --- a/frontend/test/storybook/utils/expect-snapshot.ts +++ b/frontend/test/storybook/utils/expect-snapshot.ts @@ -7,18 +7,47 @@ import { PageScreenshotOptions, } from "@playwright/test" +import type { LanguageDirection } from "~~/test/playwright/utils/i18n" +import { + setThemeSwitcherVisibility, + turnOnDarkMode, +} from "~~/test/playwright/utils/theme-switcher" + export type ExpectSnapshotOptions = { - screenshotOptions: LocatorScreenshotOptions | PageScreenshotOptions - snapshotOptions: Parameters["toMatchSnapshot"]>[0] + screenshotOptions?: LocatorScreenshotOptions | PageScreenshotOptions + snapshotOptions?: Parameters["toMatchSnapshot"]>[0] + dir?: LanguageDirection } +const USE_DARK_MODE = false + export const expectSnapshot = async ( + page: Page, name: string, locator: Locator | Page, options?: ExpectSnapshotOptions ) => { + await setThemeSwitcherVisibility(page, "hidden") const snapshotName = `${name}-light.png` - return expect( - await locator.screenshot(options?.screenshotOptions) - ).toMatchSnapshot(snapshotName, options?.snapshotOptions) + expect + .soft(await locator.screenshot(options?.screenshotOptions)) + .toMatchSnapshot(snapshotName, options?.snapshotOptions) + + if (!USE_DARK_MODE) { + return + } + await turnOnDarkMode(page, options?.dir ?? "ltr") + + expect(await locator.screenshot(options?.screenshotOptions)).toMatchSnapshot( + `${name}-dark.png`, + options?.snapshotOptions + ) +} + +export const expectScreenshotAreaSnapshot = async ( + page: Page, + name: string, + options?: ExpectSnapshotOptions +) => { + return expectSnapshot(page, name, page.locator(".screenshot-area"), options) } diff --git a/frontend/test/storybook/visual-regression/custom-button-components.spec.ts b/frontend/test/storybook/visual-regression/custom-button-components.spec.ts index 70e9d2b1258..02eab94f11e 100644 --- a/frontend/test/storybook/visual-regression/custom-button-components.spec.ts +++ b/frontend/test/storybook/visual-regression/custom-button-components.spec.ts @@ -14,19 +14,31 @@ test.describe("VLoadMore button", () => { breakpoints.describeMobileAndDesktop(({ expectSnapshot }) => { test("resting", async ({ page }) => { await gotoWithArgs(page) - await expectSnapshot("v-load-more-resting", page.locator(wrapperLocator)) + await expectSnapshot( + page, + "v-load-more-resting", + page.locator(wrapperLocator) + ) }) test("hovered", async ({ page }) => { await gotoWithArgs(page) await page.getByRole("button").hover() - await expectSnapshot("v-load-more-hovered", page.locator(wrapperLocator)) + await expectSnapshot( + page, + "v-load-more-hovered", + page.locator(wrapperLocator) + ) }) test("focused", async ({ page }) => { await gotoWithArgs(page) await page.getByRole("button").focus() - await expectSnapshot("v-load-more-focused", page.locator(wrapperLocator)) + await expectSnapshot( + page, + "v-load-more-focused", + page.locator(wrapperLocator) + ) }) test("focused hovered", async ({ page }) => { @@ -34,6 +46,7 @@ test.describe("VLoadMore button", () => { await page.getByRole("button").focus() await page.getByRole("button").hover() await expectSnapshot( + page, "v-load-more-focused-hovered", page.locator(wrapperLocator) ) diff --git a/frontend/test/storybook/visual-regression/focus.spec.ts b/frontend/test/storybook/visual-regression/focus.spec.ts index 27317c78537..77ae787f721 100644 --- a/frontend/test/storybook/visual-regression/focus.spec.ts +++ b/frontend/test/storybook/visual-regression/focus.spec.ts @@ -1,6 +1,6 @@ import { test, Page } from "@playwright/test" -import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot" +import { expectScreenshotAreaSnapshot } from "~~/test/storybook/utils/expect-snapshot" const goTo = async (page: Page, slug: string) => { await page.goto(`/iframe.html?id=meta-focus--${slug}`) @@ -21,7 +21,7 @@ test.describe("Focus", () => { await goTo(page, slug) await page.focus('[data-testid="focus-target"]') - await expectSnapshot(`focus-${slug}`, page.locator(".screenshot-area")) + await expectScreenshotAreaSnapshot(page, `focus-${slug}`) }) } }) diff --git a/frontend/test/storybook/visual-regression/v-button.spec.ts b/frontend/test/storybook/visual-regression/v-button.spec.ts index 3ccf60f4407..704decd8dc0 100644 --- a/frontend/test/storybook/visual-regression/v-button.spec.ts +++ b/frontend/test/storybook/visual-regression/v-button.spec.ts @@ -19,19 +19,31 @@ test.describe("VButton", () => { for (const variant of nonPressedVariants) { test(`${variant} resting`, async ({ page }) => { await gotoWithArgs(page, { variant }) - await expectSnapshot(`${variant}-resting`, page.locator(wrapperLocator)) + await expectSnapshot( + page, + `${variant}-resting`, + page.locator(wrapperLocator) + ) }) test(`${variant} hovered`, async ({ page }) => { await gotoWithArgs(page, { variant }) await page.hover(buttonLocator) - await expectSnapshot(`${variant}-hovered`, page.locator(wrapperLocator)) + await expectSnapshot( + page, + `${variant}-hovered`, + page.locator(wrapperLocator) + ) }) test(`${variant} focused`, async ({ page }) => { await gotoWithArgs(page, { variant }) await page.focus(buttonLocator) - await expectSnapshot(`${variant}-focused`, page.locator(wrapperLocator)) + await expectSnapshot( + page, + `${variant}-focused`, + page.locator(wrapperLocator) + ) }) test(`${variant} focused hovered`, async ({ page }) => { @@ -39,6 +51,7 @@ test.describe("VButton", () => { await page.focus(buttonLocator) await page.hover(buttonLocator) await expectSnapshot( + page, `${variant}-focused-hovered`, page.locator(wrapperLocator) ) diff --git a/frontend/test/storybook/visual-regression/v-checkbox.spec.ts b/frontend/test/storybook/visual-regression/v-checkbox.spec.ts index 366841fe82e..91a5b974e35 100644 --- a/frontend/test/storybook/visual-regression/v-checkbox.spec.ts +++ b/frontend/test/storybook/visual-regression/v-checkbox.spec.ts @@ -1,6 +1,6 @@ import { test } from "@playwright/test" -import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot" +import { expectScreenshotAreaSnapshot } from "~~/test/storybook/utils/expect-snapshot" test.describe.configure({ mode: "parallel" }) @@ -11,40 +11,41 @@ test.describe("v-checkbox", () => { }) test("default", async ({ page }) => { - await expectSnapshot("default", page.locator(".screenshot-area")) + await expectScreenshotAreaSnapshot(page, "default") }) test("hover", async ({ page }) => { - const checkbox = page.locator('input[type="checkbox"]') + const checkbox = page.getByRole("checkbox") await checkbox.hover() - await expectSnapshot("hover", page.locator(".screenshot-area")) + + await expectScreenshotAreaSnapshot(page, "hover") }) test("focused", async ({ page }) => { - const checkbox = page.locator('input[type="checkbox"]') + const checkbox = page.getByRole("checkbox") await checkbox.focus() - await expectSnapshot("focused", page.locator(".screenshot-area")) + await expectScreenshotAreaSnapshot(page, "focused") }) test("disabled", async ({ page }) => { - const checkbox = page.locator('input[type="checkbox"]') + const checkbox = page.getByRole("checkbox") await checkbox.evaluate((checkbox) => { ;(checkbox as HTMLInputElement).disabled = true }) - await expectSnapshot("disabled", page.locator(".screenshot-area")) + await expectScreenshotAreaSnapshot(page, "disabled") }) test("on", async ({ page }) => { const checkbox = page.getByRole("checkbox") await checkbox.click() - await expectSnapshot("on", page.locator(".screenshot-area")) + await expectScreenshotAreaSnapshot(page, "on") }) test("on focused", async ({ page }) => { const checkbox = page.getByRole("checkbox") await checkbox.focus() await page.keyboard.press("Space") - await expectSnapshot("on-focused", page.locator(".screenshot-area")) + await expectScreenshotAreaSnapshot(page, "on-focused") }) test("on disabled", async ({ page }) => { @@ -53,7 +54,7 @@ test.describe("v-checkbox", () => { await checkbox.evaluate((checkbox) => { ;(checkbox as HTMLInputElement).disabled = true }) - await expectSnapshot("on-disabled", page.locator(".screenshot-area")) + await expectScreenshotAreaSnapshot(page, "on-disabled") }) test("on-and-off", async ({ page }) => { @@ -61,7 +62,7 @@ test.describe("v-checkbox", () => { const checkbox = page.getByRole("checkbox") await checkbox.click() await checkbox.click() - await expectSnapshot("default", page.locator(".screenshot-area")) + await expectScreenshotAreaSnapshot(page, "on-and-off") }) }) }) diff --git a/frontend/test/storybook/visual-regression/v-collection-header.spec.ts b/frontend/test/storybook/visual-regression/v-collection-header.spec.ts index 50a59eec76e..e2c922775fd 100644 --- a/frontend/test/storybook/visual-regression/v-collection-header.spec.ts +++ b/frontend/test/storybook/visual-regression/v-collection-header.spec.ts @@ -13,6 +13,7 @@ test.describe("VCollectionHeader", () => { `/iframe.html?id=components-vcollectionheader--all-collections${dirParam(dir)}` ) await expectSnapshot( + page, `VCollectionHeaders-${dir}`, page.locator(".wrapper") ) diff --git a/frontend/test/storybook/visual-regression/v-filter-button.spec.ts b/frontend/test/storybook/visual-regression/v-filter-button.spec.ts index 24e391ec8ee..4640cc8d797 100644 --- a/frontend/test/storybook/visual-regression/v-filter-button.spec.ts +++ b/frontend/test/storybook/visual-regression/v-filter-button.spec.ts @@ -18,6 +18,7 @@ test.describe("VFilterButton", () => { test(`resting, ${filterCount} filters`, async ({ page }) => { await gotoWithArgs(page, { appliedFilters: filterCount }) await expectSnapshot( + page, `filter-button-at-rest-${filterCount}-checked`, page.locator(wrapper) ) @@ -29,6 +30,7 @@ test.describe("VFilterButton", () => { }) await page.locator("button", { hasText: "Filter" }).hover() await expectSnapshot( + page, `filter-button-hovered-${filterCount}-checked`, page.locator(wrapper) ) @@ -38,6 +40,7 @@ test.describe("VFilterButton", () => { await gotoWithArgs(page, { appliedFilters: filterCount }) await page.locator("button", { hasText: "Filter" }).focus() await expectSnapshot( + page, `filter-button-focused-${filterCount}-checked`, page.locator(wrapper) ) @@ -52,6 +55,7 @@ test.describe("VFilterButton", () => { await page.locator("button", { hasText: "Filter" }).focus() await page.locator("button", { hasText: "Filter" }).hover() await expectSnapshot( + page, `filter-button-focused-${filterCount}-checked`, page.locator(wrapper) ) @@ -64,6 +68,7 @@ test.describe("VFilterButton", () => { }) await sleep(500) await expectSnapshot( + page, `filter-button-pressed-${filterCount}-checked`, page.locator(wrapper) ) @@ -76,6 +81,7 @@ test.describe("VFilterButton", () => { }) await page.locator("button", { hasText: "Filter" }).hover() await expectSnapshot( + page, `filter-button-pressed-hovered-${filterCount}-checked`, page.locator(wrapper) ) @@ -88,6 +94,7 @@ test.describe("VFilterButton", () => { }) await page.locator("button", { hasText: "Filter" }).focus() await expectSnapshot( + page, `filter-button-pressed-focused-${filterCount}-checked`, page.locator(wrapper) ) diff --git a/frontend/test/storybook/visual-regression/v-filter-tab.spec.ts b/frontend/test/storybook/visual-regression/v-filter-tab.spec.ts index 96dd547a188..d08431ebeea 100644 --- a/frontend/test/storybook/visual-regression/v-filter-tab.spec.ts +++ b/frontend/test/storybook/visual-regression/v-filter-tab.spec.ts @@ -54,6 +54,7 @@ test.describe("VFilterTab", () => { await focusFiltersTab(page) await expectSnapshot( + page, `filter-tab-focused-${appliedFilterCount}`, page.locator(wrapper) ) @@ -67,6 +68,7 @@ test.describe("VFilterTab", () => { await hoverFiltersTab(page) await expectSnapshot( + page, `filter-tab-focused-hovered-${appliedFilterCount}`, page.locator(wrapper) ) @@ -80,6 +82,7 @@ test.describe("VFilterTab", () => { await goAndWaitForSvg(page, { appliedFilterCount, isSelected }) await expectSnapshot( + page, `filter-tab-resting-${selected}-${appliedFilterCount}`, page.locator(wrapper) ) @@ -92,6 +95,7 @@ test.describe("VFilterTab", () => { await hoverFiltersTab(page) await expectSnapshot( + page, `filter-tab-hovered-${selected}-${appliedFilterCount}`, page.locator(wrapper) ) diff --git a/frontend/test/storybook/visual-regression/v-footer.spec.ts b/frontend/test/storybook/visual-regression/v-footer.spec.ts index 07ab9768599..41133eb3b72 100644 --- a/frontend/test/storybook/visual-regression/v-footer.spec.ts +++ b/frontend/test/storybook/visual-regression/v-footer.spec.ts @@ -29,8 +29,10 @@ test.describe("VFooter", () => { await expect(page.getByRole("combobox").nth(0)).toBeEnabled() await expectSnapshot( - `footer-${footerKind}-${dir}`, - page.locator("footer") + page, + `footer-${footerKind}`, + page.locator("footer"), + { dir } ) }) }) diff --git a/frontend/test/storybook/visual-regression/v-header-internal.spec.ts b/frontend/test/storybook/visual-regression/v-header-internal.spec.ts index 230d1bc148b..f704eebfcca 100644 --- a/frontend/test/storybook/visual-regression/v-header-internal.spec.ts +++ b/frontend/test/storybook/visual-regression/v-header-internal.spec.ts @@ -23,8 +23,10 @@ test.describe("VHeaderInternal", () => { await page.goto(pageUrl(dir)) await page.mouse.move(0, 150) await expectSnapshot( - `desktop-header-internal-${dir}`, - page.locator(headerSelector) + page, + `desktop-header-internal`, + page.locator(headerSelector), + { dir } ) }) }) @@ -42,8 +44,10 @@ test.describe("VHeaderInternal", () => { await page.mouse.move(0, 150) await expectSnapshot( - `mobile-header-internal-closed-${dir}`, - page.locator(headerSelector) + page, + `mobile-header-internal-closed`, + page.locator(headerSelector), + { dir } ) }) }) @@ -57,7 +61,9 @@ test.describe("VHeaderInternal", () => { // To prevent this, move the mouse away. await page.mouse.move(0, 0) - await expectSnapshot(`mobile-header-internal-open-${dir}`, page) + await expectSnapshot(page, `mobile-header-internal-open`, page, { + dir, + }) }) }) }) diff --git a/frontend/test/storybook/visual-regression/v-icon-button.spec.ts b/frontend/test/storybook/visual-regression/v-icon-button.spec.ts index cde6ce9cb59..f026c8a7f5b 100644 --- a/frontend/test/storybook/visual-regression/v-icon-button.spec.ts +++ b/frontend/test/storybook/visual-regression/v-icon-button.spec.ts @@ -12,6 +12,7 @@ test.describe("VIconButton", () => { await expect(page.getByRole("button")).toHaveCount(3) await expect(page.getByRole("button").nth(0)).toBeEnabled() await expectSnapshot( + page, "v-icon-button-sizes", page.locator(".screenshot-area") ) diff --git a/frontend/test/storybook/visual-regression/v-image-cell.spec.ts b/frontend/test/storybook/visual-regression/v-image-cell.spec.ts index 8041728957a..b2c4255e8e8 100644 --- a/frontend/test/storybook/visual-regression/v-image-cell.spec.ts +++ b/frontend/test/storybook/visual-regression/v-image-cell.spec.ts @@ -39,6 +39,7 @@ test.describe("VImageCell", () => { await goAndWaitForImage(page, { aspectRatio: ratio }) await expectSnapshot( + page, `v-image-cell-${ratio}-loaded`, page.locator(screenshotEl) ) @@ -50,6 +51,7 @@ test.describe("VImageCell", () => { await page.focus(imageCell) await expectSnapshot( + page, `v-image-cell-${ratio}-focused`, page.locator(screenshotEl) ) @@ -61,6 +63,7 @@ test.describe("VImageCell", () => { await page.hover(imageCell) await expectSnapshot( + page, `v-image-cell-${ratio}-hovered`, page.locator(screenshotEl) ) @@ -74,6 +77,7 @@ test.describe("VImageCell", () => { await page.locator(imageCell).click() await expectSnapshot( + page, `v-image-cell-${ratio}-focused-hovered`, page.locator(screenshotEl) ) diff --git a/frontend/test/storybook/visual-regression/v-language-select.spec.ts b/frontend/test/storybook/visual-regression/v-language-select.spec.ts index 7d1c704eb59..667b6ed9b45 100644 --- a/frontend/test/storybook/visual-regression/v-language-select.spec.ts +++ b/frontend/test/storybook/visual-regression/v-language-select.spec.ts @@ -7,7 +7,11 @@ test.describe("VLanguageSelect", () => { test("default", async ({ page }) => { await makeGotoWithArgs("components-vlanguageselect--default")(page) // Make sure the component is rendered and hydrated - await expect(page.getByRole("combobox")).toHaveValue("en") - await expectSnapshot("vlanguageselect", page.locator(".screenshot-area")) + await expect(page.getByRole("combobox").nth(0)).toBeEnabled() + await expectSnapshot( + page, + "vlanguageselect", + page.locator(".screenshot-area") + ) }) }) diff --git a/frontend/test/storybook/visual-regression/v-media-license.spec.ts b/frontend/test/storybook/visual-regression/v-media-license.spec.ts index 66749a59116..4e13b506c8e 100644 --- a/frontend/test/storybook/visual-regression/v-media-license.spec.ts +++ b/frontend/test/storybook/visual-regression/v-media-license.spec.ts @@ -31,7 +31,7 @@ test.describe("VMediaLicense", () => { breakpoints.describeMobileAndDesktop(({ expectSnapshot }) => { test(name, async ({ page }) => { await goTo(page, slug) - await expectSnapshot(name, page.locator(".media-attribution")) + await expectSnapshot(page, name, page.locator(".media-attribution")) }) }) } diff --git a/frontend/test/storybook/visual-regression/v-media-reuse.spec.ts b/frontend/test/storybook/visual-regression/v-media-reuse.spec.ts index 926e7647366..a1fef937386 100644 --- a/frontend/test/storybook/visual-regression/v-media-reuse.spec.ts +++ b/frontend/test/storybook/visual-regression/v-media-reuse.spec.ts @@ -37,6 +37,7 @@ test.describe("VMediaReuse", () => { await sleep(500) await expectSnapshot( + page, `media-reuse-${tab.id}-tab-${dir}`, page.locator(".media-reuse") ) diff --git a/frontend/test/storybook/visual-regression/v-notitication-banner.spec.ts b/frontend/test/storybook/visual-regression/v-notitication-banner.spec.ts index 07d6e3e2fbb..a68faecb541 100644 --- a/frontend/test/storybook/visual-regression/v-notitication-banner.spec.ts +++ b/frontend/test/storybook/visual-regression/v-notitication-banner.spec.ts @@ -1,9 +1,9 @@ import { test } from "@playwright/test" -test.describe.configure({ mode: "parallel" }) - import breakpoints from "~~/test/playwright/utils/breakpoints" +test.describe.configure({ mode: "parallel" }) + const natures = ["info", "warning", "error", "success"] as const const variants = ["regular", "dark"] as const @@ -13,8 +13,7 @@ const pageUrl = ( nature: (typeof natures)[number], variant: (typeof variants)[number] ) => { - const url = `${defaultUrl}&args=nature:${nature};variant:${variant}` - return url + return `${defaultUrl}&args=nature:${nature};variant:${variant}` } test.describe("VNotificationBanner", () => { @@ -24,6 +23,7 @@ test.describe("VNotificationBanner", () => { test(`notificationbanner-${nature}-${variant}`, async ({ page }) => { await page.goto(pageUrl(nature, variant)) await expectSnapshot( + page, `notificationbanner-${nature}-${variant}`, page.locator("section") ) diff --git a/frontend/test/storybook/visual-regression/v-safety-wall.spec.ts b/frontend/test/storybook/visual-regression/v-safety-wall.spec.ts index 0410b902b21..4c35c4e26c9 100644 --- a/frontend/test/storybook/visual-regression/v-safety-wall.spec.ts +++ b/frontend/test/storybook/visual-regression/v-safety-wall.spec.ts @@ -17,6 +17,7 @@ test.describe("VSafetyWall", () => { breakpoints.describeEvery(({ expectSnapshot }) => { test("Renders the wall correctly for sensitive media", async ({ page }) => { await expectSnapshot( + page, `v-safetywall-default`, page.locator(safetyWallLocator) ) diff --git a/frontend/test/storybook/visual-regression/v-search-bar-button.spec.ts b/frontend/test/storybook/visual-regression/v-search-bar-button.spec.ts index 9871c32e363..5b57bbcc1b5 100644 --- a/frontend/test/storybook/visual-regression/v-search-bar-button.spec.ts +++ b/frontend/test/storybook/visual-regression/v-search-bar-button.spec.ts @@ -1,4 +1,6 @@ -import { expect, test } from "@playwright/test" +import { test } from "@playwright/test" + +import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot" test.describe.configure({ mode: "parallel" }) const wrapperLocator = ".wrapper" @@ -9,33 +11,43 @@ test.describe("VSearchBarButton", () => { ) }) test("Clear and back buttons resting", async ({ page }) => { - expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({ - name: `clear-back-buttons-resting.png`, - }) + await expectSnapshot( + page, + "clear-and-back-buttons-resting", + page.locator(wrapperLocator) + ) }) test(`Back button hovered`, async ({ page }) => { await page.hover(".wrapper>button:nth-child(1)") - expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({ - name: `back-button-hovered.png`, - }) + await expectSnapshot( + page, + "back-button-hovered", + page.locator(wrapperLocator) + ) }) test(`Back button focused`, async ({ page }) => { await page.focus(".wrapper>button:nth-child(1)") - expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({ - name: `back-button-focused.png`, - }) + await expectSnapshot( + page, + "back-button-focused", + page.locator(wrapperLocator) + ) }) test(`Clear button hovered`, async ({ page }) => { await page.hover(".wrapper>button:nth-child(2)") - expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({ - name: `clear-button-hovered.png`, - }) + await expectSnapshot( + page, + "clear-button-hovered", + page.locator(wrapperLocator) + ) }) test(`Clear button focused`, async ({ page }) => { await page.hover(".wrapper>button:nth-child(2)") - expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({ - name: `clear-button-focused.png`, - }) + await expectSnapshot( + page, + "clear-button-focused", + page.locator(wrapperLocator) + ) }) }) diff --git a/frontend/test/storybook/visual-regression/v-search-type-button.spec.ts b/frontend/test/storybook/visual-regression/v-search-type-button.spec.ts index a17d5105749..c01222ad6cb 100644 --- a/frontend/test/storybook/visual-regression/v-search-type-button.spec.ts +++ b/frontend/test/storybook/visual-regression/v-search-type-button.spec.ts @@ -38,6 +38,7 @@ test.describe("VSearchTypeButton", () => { await goAndWaitForSvg(page, url) await expectSnapshot( + page, `${snapshotName}-at-rest`, getSearchTypeButton(page) ) @@ -49,6 +50,7 @@ test.describe("VSearchTypeButton", () => { await getSearchTypeButton(page).hover() await expectSnapshot( + page, `${snapshotName}-hovered`, getSearchTypeButton(page) ) diff --git a/frontend/test/storybook/visual-regression/v-search-types.spec.ts b/frontend/test/storybook/visual-regression/v-search-types.spec.ts index adf72fcf966..452dcad41f7 100644 --- a/frontend/test/storybook/visual-regression/v-search-types.spec.ts +++ b/frontend/test/storybook/visual-regression/v-search-types.spec.ts @@ -17,17 +17,17 @@ test.describe("VSearchTypes", () => { await expect(page.getByRole("radio").nth(0)).toBeEnabled() }) test("medium resting", async ({ page }) => { - await expectSnapshot("v-search-types-medium-at-rest", page) + await expectSnapshot(page, "v-search-types-medium-at-rest", page) }) test("medium images hovered", async ({ page }) => { await page.hover(audioButtonLocator) - await expectSnapshot("v-search-types-medium-images-hovered", page) + await expectSnapshot(page, "v-search-types-medium-images-hovered", page) }) test("medium focused", async ({ page }) => { await page.keyboard.press("Tab") - await expectSnapshot("v-search-types-medium-focused", page) + await expectSnapshot(page, "v-search-types-medium-focused", page) }) }) @@ -39,17 +39,17 @@ test.describe("VSearchTypes", () => { }) test("small resting", async ({ page }) => { - await expectSnapshot("v-search-types-small-at-rest", page) + await expectSnapshot(page, "v-search-types-small-at-rest", page) }) test("small images hovered", async ({ page }) => { await page.hover(audioButtonLocator) - await expectSnapshot("v-search-types-small-images-hovered", page) + await expectSnapshot(page, "v-search-types-small-images-hovered", page) }) test("small focused", async ({ page }) => { await page.keyboard.press("Tab") - await expectSnapshot("v-search-types-small-focused", page) + await expectSnapshot(page, "v-search-types-small-focused", page) }) }) }) diff --git a/frontend/test/storybook/visual-regression/v-select-field.spec.ts b/frontend/test/storybook/visual-regression/v-select-field.spec.ts index 40707cb3a73..2525d9b2b1e 100644 --- a/frontend/test/storybook/visual-regression/v-select-field.spec.ts +++ b/frontend/test/storybook/visual-regression/v-select-field.spec.ts @@ -6,8 +6,9 @@ import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot" for (const slug of ["default", "with-icon", "without-border"]) { test(`vselectfield-${slug}`, async ({ page }) => { await makeGotoWithArgs(`components-vselectfield--${slug}`)(page) - await expect(page.getByRole("combobox")).toBeEnabled() + await expect(page.getByRole("combobox").nth(0)).toBeEnabled() await expectSnapshot( + page, `vselectfield-${slug}`, page.locator(".screenshot-area") ) diff --git a/packages/js/eslint-plugin/src/configs/index.ts b/packages/js/eslint-plugin/src/configs/index.ts index 1d375d25ce0..34accbf01e7 100644 --- a/packages/js/eslint-plugin/src/configs/index.ts +++ b/packages/js/eslint-plugin/src/configs/index.ts @@ -102,6 +102,7 @@ export const project: TSESLint.Linter.ConfigType = { "expectEventPayloadToMatch", // Shared assertion for visual regression tests "expectSnapshot", + "expectScreenshotAreaSnapshot", ], }, ],