[Feature]: Enable highlighting of elements in browser when hovering over nested locators

[JanLechvar]

🚀 Feature Request

Enable highlighting of elements in browser when hovering over nested locators

Example

import { test } from "@playwright/test";

test("test", async ({ page }) => {
await page.goto("https://playwright.dev");

const heroBanner = page.locator(".hero");
const getStartedButton = page.getByRole("link", { name: "Get Started" }); // element is highlighted when hovering over this line
const getStartedButton_nested = heroBanner.getByRole("link", { name: "Get Started" }); // element is not highlighted when hovering over this line
});

getStartedButton

getStartedButton_nested

Motivation

Implementing element highlighting for nested locators on hover will greatly enhance the accuracy and efficiency of UI inspection, especially for complex layouts. This feature will streamline debugging and provide immediate visual feedback on nested elements, improving the overall development workflow.

[Skn0tt]

This is implemented entirely based on static analysis (see code), so supporting this would be quite hard. Marking it as P3 to see if there's demand.

[s-h-a-d-o-w]

Something that I just noticed when encountering this is that the visualization can handle nesting as long as it's inline, e.g.:

      const secondUserMessage = page.getByText("Second message").locator(".."); // ✅
      await secondUserMessage.getByRole("button", { name: "delete" }).click(); // ❌

      // Can be temporarily (the visualization updates in realtime) changed to:
      const secondUserMessage = page.getByText("Second message").locator("..").getByRole("button", { name: "delete" }).click(); // ✅

The highlight even changes as you hover different nesting steps.

The fact that this works could help with supporting chains even when they're broken up. But... one would have to analyze whether only simple assignments are involved in a given chain and if not, show a warning (so that users can differentiate whether the highlight doesn't show for this reason or because of a problem with their code).