Playwright: how to interact with Angular Material checkbox

I have an Angular component that contains an Angular Material checkbox:

<mat-checkbox id="my-checkbox">My Checkbox</mat-checkbox>


My goal is to test the containing application, using Playwright.

Via a Playwright locator, I am able to successfully reference the mat-checkbox. I have attempted to use the locator's check and uncheck functions to explicitly set the checkbox state, but this fails, because mat-checkbox is not an HTML input element.

const checkbox = page.locator('id=my-checkbox'); // OK
await checkbox.check(); // throws
await checkbox.uncheck(); // throws


I also tried referencing mat-checkbox's contained <input> element, but this also fails, apparently because the input element is not visible (it is only used internally by Angular Material to implement checkbox functionality).

Using the locator's click function, I am able to toggle the state of the checkbox:

const checkbox = page.locator('id=my-checkbox'); // OK
await checkbox.click(); // toggles checkbox state


However, I am unsure how to retrieve the current state of the checkbox. The locator's isChecked function fails, in the same manner, for both the mat-checkbox and its contained input element.

This is my first experience using Playwright with Angular Material and I imagine there may be other Material components that similarly encapsulate functionality in a way that prevents easy testing.

Is there a recommended best practice for solving this issue?

Continue reading...