Add getByTestId in the browser module

[ankur22]

What?

This adds a convenience method on page to be able to select on elements with the data-testid attribute.

Why?

This is part of the story of adding getBy*, which makes working with selectors a little easier. We used to have to work with the page.locator API providing either a CSS selector or a XPath selector if we wanted to get the element by the data-testid attribute on an element:

<button data-testid="submit-button">Submit</button>

const l = page.locator('button[data-testid="submit-button"]'); // CSS
const l = page.locator('//button[@data-testid="submit-button"]'); // XPath

Now we can use:

const l = page.getByTestId('submit-button');

Working with getBy* in general is an industry standard in the frontend testing world.

Checklist

• I have performed a self-review of my code.
• I have commented on my code, particularly in hard-to-understand areas.
• I have added tests for my changes.
• I have run linter and tests locally (make check) and all pass.

Checklist: Documentation (only for k6 maintainers and if relevant)

Please do not merge this PR until the following items are filled out.

• I have added the correct milestone and labels to the PR.
• I have updated the release notes: link
• I have updated or added an issue to the k6-documentation: grafana/k6-docs#NUMBER if applicable
• I have updated or added an issue to the TypeScript definitions: grafana/k6-DefinitelyTyped#NUMBER if applicable

Related PR(s)/Issue(s)

#4791, #4248

[AgnesToulet]

LGTM!

Just had one usability issue while testing locally: I wrote only part of the string thinking that it would be non-exact matching like the other APIs but it wasn't. This is how Playwright does it and I guess it makes sense because this a "code" label and not something shown in the UI or used by accessibility tools but it doesn't feel super consistent with the other APIs (maybe also because I'm testing them one by one 😅)

[ankur22]

Just had one usability issue while testing locally: I wrote only part of the string thinking that it would be non-exact matching like the other APIs but it wasn't. This is how Playwright does it and I guess it makes sense because this a "code" label and not something shown in the UI or used by accessibility tools but it doesn't feel super consistent with the other APIs (maybe also because I'm testing them one by one 😅)

Are you saying it's not consistent with playwright, or not consistent with the other getBy* APIs but the behaviour is consistent with playwright? Can you share your script? Could be a bug that we should fix on our side and maybe open an issue on Playwright's side.

[AgnesToulet]

It's consistent with Playwright but not with the other getBy* APIs (but probably because it's a string used in the codebase and not seen by a user).
Here's a script:

	const page = await browser.newPage();
	await page.goto("https://agnestoulet1.grafana.net/login", {
		timeout: 60000,
	});

	const options = await page.getByTestId("portal").all(); // Should use /.*portal.*/ to retrieve one element
	console.log(`Found ${options.length} options.`);

	for (const option of options) {
		console.log("Inner text: ", await option.innerText());
	}
	sleep(5);

	await page.close();

The base branch was changed.