Skip to content

feat: introduce disableAnimations option for screenshots#11870

Merged
aslushnikov merged 4 commits into
microsoft:mainfrom
aslushnikov:stop-css-animations-option
Feb 9, 2022
Merged

feat: introduce disableAnimations option for screenshots#11870
aslushnikov merged 4 commits into
microsoft:mainfrom
aslushnikov:stop-css-animations-option

Conversation

@aslushnikov
Copy link
Copy Markdown
Contributor

@aslushnikov aslushnikov commented Feb 4, 2022

This option stops all kinds of CSS animations while doing screenshot:

  • CSS animations
  • CSS transitions
  • Web Animations

Animations get different treatment depending on animation duration:

  • finite animations are fast-forwarded to its end, issuing the
    transitionend event.
  • Infinite animations are resetted to its beginning, and then
    resumed after the screenshot.

References #9938, fixes #11912

@aslushnikov aslushnikov changed the title feat: introduce stopCSSAnimations option feat: introduce stopCSSAnimations option for screenshots Feb 4, 2022
@aslushnikov aslushnikov changed the title feat: introduce stopCSSAnimations option for screenshots feat: introduce disableAnimations option for screenshots Feb 5, 2022
When true, takes a screenshot of the full scrollable page, instead of the currently visible viewport. Defaults to
`false`.

### option: Page.screenshot.disableAnimations
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's follow up with moving screenshot options to params.md?

Comment thread tests/page/page-screenshot.spec.ts Outdated
Comment thread tests/page/page-screenshot.spec.ts Outdated
Comment thread packages/playwright-core/src/server/screenshotter.ts
Comment thread packages/playwright-core/src/server/screenshotter.ts Outdated
Comment thread packages/playwright-core/src/server/screenshotter.ts Outdated
Comment thread tests/page/page-screenshot.spec.ts Outdated
Comment thread packages/playwright-core/src/server/screenshotter.ts Outdated
Comment thread packages/playwright-core/src/server/screenshotter.ts
Comment thread packages/playwright-core/src/server/screenshotter.ts Outdated
Comment thread tests/page/page-screenshot.spec.ts Outdated
Comment thread tests/page/page-screenshot.spec.ts Outdated
This option stops all kinds of CSS animations while doing screenshot:
- CSS animations
- CSS transitions
- Web Animations

Animations get different treatment depending on animation duration:
- finite animations are fast-forwarded to its end, issuing the
  `transitionend` event.
- Infinite animations are resetted to its beginning, and then
  resumed after the screenshot.

References microsoft#9938
@aslushnikov aslushnikov force-pushed the stop-css-animations-option branch from 33b0980 to 3397abf Compare February 9, 2022 17:48
Comment thread tests/page/page-screenshot.spec.ts Outdated
Comment thread packages/playwright-core/src/server/screenshotter.ts Outdated
@aslushnikov aslushnikov added the CQ1 label Feb 9, 2022
@aslushnikov aslushnikov merged commit 6f87955 into microsoft:main Feb 9, 2022
@aslushnikov aslushnikov deleted the stop-css-animations-option branch February 9, 2022 20:52
@dodas
Copy link
Copy Markdown

dodas commented Jan 19, 2023

hey, did this get reverted or something? can't find find option in the current code / release.

@dgozman
Copy link
Copy Markdown
Collaborator

dgozman commented Jan 19, 2023

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] disable CSS animations when making screenshots

4 participants