test: Add visual regression tests for app layout

test/definitions/index.ts

@@ -5,7 +5,34 @@
 // Import them here manually to form the full test suite.
 import { TestSuite } from './types';
 export { TestSuite, TestDefinition, ScreenshotType, ScreenshotTestConfiguration } from './types';
-import actionCard from './visual/action-card';
-import alert from './visual/alert';
 
-export const allSuites: TestSuite[] = [actionCard, alert];
+import actionCardSuite from './visual/action-card';
+import alertSuite from './visual/alert';
+import appLayoutGeneral from './visual/app-layout';
+import appLayoutContentPaddings from './visual/app-layout-content-paddings';
+import appLayoutDrawers from './visual/app-layout-drawers';
+import appLayoutFlashbar from './visual/app-layout-flashbar';
+import appLayoutHeader from './visual/app-layout-header';
+import appLayoutMulti from './visual/app-layout-multi';
+import appLayoutResponsive from './visual/app-layout-responsive';
+import appLayoutStickyTableHeaderSplitPanel from './visual/app-layout-sticky-table-header-split-panel';
+import appLayoutToolbar from './visual/app-layout-toolbar';
+import appLayoutZIndex from './visual/app-layout-z-index';
+
+// Per-component exports (grouped by component)
+export const actionCard: TestSuite[] = [actionCardSuite];
+export const alert: TestSuite[] = [alertSuite];
+export const appLayout: TestSuite[] = [
+  appLayoutGeneral,
+  appLayoutContentPaddings,
+  appLayoutDrawers,
+  appLayoutFlashbar,
+  appLayoutHeader,
+  appLayoutMulti,
+  appLayoutResponsive,
+  appLayoutStickyTableHeaderSplitPanel,
+  appLayoutToolbar,
+  appLayoutZIndex,
+];
+
+export const allSuites: TestSuite[] = [...actionCard, ...alert, ...appLayout];

test/definitions/types.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { Browser } from 'webdriverio';
 
