Expose k6/browser.Selector to the runtime

[oleiade]

Feature Description

As I work on the upcoming k6 assertion library, I needed to be able to access a Locator's selector expression to be able to show it in test results. As I navigated the code and documentation I couldn't find a way to access it from the Runtime.

For illustration, what I'm looking to be able to do is something along the lines of the following:

await page.goto('http://localhost:8000');
const locator = page.locator("#toBeCheckedCheckbox");

// This is what I aim to do
console.log(`${locator.selector}`)  // Would print '#toBeCheckedCheckbox'

With the intent to be able to produce such output:

Suggested Solution (optional)

I would like to suggest we make that field public, or at least have a getter for it, so that it's possible to print/reuse the locator selector expression in the output.

Already existing or connected issues / PRs (optional)

No response

[ankur22]

@oleiade I took a look at PW for some inspiration and I found this stackoverflow post. From it i discovered the _selector is a private variable of the Locator class. I was able to get this to work in PW:

    await page.goto('https://quickpizza.grafana.com/')

    const loc = page.locator('role=button[name="Pizza, Please!"]');

    console.log(loc._selector);

Which prints role=button[name="Pizza, Please!"].

This doesn't work with k6 browser though as we don't expose it anywhere during the mapping of Locator.

However, I personally don't like the fact that it's accessing a private member variable like this, i'd prefer a public API instead, a getter such as .selector() so it's obvious that it's readonly.

WDYT @inancgumus?