playwright [Feature]: locators in iframes not getting highlighted in Chromium or any browser

🚀 Feature Request

I would like to see locators within multiple iframes getting highlighted in Chromium or any browser, so I can troubleshoot my iframe locators easily from Visual Studio Code.

Currently, the following default playwrights locators are highlighted in Chromium.

page.getByText('foo');
page.getByRole('button', { name: 'foo' });
etc...

For locator within one iframe, sometimes I see them getting highlighted in Chromium, sometimes not.

page.frameLocator('iframe').getByText('foo');

And for locators within two or more iframes, I have never seen them getting highlighted in Chromium.

page.frameLocator('iframe1').frameLocator('iframe2').getByText('foo');
page.frameLocator('iframe1').frameLocator('iframe2').frameLocator('iframe3').getByText('foo');

In order for me to troubleshoot these iframe locators, I have to use playwright's highlight method, but I need to run my test every time when I work on a new locator.

let fooLocator = page.frameLocator('iframe1').frameLocator('iframe2').getByText('foo');
await fooLocator .highlight();

With that said, if I can see these locators from Chromium without running my test every time for a new locator, it will greatly increase my efficiency.

Example

No response

Motivation

This will help troubleshoot iframe locators much faster.

Oct 16 '24 15:10 qk5

@qk5 Could you please be more specific in how do you expect locators to be highlighted? Are you doing it through the VSCode extension? What exactly do you do? Any specific page this happens on? The more details you provide, the better the chances we'll be able to help.

Oct 17 '24 12:10 dgozman

@qk5 Could you please be more specific in how do you expect locators to be highlighted? Are you doing it through the VSCode extension? What exactly do you do? Any specific page this happens on? The more details you provide, the better the chances we'll be able to help.

Thank you dgozman for getting back to me.

Here is a video recording of what happened, and I have also included my sample code to help troubleshoot.

https://github.com/user-attachments/assets/47eabbad-166f-41c6-b572-73129aa2156e

And my code from this video:

Playwright Code

test('[00001] iframe Locators Debug Testing', { tag: [ '@debug' ] }, async ({ page }) => {
  test.setTimeout(30000);

  await page.goto('file:///C:/temp/test/index.html');

  // First, I will click on each locator code (line 292 - line 299) to show locators are highlighted or not in Chromium
  // Then, I will run this test to show you locators are highlighted in runtime

  // locator is higlighted in browser because it is outside iframe
  let text1 = page.getByText('Text outside iframe');

  // locaotr not highlighted inside mainFrame
  let text2 = page.frameLocator('iframe[name="mainFrame"]').getByText('Text in mainFrame');

  // locaotr not highlighted inside mainFrame --> iframe1
  let text3 = page.frameLocator('iframe[name="mainFrame"]').frameLocator('iframe[name="iframe1"]').getByText('Text in iframe1');


  // Highlight text1 during runtime
  await expect(text1).toBeVisible();
  await text1.highlight();
  await page.waitForTimeout(5000);

  // Highlight text2 during runtime
  await expect(text2).toBeVisible();
  await text2.highlight();
  await page.waitForTimeout(5000);

  // Highlight text3 during runtime
  await expect(text3).toBeVisible();
  await text3.highlight();
  await page.waitForTimeout(5000);
});

HTML Pages

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Page</title>
    <style>
        iframe {
            width: 100%;
            height: 500px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>Text outside iframe</div>
    <br>
    <iframe src="mainFrame.html" name="mainFrame"></iframe>
</body>
</html>

mainFrame.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Frame</title>
    <style>
        #container {
            display: flex;
            justify-content: space-around;
            height: 100%;
        }
        iframe {
            width: 45%;
            height: 100%;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div>Text in mainFrame</div>
    <br>
    <div id="container">
        <iframe src="frame1.html" name="iframe1"></iframe>
    </div>
</body>
</html>

frame1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frame 1</title>
</head>
<body>
    <div>Text in iframe1</div>
    <br>
</body>
</html>

And since you mentioned VSCode extension, I am using Playwright Test for VSCode extension. Please do let me know if there are other extensions that allow me to see iframe locators on the fly.

Thank you again for your help.

Oct 17 '24 15:10 qk5