diff --git a/pages/app/app-context.tsx b/pages/app/app-context.tsx index 906041e..e27477b 100644 --- a/pages/app/app-context.tsx +++ b/pages/app/app-context.tsx @@ -13,6 +13,7 @@ interface AppUrlParams { direction: "ltr" | "rtl"; motionDisabled: boolean; i18n: boolean; + screenshotMode: boolean; } export interface AppContextType { @@ -29,6 +30,7 @@ const appContextDefaults: AppContextType = { direction: "ltr", motionDisabled: false, i18n: true, + screenshotMode: false, }, setUrlParams: () => {}, }; diff --git a/pages/app/screenshot-area.module.css b/pages/app/screenshot-area.module.css new file mode 100644 index 0000000..7dd439c --- /dev/null +++ b/pages/app/screenshot-area.module.css @@ -0,0 +1,17 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +/* + Spinner animations do not follow our general motion configuration, we need to disable them explicitly to get stable + screenshot testing results +*/ +.no-animation { + *, + *:before, + *:after { + animation: none !important; + transition: none !important; + } +} diff --git a/pages/app/screenshot-area.tsx b/pages/app/screenshot-area.tsx index a7c83fa..ec3208b 100644 --- a/pages/app/screenshot-area.tsx +++ b/pages/app/screenshot-area.tsx @@ -1,8 +1,14 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import { ReactNode } from "react"; +import { ReactNode, useContext } from "react"; +import clsx from "clsx"; + +import AppContext from "./app-context"; + +import styles from "./screenshot-area.module.css"; export function ScreenshotArea({ children }: { children: ReactNode }) { - return
{children}
; + const { urlParams } = useContext(AppContext); + return
{children}
; } diff --git a/test/utils.ts b/test/utils.ts index 8e7bc11..4df03d6 100644 --- a/test/utils.ts +++ b/test/utils.ts @@ -13,7 +13,7 @@ export function setupTest

}> test: (page: P) => Promise, ) { return useBrowser(windowSize, async (browser) => { - await browser.url(url); + await browser.url(`${url}?screenshotMode=true`); const page = new PageClass(browser); await page.waitForVisible("main");