[page.click] Node is either not visible or not an HTMLElement

[JonnyLeiZhang]

Context:

Playwright Version: 0.15.0
Operating System: Ubuntu 18.04.4

Code Snippet

(async () => {
  // below lines used to create a profile with name 'add_profile_test'
  await page.click('#add-profile-btn');
  await page.fill('#profile input[type=text]','add_profile_test');
  await page.click('#dialog-btn');
  // after create it, then select it
  await page.waitForSelector('text=add_profile_test', {waitFor: 'visible',});
  await page.click('text=add_profile_test');
})

Describe the bug

when try to click the element ('text=add_profile_test'), it reports 'Node is either not visible or not an HTMLElement'.
but if I add one line page.waitFor(1000) before await page.click('text=add_profile_test'), then it can work, I don't understand why. Shouldn't waitForSelector and waitFor function work for this?

[thernstig]

The waitForSelector should not be needed at all since actions like page.click() automatically auto-wait for elements. Check this: https://github.com/microsoft/playwright/blob/master/docs/core-concepts.md#auto-waiting

But, if it is visible when doing the page.click() the above is indeed strange.

(Hi Lei 😄)

[pavelfeldman]

Looks like a bug. Does await page.click('#dialog-btn'); do async api call followed by a dom update or page navigation?

[thernstig]

I also experienced this now. But it is intermittent. This is my code that fails on this:

  await page.click('#menu-toggle');
  await page.click('tree-item >> text=App Name');

#menu-toggle opens up a left-side menu. The menu slides in as an animation. Note that all selectors here is in an open shadow DOM. It seems both our cases are however failing on the text selector. The text is also in the shadow DOM.

[dgozman]

Could anyone share a complete repro script please? Otherwise, we can keep guessing what the issue is 😄

[JonnyLeiZhang]

Hi Guys, after I change
await page.click('text=add_profile_test'); to
await page.click('text="add_profile_test"'); then it can work.
but the error information still confuse easily, why it doesn't directly return timeout.(since no element contains string 'text=add_profile_test' )

[JonnyLeiZhang]

I also experienced this now. But it is intermittent. This is my code that fails on this:

  await page.click('#menu-toggle');
  await page.click('tree-item >> text=App Name');

#menu-toggle opens up a left-side menu. The menu slides in as an animation. Note that all selectors here is in an open shadow DOM. It seems both our cases are however failing on the text selector. The text is also in the shadow DOM.

have a try
await page.click('tree-item >> text=App Name'); =>
await page.click('tree-item >> text="App Name"');

[dgozman]

Hi Guys, after I change
await page.click('text=add_profile_test'); to
await page.click('text="add_profile_test"'); then it can work.
but the error information still confuse easily, why it doesn't directly return timeout.(since no element contains string 'text=add_profile_test' )

Very interesting! The difference between text=add_profile_test and text="add_profile_test" is that latter is a strict match, while the former may find an element that has add_profile_test as a substring. Could it be there are two elements that contain add_profile_test, but one of them also has something else?

[JonnyLeiZhang]

Hi Guys, after I change
await page.click('text=add_profile_test'); to
await page.click('text="add_profile_test"'); then it can work.
but the error information still confuse easily, why it doesn't directly return timeout.(since no element contains string 'text=add_profile_test' )

Very interesting! The difference between text=add_profile_test and text="add_profile_test" is that latter is a strict match, while the former may find an element that has add_profile_test as a substring. Could it be there are two elements that contain add_profile_test, but one of them also has something else?

I have checked it's unique string in the whole page source.
and add
await page.waitFor(3000); before
await page.click('text=add_remove_profile_test');

then it can work the same with await page.click('text="add_remove_profile_test"');
so I think this can also prove that the string is unique.

[thernstig]

I have a hard time sharing a repro of my code, since it is a private project with a lot of code in it. I´ve always used text=App Name in my case, meaning I do the case-insensitive, substring matching.

Wild guess: Does it have something to do with that the menu in my case is animating with the combination of the css shadow dom selector and then the text in the shadow dom, and that the text contains spaces. (Ok I just realized that "guess" did not help at all).

[thernstig]

@dgozman @pavelfeldman I believe this has been fixed in 0.16.0. Is it possible that #2047 fixed this?

I've tested the test case we have multiple times now and never gotten the failure again, whilst I got it frequently before 0.16.0.

[dgozman]

@dgozman @pavelfeldman I believe this has been fixed in 0.16.0. Is it possible that #2047 fixed this?

That's wonderful! It might be #2047 or #2020 or any other improvement 😄