chore: Disable animations when taking screenshots (#96)

Author: jperals

pages/app/app-context.tsx

@@ -13,6 +13,7 @@ interface AppUrlParams {
   direction: "ltr" | "rtl";
   motionDisabled: boolean;
   i18n: boolean;
+  screenshotMode: boolean;
 }
 
 export interface AppContextType<T = unknown> {
@@ -29,6 +30,7 @@ const appContextDefaults: AppContextType = {
     direction: "ltr",
     motionDisabled: false,
     i18n: true,
+    screenshotMode: false,
   },
   setUrlParams: () => {},
 };

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;
+  }
+}

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 <div className="screenshot-area">{children}</div>;
+  const { urlParams } = useContext(AppContext);
+  return <div className={clsx("screenshot-area", urlParams.screenshotMode && styles["no-animation"])}>{children}</div>;
 }

test/utils.ts

@@ -13,7 +13,7 @@ export function setupTest<P extends BasePageObject & { init?(): Promise<void> }>
   test: (page: P) => Promise<void>,
 ) {
   return useBrowser(windowSize, async (browser) => {
-    await browser.url(url);
+    await browser.url(`${url}?screenshotMode=true`);
     const page = new PageClass(browser);
     await page.waitForVisible("main");