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?