[Feature] add `locator.waitForTransition()`

I’d like to test computedStyles and visibility after some CSS transition (triggered by user input) finishes. From https://github.com/microsoft/playwright/issues/4055, it seems this is a common but unsupported use case.

const dropdown = await page.locator('.dropdown').

closeDropdown()
await dropdown.waitForTransition() // waitForElementState('stable') doesn't work if the element stays in place

expect(dropdown).toBeHidden()

[yury-s]

You can probably use getAnimations and check if all/some of the animations have finished. Something like this:

const dropdown = await page.locator('.dropdown').

closeDropdown()
await dropdown.evaluate(e => Promise.all(e.getAnimations({ subtree: true }).map(animation => animation.finished)));

expect(dropdown).toBeHidden()

Will that work for you?

[janosh]

Wonderful, that does exactly what I need!

I use it in several places so wrapped it in a waitForAnimationEnd helper function:

import type { Page } from '@playwright/test'

function waitForAnimationEnd(page: Page, selector: string) {
  return page
    .locator(selector)
    .evaluate((element) =>
      Promise.all(
        element
          .getAnimations()
          .map((animation) => animation.finished)
      )
    )
}


test(`dropdown is hidden when reaching maxSelect items`, async ({ page }) => {
  await wait_for_animation_end(page, `div.dropdown`)

  expect(await page.locator(`div.dropdown`)).toBeHidden()
  expect(await page.getAttribute(`div.dropdown`, `class`)).toContain(`hidden`)
})

Would it make sense to have a waitForAnimationEnd method in @playwright/test?