Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[code-infra] Try disabling animations when taking screenshots #42537

Merged
merged 5 commits into from
Jun 14, 2024
Merged

[code-infra] Try disabling animations when taking screenshots #42537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
218bdb1
Try disabling animations
Janpot Jun 5, 2024
b155b39
Use reduceMotion
Janpot Jun 5, 2024
9484462
revert spring
Janpot Jun 6, 2024
57dff20
Merge branch 'next' into disable-animations
Janpot Jun 13, 2024
7158887
add back
Janpot Jun 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions docs/scripts/generateTemplateScreenshots.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ const names = new Set(process.argv.slice(2));
// eslint-disable-next-line no-console
console.info('Host:', host);
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1600, height: 800 } });
const page = await browser.newPage({
viewport: { width: 1600, height: 800 },
reducedMotion: 'reduce',
});

const files = await fs.readdir(
path.join(process.cwd(), 'docs/pages/joy-ui/getting-started/templates'),
Expand All @@ -40,14 +43,17 @@ const names = new Set(process.argv.slice(2));
const filePath = `${directory}${aUrl.replace(/\/$/, '')}.jpg`;
// eslint-disable-next-line no-console
console.info('Saving screenshot to:', filePath);
await page.screenshot({ path: filePath });
await page.screenshot({ path: filePath, animations: 'disabled' });

// capture dark mode
const toggle = await page.$('#toggle-mode');
if (toggle) {
await page.click('#toggle-mode');
await page.reload({ waitUntil: 'networkidle' });
await page.screenshot({ path: filePath.replace('.jpg', '-dark.jpg') });
await page.screenshot({
path: filePath.replace('.jpg', '-dark.jpg'),
animations: 'disabled',
});

await page.click('#toggle-mode'); // switch back to light
}
Expand Down
11 changes: 9 additions & 2 deletions test/regressions/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ async function main() {
});
// reuse viewport from `vrtest`
// https://github.com/nathanmarks/vrtest/blob/1185b852a6c1813cedf5d81f6d6843d9a241c1ce/src/server/runner.js#L44
const page = await browser.newPage({ viewport: { width: 1000, height: 700 } });
const page = await browser.newPage({
viewport: { width: 1000, height: 700 },
reducedMotion: 'reduce',
});

// Block images since they slow down tests (need download).
// They're also most likely decorative for documentation demos
Expand Down Expand Up @@ -70,7 +73,11 @@ async function main() {
const explicitScreenshotTarget = await page.$('[data-testid="screenshot-target"]');
const screenshotTarget = explicitScreenshotTarget || testcase;

await screenshotTarget.screenshot({ path: screenshotPath, type: 'png' });
await screenshotTarget.screenshot({
path: screenshotPath,
type: 'png',
animations: 'disabled',
});
}

// prepare screenshots
Expand Down