[Bug]: VSCode locator highlighting does not work when using the test step decorator about playwright HOT 4 CLOSED

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

function step(target: Function, context: ClassMethodDecoratorContext) {
  return function replacementMethod(...args: any) {
    const name = this.constructor.name + "." + (context.name as string);
    return test.step(name, async () => {
      return await target.call(this, ...args);
    });
  };
}

class LoginPage {
  searchField = () => this.page.getByLabel("Search", { exact: true });
  constructor(readonly page: Page) {}

  @step
  async login() {
    await this.page.goto("https://www.google.com");
  }
}

test("example", async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.login();
});

If you click on the 'Pick locator' button in VSCode Playwright extension test side panel to open a browser instance, you can click or hover over this.page.getByLabel("Search", { exact: true }); and you will not see the search bar in the Google search page become highlighted. If you comment out the decorator definition at the top of the code as well as it's use above the async login method, you can then successfully hover over or click on this.page.getByLabel("Search", { exact: true }); to highlight the Google search bar in the browser.

from playwright.