How to handle dialogs in vitest browser mode tests?

[havardthom]

Hello,
I was wondering how to handle dialogs in vitest browser mode tests? We have a button which opens a HTMLDialogElement using showModal() but the modal does not open in the test, and the test will timeout when trying to click the confirm button in modal. We can see that the <dialog> element exist in DOM, but it does not have open attribute so showModal() is not working it seems.

Playwright docs states that dialogs are auto-dismissed by Playwright, but their solution is not applicable in vitest browser mode because we don't have access to full playwright page API.

Does anyone have a solution for handling dialogs in vitest browser mode tests?

vitest browser config:

    browser: {
        provider: 'playwright',
        enabled: true,
        instances: [{ browser: 'chromium' }],
    },

Example test code:

   const showModalButton = page.getByRole('button', {
      name: 'Show modal',
      exact: true,
    });
    await userEvent.click(showModalButton);

    const confirmModalButton = page.getByRole('button', {
      name: 'Confirm modal',
      exact: true,
    });
    await userEvent.click(confirmModalButton); // TEST HANGS AND TIMEOUT HERE

[Icaro0310]

HTMLDialogElement isn't a Playwright dialog, so auto-dismiss is a red herring. On Chromium, showModal() sets open synchronously, so no open means the click handler didn't run or showModal() threw. I'd probe it right after the click and watch the browser console:

const dialog = document.querySelector('dialog') as HTMLDialogElement
console.log(dialog.isConnected, typeof dialog.showModal)
try { dialog.showModal() } catch (err) { console.error(err) }

If it throws InvalidStateError, the usual cause is calling it before the dialog is connected, or while another modal is already open. That's a timing bug in the component, not something to mock away in browser mode.

—
Related work of mine: github.com/Icaro0310 · Website: icaro0310.github.io