[Feature] add `locator.waitForTransition()`

[janosh]

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?

[alvipeo]

I need to have this feature too. Thanks for the hints!

[yury-s]

We can add a sugar API for this if there is enough interest, leaving this request open to see if there is enough demand.

[alvipeo]

Interestingly, I tried yesterday to use the waitForAnimationEnd() helper and it didn't work for angular material sidenav... Either I did not really understand the case or it doesn't work in that case. I ended up with a simple 400 msec timeout (just to be sure the animation is over). And yes, this is probably the best solution in my case as I'm not testing the animation itself.

[JeremieBourque1]

I would also find this feature useful

[skysantoroa]

Does this work with elements animated with react-spring?

[niyarlatotep]

+1 to add this feature

[kawaii-flesh]

+1

[bkfarnsworth]

+1, copying the helper into my code now to use in the meantime

[Piero87]

+1

[juniorerico]

+1

[MrCliff]

+1

[tomdelahaba]

+1 for this functionality, it should help us a lot avoiding evaluating timeouts / waits...

[pavelfeldman]

Please +1 the issue on top, that's what is used when we are prioritizing the issues.

[denkorz]

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?

In my case animations is empty, but if I do this:

await this.page.evaluate('$.timers.length')

it works like that:

2 // $.timers.length
2
2
2
{ x: 243, y: 165, width: 349, height: 24 } // my element bounds
{ x: 243, y: 165, width: 349, height: 24 }
{ x: 243, y: 165, width: 349, height: 24 }
{ x: 243, y: 169, width: 349, height: 24 }
{ x: 243, y: 173, width: 349, height: 24 }
{ x: 243, y: 177, width: 349, height: 24 }
2
2
2
2
2
2
2
{ x: 243, y: 189, width: 349, height: 24 }
{ x: 243, y: 190, width: 349, height: 24 }
{ x: 243, y: 192, width: 349, height: 24 }
{ x: 243, y: 192, width: 349, height: 24 }
{ x: 243, y: 192, width: 349, height: 24 }
{ x: 243, y: 192, width: 349, height: 24 }
{ x: 243, y: 192, width: 349, height: 24 }
{ x: 243, y: 192, width: 349, height: 24 }
{ x: 243, y: 192, width: 349, height: 24 }
{ x: 243, y: 192, width: 349, height: 24 }
{ x: 243, y: 192, width: 349, height: 24 }
{ x: 243, y: 192, width: 349, height: 24 }
{ x: 243, y: 192, width: 349, height: 24 }
{ x: 243, y: 192, width: 349, height: 24 }
{ x: 243, y: 192, width: 349, height: 24 }
0
0
0
0

[janosh]

@yury-s This issue sits at 20 upvotes. Curious what the threshold for entry is?

[manojatlas]

+1 for this feature. As we face this issue frequently.

[VikramSinghMTL]

+1

[sirganya]

+1

[ValorHeart]

+1

[381181295]

+1

[AlexKFU]

+1

[remkoboschker]

+1

[ngocdd]

+1 I think this very necessary feature it's helps binding wait instead of blind wait

[RuanAlesi]

+1

[theniceangel]

+1

[amit-ash]

+1

[sajaghori]

+1

[elimccoy]

+1