Rayrun
← Back to Discord Forum

Missing understanding for why Tests with getByLabel fail in firefox/webkit but not in chrome.

I use a iOS style checkbox in my project it is based on "https://gui-challenges.web.app/switch/dist/" but i don't understand why there is a difference when using firefox and webkit for the test. Both test are successful in chrome, first targets the styled checkbox directly but the second only the label, now the test that targets the checkbox fails in firefox and webkit and why there is no getByRole("label") for targeting the label directly is a other question.

test("Failing firefox,webkit", async ({ page }) => {
    await page.goto("https://gui-challenges.web.app/switch/dist/");
    await page.getByLabel("Default").check();
});
test("Succeding firefox,webkit", async ({ page }) => {
    await page.goto("https://gui-challenges.web.app/switch/dist/");
    await page.locator("text=Default").check();
});

This thread is trying to answer question "Why do tests with getByLabel fail in Firefox and Webkit but not in Chrome, and why is there no getByRole('label') for targeting the label directly?"

3 replies
_kalkleiste_

Is your getByLabel("Default") and locator("text=Default" ) the same element in your DOM? pay attention, there is a difference between getByLabel and getByText. I guess what you misunderstand is that a label can be accessed by getByText("Default" )

_kalkleiste_

If it is a checkbox then you should use getByRole("checkbox", {name: Default} )

getByRole does target the same element as the getByLabel and its a different target then getByText since the later i target the "label" element and not the checkbox and that is intended since the html layout can change without changing the visual style. Currently the label wraps the checkbox like on the page in the example but the label can be next to it with a for reference.

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.