puppeteer: how to wait until an element is visible?

Question

I would like to know if I can tell puppeteer to wait until an element is displayed.

const inputValidate = await page.$('input[value=validate]');
await inputValidate.click()
        
// I want to do something like that 
waitElemenentVisble('.btnNext ')

const btnNext = await page.$('.btnNext');
await btnNext.click();

Is there any way I can accomplish this?

Note about modals, just in case (I know this wasn't asked, but I feel a common enough pitfall): element visibility with modals that fade in/out is tricky. An element can be visible, but not yet clickable due to modal opacity etc. You can either disable transitions for test, or just register shown/hidden hooks, write a boolean variable on window, and wait for the right value in tests around modal interactions. Saves lots of flakes. — ron, Oct 24 '20 at 20:27

Ahmed Can Unbay · Accepted Answer · 2023-01-28T10:47:20.020

114

I think you can use page.waitForSelector(selector[, options]) function for that purpose.

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {

   const browser = await puppeteer.launch({executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe", headless: false});
   const page = await browser.newPage();
   await page.setUserAgent(options.agent);
   await page.goto("https://www.url.net", {timeout: 60000, waitUntil: 'domcontentloaded'});
   
   page
    .waitForSelector('#myId')
    .then(() => console.log('got it'));
    browser.close();
});

To check the options avaible, please see the github link.

edited Jan 28 '23 at 10:47

answered Sep 09 '17 at 23:25

Ahmed Can Unbay

2,694
2
16
33

How can I do the same for `xpath`? `page.waitForSelector` only works with `css` selector? – joy Jan 23 '18 at 20:07
2

`waitForXPath()` ? – Gilles Quénot May 16 '18 at 10:03
@turmuka, you may want to update your code to add `browser.close()` in the `then` block; as it stands, your code will likely close the browser before the `console.log` – JamieJag Jun 06 '18 at 12:26
1

@joy, you could just use `page.waitFor` which is very versatile – JamieJag Jun 06 '18 at 12:27
19

how is this a good answer? the code snippet doesn't even go a web page! – shafeen Jul 01 '18 at 18:01
4

@shafeen I proposed an edit for the snippet to work, but it still hasn't been accepted yet :/ I however think the snippet is still relevant, as it demonstrates how `page.waitForSelector` can be used – Nino Filiu Dec 20 '18 at 14:23
If you cant to achieve the same but wait for an element to be enabled you can use `page.waitForSelector('#myId:enabled')` – JorgeGarza Jul 22 '19 at 01:47
@JamieJag is right about the `browser.close()`. You could also just be consistent with async/await and not use Promises. – Nickofthyme Oct 04 '19 at 16:24
1

Example code not tested and missing url – Gabriel Rodriguez Dec 28 '21 at 17:04

score 76 · Answer 2 · edited Sep 16 '22 at 14:36

76

If you want to ensure the element is actually visible, you have to use

await page.waitForSelector('#myId', {visible: true})

Otherwise you are just looking for the element in the DOM and not checking for visibility.

edited Sep 16 '22 at 14:36

andromeda

4,433
5
32
42

answered Mar 17 '19 at 22:16

finn

1,155
8
9

5

In my case I needed the opposite which is `page.waitForSelector('#myId', {hidden: true})` to wait until a loader was hidden before continuing – Chris Magnuson May 16 '19 at 17:36
This does not work if the element has height/width 0. Check this answer for that https://stackoverflow.com/a/54103671/528468 – Aalex Gabi Nov 11 '21 at 16:00

score 48 · Answer 3 · edited May 19 '20 at 09:34

Note, All the answers submitted until today are incorrect

Because it answer for an element if Exist or Located but NOT Visible or Displayed

The right answer is to check an element size or visibility using page.waitFor() or page.waitForFunction(), see explaination below.

// wait until present on the DOM
// await page.waitForSelector( css_selector );
// wait until "display"-ed
await page.waitForFunction("document.querySelector('.btnNext') && document.querySelector('.btnNext').clientHeight != 0");
// or wait until "visibility" not hidden
await page.waitForFunction("document.querySelector('.btnNext') && document.querySelector('.btnNext').style.visibility != 'hidden'");

const btnNext = await page.$('.btnNext');
await btnNext.click();

Explanation

The element that Exist on the DOM of page not always Visible if has CSS property display:none or visibility:hidden that why using page.waitForSelector(selector) is not good idea, let see the different in the snippet below.

function isExist(selector) {
  let el = document.querySelector(selector);
  let exist = el.length != 0 ? 'Exist!' : 'Not Exist!';
  console.log(selector + ' is ' + exist)
}

function isVisible(selector) {
  let el = document.querySelector(selector).clientHeight;
  let visible = el != 0 ? 'Visible, ' + el : 'Not Visible, ' + el;
  console.log(selector + ' is ' + visible + 'px')
}

isExist('#idA');
isVisible('#idA');
console.log('=============================')
isExist('#idB')
isVisible('#idB')

.bd {border: solid 2px blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bd">
  <div id="idA" style="display:none">#idA, hidden element</div>
</div>
<br>
<div class="bd">
  <div id="idB">#idB, visible element</div>
</div>

on the snippet above the function isExist() is simulate

page.waitForSelector('#myId');

and we can see while running isExist() for both element #idA an #idB is return exist.

But when running isVisible() the #idA is not visible or dislayed.

And here other objects to check if an element is displayed or using CSS property display.

scrollWidth
scrollHeight
offsetTop
offsetWidth
offsetHeight
offsetLeft
clientWidth
clientHeight

for style visibility check with not hidden.

note: I'm not good in Javascript or English, feel free to improve this answer.

Absolutely right! However there is actually an option in puppeteer for this. See my answer. — finn, Mar 17 '19 at 22:17
@finn, unless the next page has the exact same selectors, which does does not allow you to differentiate between the current and next page. `waitForFunction` allows you to do this. — caram, Jan 15 '21 at 14:00
waitFor() is gone as of version 15 according to the release notes. — Stan Smith, Aug 23 '22 at 00:34

Grant Miller · Answer 4 · 2020-03-04T06:17:52.373

18

You can use page.waitFor(), page.waitForSelector(), or page.waitForXPath() to wait for an element on a page:

// Selectors

const css_selector = '.btnNext';
const xpath_selector = '//*[contains(concat(" ", normalize-space(@class), " "), " btnNext ")]';

// Wait for CSS Selector

await page.waitFor(css_selector);
await page.waitForSelector(css_selector);

// Wait for XPath Selector

await page.waitFor(xpath_selector);
await page.waitForXPath(xpath_selector);

Note: In reference to a frame, you can also use frame.waitFor(), frame.waitForSelector(), or frame.waitForXPath().

edited Mar 04 '20 at 06:17

answered Sep 01 '18 at 00:09

Grant Miller

27,532
16
147
165

1

Isn't it redundant to await for page.waitFor? – FabricioG Mar 03 '20 at 18:24
3

Yes it is, and now it's also deprecated. – Moshisho Nov 10 '20 at 08:36

score 13 · Answer 5 · answered Jul 31 '18 at 10:17

Updated answer with some optimizations:

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch({headless: true});
    const page = await browser.newPage();

    await page.goto('https://www.somedomain.com', {waitUntil: 'networkidle2'});
    await page.click('input[value=validate]');
    await page.waitForSelector('#myId');
    await page.click('.btnNext');
    console.log('got it');

    browser.close();
})();

score 7 · Answer 6 · answered Oct 29 '19 at 09:27

While I agree with @ewwink answer. Puppeteer's API checks for not hidden by default, so when you do:

await page.waitForSelector('#id', {visible: true})

You get not hidden and visible by CSS. To ensure rendering you can do as @ewwink's waitForFunction. However to completely answer your question, here's a snippet using puppeteer's API:

async waitElemenentVisble(selector) {
  function waitVisible(selector) {
    function hasVisibleBoundingBox(element) {
      const rect = element.getBoundingClientRect()
      return !!(rect.top || rect.bottom || rect.width || rect.height)
    }
    const elements = [document.querySelectorAll(selector)].filter(hasVisibleBoundingBox)
    return elements[0]
  }
  await page.waitForFunction(waitVisible, {visible: true}, selector)
  const jsHandle = await page.evaluateHandle(waitVisible, selector)
  return jsHandle.asElement()
}

After writing some methods like this myself, I found expect-puppeteer which does this and more better (see toMatchElement).

score 3 · Answer 7 · answered Jun 05 '21 at 13:44

async function waitForVisible (selector){
    //const selector = '.foo';
  return  await page.waitForFunction(
      (selector) => document.querySelector(selector) && document.querySelector(selector).clientHeight != 0",
      {},
      selector
    );
}

Above function makes it generic, so that you can use it anywhere.

But, if you are using pptr there is another faster and easier solution:

https://pptr.dev/#?product=Puppeteer&version=v10.0.0&show=api-pagewaitforfunctionpagefunction-options-args

page.waitForSelector('#myId', {visible: true})

jmtornetta · Answer 8 · 2022-02-05T00:53:13.603

Just tested this by scraping a fitness website. @ewwink, @0fnt, and @caram have provided the most complete answer.

Just because a DOM element is visible doesn't mean that it's content has been fully populated.

Today, I ran:

await page.waitForSelector("table#some-table", {visible:true})
const data = await page.$eval("table#some-table",(el)=>el.outerHTML)
console.log(data)

And incorrectly received the following, because the table DOM hadn't been populated fully by runtime. You can see that the outerHTML is empty.

user@env:$ <table id="some-table"></table>

Adding a pause of 1 second fixed this, as might be expected:

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

await page.waitForSelector("table#some-table", {visible:true})
await sleep(1000)
const data = await page.$eval("table#some-table",(el)=>el.outerHTML)
console.log(data)

user@env:$ <table id="some-table"><tr><td>Data</td></tr></table>

But so did @ewwink's answer, more elegantly (no artificial timeouts):

await page.waitForSelector("table#some-table", {visible:true})
await page.waitForFunction("document.querySelector('table#sched-records').clientHeight != 0")
const data = await page.$eval("table#some-table",(el)=>el.outerHTML)
console.log(data)

user@env:$ <table id="some-table"><tr><td>Data</td></tr></table>

puppeteer: how to wait until an element is visible?

8 Answers8

Explanation

Linked

Related