basics/hover.js cannot take snapshot without sleep for some time

[keegoo]

Hi Team, nice examples!

basics/hover.js example

For me I have to add a sleep() function to make sure await page.screenshot({ path: 'hover.png' }) can capture the hover effect.

const puppeteer = require('puppeteer');

function sleep(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms)
  })
}

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://soundcloud.com/')
  await page.hover('.playableTile__artwork')
  await sleep(1000)  // <-- sleep 
  await page.screenshot({ path: 'hover.png' })
  await browser.close()
})()

Is it only me have this issue? Is there anyway I can get rid of sleep() ?

Thanks!

[without sleep]

[with sleep]

[tnolet]

@keegoo this is probably due to fade in animations. I get it on a lot of sites that have this behaviour. sleep() can work, but maybe using the .waitForSelector() with the "visible" flag can also work, i.e.

await page.waitForSelector('.play-button-bla-bla-bla-class', { visible: true })

did not test this yet...