[Question] Can't wait for an element to be visible when it is overlapped with other elements in frontend

[wenshu520]

Hi Experts,

I have a doubt here.
This is frontend. As you can see, here is one line with zero value. So the whole line is overlapped with the zero value.

HTML is as below:

Code:

const selector = `${this.selector} svg g[class="line-group"] path`;
await page.waitForSelector(selector);
const pathElements = await page.$$(`${selector} path`);
return pathElements.length;

When I run this code in debug mode, it will stuck in the "waitForSelector", it seems that playwright don't find the element, but I do see it display in the frontend. However, if I change the code to be "page.waitForSelector(selector, {state: "attached"}", it can work well.

Therefore, I want to know why it can't find the selector to be visible?

Thanks

BR,
Wenshu

[mxschmitt]

Playwright internally checks for Accessibility checks, see here: https://playwright.dev/docs/api/class-accessibility

Getting via that values from inside a SVG is currently not intended, what is the exact use-case for it? You can try to disable them via adding {force: true} to your waitForSelector call, maybe it works.

Having a small available reproducible and its scenario would help a lot, thanks!

[wenshu520]

Hi @mxschmitt ,

Thanks for your reply. However, I didn't find here is an option of {force:true} in waitForSelector function.

[mxschmitt]

good catch, try state: attached instead, this should work:

await page.waitForSelector("#foo > g > path", { state: "attached" })

[aslushnikov]

(closing due to lack of feedback)