Error: Node is either not visible or not an HTMLElement When Element is clearly awaited for and visible

I am trying to click a drop down option in the app I am testing but when I attempt to click I get this error message: Error: Node is either not visible or not an HTMLElement

I was able to get the text of the element in question by calling myElementHandleInstance.getProperty('innerText') but for some reason I am unable to click the element. I have waited for the element to become visible on the screen. I even added in a 300 second sleep to make absolutely sure the element was appearing.

Tell us about your environment:

• Puppeteer version: 1.20.0
• Platform / OS version: MAC OS
• URLs (if applicable): N/A
• Node.js version: 9.5.0

What steps will reproduce the problem? I’m not sure as I can’t give you access to the site I am testing. But I will try to answer any questions that come up.

Please include code that reproduces the issue. Here is a sample of the HTML I am interacting with

<select class="jss2373 jss2385" name="state[0] aria-invalid="false">
  <option value="please-choose" selected="">Select a state</option>
  <option value="AL">Alabama</option><option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AR">Arkansas</option>
  <option value="CA">California</option><option value="CO">Colorado</option>
  <option value="CT">Connecticut</option><option value="DE">Delaware</option>
  <option value="DC">District Of Columbia</option><option value="FL">Florida</option>
  ...

This is what my code is doing with this, the frame work this is set up in is a little to complex to get into here, so this is somewhat sudo code:

this.browser.click('select[name="state[0]"]') //this clicks the drop down
await this.sleep(300) //long sleep to make absolutely sure the element is on the page
selectionList = this.browser.$('select[name="state[0]"]').$$('option') //this returns an Array of ElementHandles (returns all the option elements)
await selectionList[0].getProperty('innerText') //prints Alabama when console.loged
await selectionList[0].click()  //throws error mentioned in title

What is the expected result? The element should be clicked. if I can get text from the element I should be able to click as well

What happens instead? this error gets thrown Error: Node is either not visible or not an HTMLElement

[Rendez]

As I posted in S.O. yesterday, I was having a similar issue: https://stackoverflow.com/questions/47014724/click-visible-elements-using-puppeteer/58325214#comment-103008647

In my case, the container div had a display: none, and it was ‘shown’ so page.waitForSelector('div', { visible: true }) effectively returned true when toggled BUT, it also had some transition cycle so waiting for it to be “displayed” is what worked. I figured a more idiomatic way of checking if an element is displayed and ready to be clicked: waiting for element.hover() to be successful, retrying every second until it is, otherwise throwing.

[stale[bot]]

We are closing this issue. If the issue still persists in the latest version of Puppeteer, please reopen the issue and update the description. We will try our best to accomodate it!