[Question] Some _react selectors are deemed not visible

Originally described in MarketSquare/robotframework-browser#1519

Hi, I am trying to assert visibility of some React elements using the _react selector strategy introduced in 1.14. I am using Playwright for Python to test the, unminified, React app from https://github.com/alexanmtz/material-sense running locally.

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("http://localhost:8000")
    print(page.title())
    visible = page.is_visible('_react=Tab[label = "Home"]')  # this element can not be found
    assert visible
    browser.close()

The assertion fails because the element is deemed not visible, but I can't seem to be find why. For some other elements of the app, such as _react=Topbar, it works as expected. I just can't seem to figure out what I might be doing wrong and I'd appreciate any help.

Screenshot from Reac Dev Tools:

[JoelEinbinder]

Can you please provide a Trace that shows a visible element not being considered visible? Thanks.

Sure, here is the file: trace.zip

One thought I had over the weekend, could it be because the element I'm trying to find is ForwardRef?

[dgozman]

@dreamercz A few thoughts:

• It could be that element is loaded lazily, so by the time you all is_visible() it is actually not visible.
• You can check whether the right element was found with print(page.eval_on_selector('_react=Tab[label = "Home"]', "el => el.outerHTML")).
• You can add strict=True option to check whether there are multiple elements matching the selector - perhaps you are just picking the wrong one?
• Try running with Playwright Inspector and see whether the right element is highlighted, and where does the selector resolve.

[pavelfeldman]

We need more information to act on this report. Please file a new one and link to this issue when you get back to it!