Cannot interact with Switch component using playwright

[s-r-x]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

8.2.1

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

All

Describe the bug

👋

I've tried to use these playwright locators, which are basically the same:

page.getByLabel("my-switch-label");

page.getByRole("switch", {
  name: "my-switch-label"
});

I can read the current value but cannot change it:

// ok
expect(locator).toBeChecked()

// doesn't work
await locator.click();
await locator.uncheck();
await locator.check();

// this one also fails due to timeout
expect(locator).toBeVisible()

I guess the problem is that mantine puts the input off screen and makes it invisible using this:

height: 0;
width: 0;
opacity: 0;
position: absolute;

by using this locator it's possible to interact with the switch, but not to read the current value:

// ok
const locator = page.locator(".mantine-Switch-label");
await locator.click();

// obviously not
await expect(locator).toBeChecked();
await locator.check();

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Switch component is actually a checkbox under the hood. Maybe it would work something like this:

page.getByRole("checkbox", { name: "my-switch-label" });

[s-r-x]

I've tried it already. using your locator playwright can't even find the element in the DOM

  // ok
  await expect(
    page.getByRole("switch", {
      name: "my-switch-label",
    }),
  ).toBeAttached();
  // error
  await expect(
    page.getByRole("checkbox", { name: "my-switch-label" }),
  ).toBeAttached();
  // error
  await expect(
    page.getByRole("switch", {
      name: "my-switch-label",
    }),
  ).toBeVisible();
  // ok
  await expect(
    page.getByRole("switch", {
      name: "my-switch-label",
    }),
  ).toBeChecked();

[RMcGhee]

I'm having a similar issue, has anyone come up with a solution to this?

[RMcGhee]

A solution, don't know if it's the best:
const diffSwitchInput = detectionLogicView.getByRole('switch', { name: /diff/i });
const diffSwitchClickable = diffSwitchInput.locator('..'); // parent

await expect(diffSwitchInput).not.toBeChecked();
await diffSwitchClickable.click();
await expect(diffSwitchInput).toBeChecked();

And also, @rtivital , excellent work on mantine, it's a joy to use.