k6 browser page locator confusing two elements with different selectors

[shodzi]

Brief summary

Using the page.locator browser method I am unable to find my elements with unique selectors

k6 version

k6 v1.0.0-rc1

OS

macOS Sonoma

Docker version and image (if applicable)

No response

Steps to reproduce the problem

I have been debugging this issue for the past couple of hours and I believe there is a bug with the browser ability to find elements based on selectors.

I am trying to type in a username and password field and then click on a sign in button using the k6 browser library. I am certain all my elements have different selectors. However, when i use the page selector method, i get an error telling me that there are multiple elements matching my selectors.

When i use the page.$$ and console log I see that there's always 2 elements for my username, password and sign in button elements. I tried debugging it further by setting K6_BROWSER_HEADLESS env var to false to open the browser and see what's happening, and it seems that both username and password always get written to the same input field. Sometimes it writes them into the username field, other times in the password field.

Here's how i'm using the page.locator method to locate my elements:

await page.locator("input[id='signInForUsername']").type(userDetails.email);
await page.locator("input[id='signInForPassword']").type(userDetails.password);

Note that i am using webpack to bundle my package into one js file. Not sure if that is relevant but thought i would mention.

Appreciate any help!

Expected behaviour

page.locator method should work as expected and find elements with unique selectors.

Actual behaviour

page.locator is always returning multiple elements for elements with unique selector