diff --git a/pages/copy-to-clipboard/motion.page.tsx b/pages/copy-to-clipboard/motion.page.tsx index a4a1067752..5285248e06 100644 --- a/pages/copy-to-clipboard/motion.page.tsx +++ b/pages/copy-to-clipboard/motion.page.tsx @@ -37,7 +37,8 @@ export default function CopyToClipboardMotionPage() { Copy fails } - screenshotArea={{}} + // Extra space so the popovers around the first triggers are inside the screenshot area. + screenshotArea={{ style: { paddingBlockStart: 60, paddingInlineStart: 60 } }} > `[data-testid="${testId}"] button`; const suite: TestSuite = { description: 'CopyToClipboard', @@ -21,6 +24,33 @@ const suite: TestSuite = { await page.scrollIntoView('[data-testid="scroll-me"]'); }, }, + // One Theme swaps the copy glyph for a status glyph after a copy; capture that end state while it is held. + ...['copy-button', 'copy-icon', 'copy-inline'].flatMap( + testId => + [ + { + description: `One Theme glyph swap - ${testId} after successful copy`, + path: motionPath, + screenshotType: 'screenshotArea', + queryParams: { theme: 'one-theme' }, + setup: async ({ page }) => { + await page.click(triggerSelector(testId)); + // Wait out the popover's settle animation so it is captured at rest. + await page.waitForJsTimers(300); + }, + }, + { + description: `One Theme glyph swap - ${testId} after failed copy`, + path: motionPath, + screenshotType: 'screenshotArea', + queryParams: { theme: 'one-theme', copyFails: 'true' }, + setup: async ({ page }) => { + await page.click(triggerSelector(testId)); + await page.waitForJsTimers(300); + }, + }, + ] as TestDefinition[] + ), ], };