[Feature]: Improve Tune Locators feature on VS Code to support fixtures

[alexbowers]

🚀 Feature Request

Any variable that extends the Page type should be capable of using the Tune Locator feature.

Example

Any fixture that has a type extending Page should be capable of using Tune Locator

test('i can use tune locator', async({ page, admin }) => {

});

The type definitions of these are:

const admin: Admin & Page;

Where Admin is a page helper for holding various methods, and also extends the Page instance using ProxyHandler. The type is always passed around as Admin & Page.

Whilst admin does implement all of the page methods using the ProxyHandler, i still have to import the variable currently (and have it not used most of the time), just so that I can change a specific instance to page for the Tune Locator feature to highlight in the browser.

Once i am done with the test, I then usually delete the page import since it is not necessary once the test is written.

Motivation

When you are using VS code, if you have the page fixture being used, you can use the Tune Locators feature and it will highlight in the browser what the current locator is placed. This only works with page currently, if you use either a fixture, or you have opened a new link using a waitForEvent promise, then the highlighting no longer works. You can change the current line to use page instead of your new variable, but it will not be respected otherwise.

This makes debugging tricky since you have to modify your code to get the locator to work for you to then edit it back when running the tests. This makes the back and forth trickier.