[Feature] Add waitForAnimation

Perhaps I have misunderstood the existing API, but I’ve found it tricky to wait reliably for elements with animations (e.g. a fade-in using opacity).

I saw a solution to this problem using Puppeteer on Stack Overflow and successfully applied the same pattern in my Playwright tests (see code below).

export const waitForAnimation = async (frame, selector) => {
  return frame.$eval(selector, el => new Promise((res, _) => {
    const onEnd = () => {
      el.removeEventListener('animationend', onEnd)
      res()
    }
    el.addEventListener("animationend", onEnd)
  }))
}
// Usage
await waitForAnimation(frame, 'div >> "Look at this div's fade-in animation!"')

But ideally there could be an API resembling waitForSelector:

frame.waitForAnimation('div >> "Look at this div's fade-in animation!"')

ElementHandle.waitForElementState("stable") looked like it could work for this purpose, but on closer reading it sounds like this will only work for animations which affect the element’s bounding box (so not for opacity)

Again, pardon my ignorance if the API already handles animations/transitions with another method, but otherwise this seemed like a fairly common use case that is reliably solved with event listeners.

[janosh]

@aslushnikov I think this issue should remain open for now. What about e2e testing? The OP was not concerned with screenshots it seems to me. In my case, I need to test computedStyles on an element after its transition following user input has finished.

[aslushnikov]

Everybody: the disableAnimations option has landed on @playwright/test@next for page.screenshot, locator.screenshot and elementHandle.screenshot. This should stop all the CSS animations and transitions; please give it a try!