Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Experimental React Selectors doesn't work on react apps in Iframe.

See original GitHub issue

Context:

Playwright Version: 1.16.3
Operating System: [e.g. Windows, Linux or Mac] Windows
Node.js version: [e.g. 12.22, 14.6] 16.13.0
Browser: [e.g. All, Chromium, Firefox, WebKit] Chromium
Extra: [any specific details about your environment]

Code Snippet

test.describe('Clicking react components', () => {
  let page, frameElementHandle, frame;
  test.beforeAll(async ({browser}) => {
    page = await browser.newPage();
    await page.goto('http://localhost:8080/', {waitUntil: 'domcontentloaded'});
    await page.waitForSelector('iframe#target');
    frameElementHandle = await page.$('#target');
    frame = await frameElementHandle.contentFrame();
  });
  test('click on component named DeepHooks', async () => {
    await frame.click('_react=DeepHooks');
    expect(true).toEqual(true); // Intentional for passing test
  });
})

Describe the bug

It can’t find the component with the selector. Timeout Error of 30 seconds showed up

 Timeout of 30000ms exceeded.

    page.click: Target closed
    =========================== logs ===========================
    waiting for selector "_react=DeepHooks"
    ============================================================

Also, the source is not minified.

I am totally using react selectors for the first time so sorry if I did something wrong.

Thank You