-import type { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import type { ScreenshotBasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
 
 import type createWrapper from '../../lib/components/test-utils/selectors';
 
@@ -23,7 +23,7 @@ export interface TestDefinition {
   screenshotType: ScreenshotType;
   queryParams?: Record<string, string>;
   configuration?: ScreenshotTestConfiguration;
-  setup?: ({ page, wrapper, browser }: { page: BasePageObject; wrapper: Wrapper; browser?: Browser }) => void;
+  setup?: ({ page, wrapper, browser }: { page: ScreenshotBasePageObject; wrapper: Wrapper; browser?: Browser }) => void;
 }
 
 export interface TestSuite {

test/definitions/visual/app-layout-content-paddings.ts

@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { TestSuite } from '../types';
+
+const suite: TestSuite = {
+  description: 'Content paddings',
+  componentName: 'app-layout',
+  tests: [
+    ...(['true', 'false'] as const).flatMap(toolsEnabled =>
+      (['true', 'false'] as const).flatMap(splitPanelEnabled =>
+        (['bottom', 'side'] as const).map(splitPanelPosition => ({
+          description: `toolsEnabled=${toolsEnabled} splitPanelEnabled=${splitPanelEnabled} splitPanelPosition=${splitPanelPosition}`,
+          path: 'app-layout/with-split-panel',
+          screenshotType: 'viewport' as const,
+          queryParams: { toolsEnabled, splitPanelEnabled, splitPanelPosition },
+        }))
+      )
+    ),
+    ...[1500, 600].map(width => ({
+      description: `with split panel and disabled content paddings - width=${width}`,
+      path: 'app-layout/disable-paddings-with-split-panel',
+      screenshotType: 'viewport' as const,
+      configuration: { width },
+      queryParams: { splitPanelOpen: 'true', splitPanelPosition: 'side' },
+    })),
+  ],
+};
+
+export default suite;

test/definitions/visual/app-layout-drawers.ts

@@ -0,0 +1,69 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { TestSuite } from '../types';
+
+const suite: TestSuite = {
+  description: 'Drawers',
+  componentName: 'app-layout',
+  tests: [
+    {
+      description: 'popover can be displayed outside split panel',
+      path: 'app-layout/with-full-page-table-and-split-panel',
+      screenshotType: 'viewport',
+      queryParams: { splitPanelPosition: 'side' },
+      setup: async ({ page, wrapper }) => {
+        await page.click(wrapper.findPopover('[data-testid="split-panel"]').toSelector());
+      },
+    },
+    {
+      description: 'popover can be displayed outside help panel',
+      path: 'app-layout/with-full-page-table-and-split-panel',
+      screenshotType: 'viewport',
+      setup: async ({ page, wrapper }) => {
+        await page.click(wrapper.findAppLayout().findToolsToggle().toSelector());
+        await page.click(wrapper.findPopover('[data-testid="help-panel"]').toSelector());
+      },
+    },
+    {
+      description: 'with split panel',
+      path: 'app-layout/with-drawers',
+      screenshotType: 'viewport',
+      setup: async ({ page, wrapper }) => {
+        await page.click(wrapper.findAppLayout().findDrawerTriggerById('pro-help').toSelector());
+      },
+    },
+    {
+      description: 'with tooltip on hover',
+      path: 'app-layout/with-drawers',
+      screenshotType: 'viewport',
+      setup: async ({ page, wrapper }) => {
+        await page.hoverElement(wrapper.findAppLayout().findDrawerTriggerById('pro-help').toSelector());
+      },
+    },
+    {
+      description: 'with custom scrollable drawer content',
+      path: 'app-layout/with-drawers-scrollable',
+      screenshotType: 'viewport',
+      queryParams: { sideNavFill: 'false' },
+      setup: async ({ page, wrapper }) => {
+        await page.click(wrapper.findAppLayout().findDrawerTriggerById('chat').toSelector());
+      },
+    },
+    {
+      description: 'with full height drawer content',
+      path: 'app-layout/with-drawers-scrollable',
+      screenshotType: 'viewport',
+      queryParams: { sideNavFill: 'true' },
+      setup: async ({ page }) => {
+        await page.click('[data-testid="open-global-drawer-button"]');
+      },
+    },
+    {
+      description: 'with only global drawers',
+      path: 'app-layout/runtime-drawers-with-only-global',
+      screenshotType: 'viewport',
+    },
+  ],
+};
+
+export default suite;

test/definitions/visual/app-layout-flashbar.ts

@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { TestSuite } from '../types';
+
+const suite: TestSuite = {
+  description: 'Flashbar',
+  componentName: 'app-layout',
+  tests: [true, false].flatMap(disableContentPaddings =>
+    [true, false].flatMap(stickyNotifications =>
+      [true, false].flatMap(stickyTableHeader =>
+        [true, false].map(stackNotifications => ({
+          description: `disableContentPaddings: ${disableContentPaddings}, stickyNotifications: ${stickyNotifications}, stickyTableHeader: ${stickyTableHeader}, stackNotifications: ${stackNotifications}`,
+          path: 'app-layout/with-stacked-notifications-and-table',
+          screenshotType: 'screenshotArea' as const,
+          configuration: { width: 1280, height: 900 },
+          setup: async ({ page }) => {
+            if (!disableContentPaddings) {
+              await page.click('[data-id="toggle-content-paddings"]');
+            }
+            if (stickyNotifications) {
+              await page.click('[data-id="toggle-sticky-notifications"]');
+            }
+            if (!stickyTableHeader) {
+              await page.click('[data-id="toggle-sticky-table-header"]');
+            }
+            if (!stackNotifications) {
+              await page.click('[data-id="toggle-stack-items"]');
+            }
+            await page.click('[data-id="add-notification"]');
+            await page.click('[data-id="add-notification"]');
+          },
+        }))
+      )
+    )
+  ),
+};
+
+export default suite;

test/definitions/visual/app-layout-header.ts

@@ -0,0 +1,92 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { TestDefinition, TestSuite } from '../types';
+
+const suite: TestSuite = {
+  description: 'Headers',
+  componentName: 'app-layout',
+  tests: [
+    // ── Headers ───────────────────────────────────────────────────────────
+    {
+      description: 'Headers',
+      tests: [600, 1280].flatMap(width => [
+        {
+          description: `alignment with full-page table (${width}px)`,
+          path: 'app-layout/with-table',
+          screenshotType: 'viewport' as const,
+          configuration: { width },
+        },
+        {
+          description: `alignment with full-page table in sticky state (${width}px)`,
+          path: 'app-layout/with-table',
+          screenshotType: 'viewport' as const,
+          configuration: { width },
+          setup: async ({ page }) => {
+            await page.windowScrollTo({ top: 200 });
+          },
+        },
+        {
+          description: `alignment with full-page table in sticky state with sticky notifications (${width}px)`,
+          path: 'app-layout/with-table',
+          screenshotType: 'viewport' as const,
+          configuration: { width },
+          queryParams: { stickyNotifications: 'true' },
+          setup: async ({ page }) => {
+            await page.windowScrollTo({ top: 200 });
+          },
+        },
+        {
+          description: `high contrast header variant in landing page (${width}px)`,
+          path: 'app-layout/landing-page',
+          screenshotType: 'viewport' as const,
+          configuration: { width },
+        },
+        {
+          description: `high contrast header variant in landing page with notification dismissed (${width}px)`,
+          path: 'app-layout/landing-page',
+          screenshotType: 'viewport' as const,
+          configuration: { width },
+          setup: async ({ page, wrapper }) => {
+            await page.click(wrapper.findFlashbar().findItems().get(1).findDismissButton().toSelector());
+          },
+        },
+      ]),
+    },
+    // ── High contrast header variant ──────────────────────────────────────
+    {
+      description: 'High contrast header variant',
+      tests: [
+        ...[1400, 600].flatMap(width => [
+          {
+            description: `with breadcrumbs and notifications at ${width}px`,
+            path: 'app-layout/high-contrast-header-variant',
+            screenshotType: 'screenshotArea' as const,
+            configuration: { width },
+            queryParams: { hasBreadcrumbs: 'true', hasNotifications: 'true', hasContainer: 'true' },
+          } as TestDefinition,
+          {
+            description: `without overlap at ${width}px`,
+            path: 'app-layout/high-contrast-header-variant',
+            screenshotType: 'screenshotArea' as const,
+            configuration: { width },
+            queryParams: { disableOverlap: 'true' },
+          } as TestDefinition,
+          {
+            description: `with content layout at ${width}px`,
+            path: 'app-layout/high-contrast-header-variant',
+            screenshotType: 'screenshotArea' as const,
+            configuration: { width },
+            queryParams: {
+              hasBreadcrumbs: 'true',
+              hasNotifications: 'true',
+              hasContainer: 'true',
+              hasContentLayout: 'true',
+            },
+          } as TestDefinition,
+        ]),
+      ],
+    },
+  ],
+};
+
+export default suite;

test/definitions/visual/app-layout-multi.ts

@@ -0,0 +1,24 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { TestSuite } from '../types';
+
+const suite: TestSuite = {
+  description: 'Multiple instances',
+  componentName: 'app-layout',
+  tests: [600, 1280].flatMap(width => [
+    {
+      description: `simple (${width}px)`,
+      path: 'app-layout/multi-layout-simple',
+      screenshotType: 'viewport' as const,
+      configuration: { width },
+    },
+    {
+      description: `iframe (${width}px)`,
+      path: 'app-layout/multi-layout-iframe',
+      screenshotType: 'viewport' as const,
+      configuration: { width },
+    },
+  ]),
+};
+
+export default suite;