Description
I would like a nice clean way to assert error messages, based on the aria-invalid and the aria-errormessage attributes.
Right now my ways to check an error message is assertion of a text existing, which is not coupled to a specific form field or by css selectors, that are unstable should the HTML change.
So lets say we have this HTML:
<p>
<label for="email">Email address:</label>
<input
type="email"
name="email"
id="email"
aria-invalid="true"
aria-errormessage="err1" />
<span id="err1" class="errormessage">Error: Enter a valid email address</span>
</p>
I would like to be able to do:
expect(page.getByLabel('Email address:')).toHaveErrorMessage('Error: Enter a valid email address')
I imagine the expect to both determine aria-invalid is true and derive the text from the element with the id in the aria-errormessage attr, same way a screen reader does.
This will create a nice readable assertion, one that is the closer to how a user views the page, while insuring applications that want to use it are more accessible if they are doing their own validations to forms.
This has been done in testing library
I would be glad to help in writing a PR for this.