Browser mode native browser form validation pauses app and test execution

[kevinlaw91]

So in browser mode(chrome in this example), the browser will attempt to validate form data natively without using js. the app script execution will be paused by the browser.

if i have matchers for custom div error msg below the submit action. the test will be timed out with Error: Matcher did not succeed in time..

So my question is, if I want to test for custom validation error display:
can we disable such native browser feature via vitest config? (so that script execution is continued like no support for native form validation)
or we should fully not test custom error message handling at all and hope the native validation works
I'm curious how you guys did it.

[sheremet-va]

What is your matcher? These popups are not HTML elements, so they can't be found with locators. You can use toBeValid instead:

const input = page.getByRole('text')
await input.fill('content')
await expect.element(input).toBeValid()

[kevinlaw91]

What is your matcher? These popups are not HTML elements, so they can't be found with locators.

Hi @sheremet-va, thanks for the help, but I'm matching for my custom made <div>react-hook-form error message</div>. I want to test if it rendered on screen correctly.

await expect.element(screen.getByText('Please enter your email.')).toBeInTheDocument();

The problem is the browser will block the submission if form is invalid. So the custom element would not render to body because native submit event+RHF's library form validation was both cancelled.

But what if the browser doesn't support native validation and never abort the submit event? the script will continue to run and my best hope is it that the custom error div will render. I have no reliable way to simulate and test it.

my current way is to let browser do its thing. I'm not testing for rendering of custom error message at all and hope for the browser to block it . this seems to be the only way right?

[sheremet-va]

Vitest doesn't change how browsers process your code. What you are doing in the test is the same thing that happens in the normal browser. If you see a difference, make sure the setup in the test environment is the same as in your normal environment. It's possible that by default, the library you are using relies on the default validation mechanism.

The "Please fill out this field" popup is added by your own code somewhere (via the library, perhaps).