Help: Assertion for page.getByPlaceholder is timing out

Looks like it found the input and the existing value but still fails

FYI you don't need to await within the expect. Try this:

await expect(page.getByPlaceholder('Name')).toHaveValue('');

But also it seems that your input has the value Test Building and isn't blank. Can you provide a snippet of the DOM under test?

I tried without await same result. Yes, the test should have failed but instead got timeout error.

This was a form field within a modal, this happened after modal was reponed after closing. The modal component was not removed from DOM which is why it might have happened. I have moved the model under conditional rendering and have fixed this.

But still wondering about the error message. It was able to resolve the locator. May be it was attached to the DOM but not visible?

I was testing to see if form clears after modal is closed and reopened which it doesn't so expected test to fail.

Yes, it could be that it's still attached but hidden. Can you assert for isHidden and see what result you get?

// reopen the form and check if form fields are empty 
await page.getByRole('button', { name: 'Add Building' }).click();
await expect(page.getByPlaceholder('Name')).toBeHidden();
await expect(page.getByPlaceholder('Name')).toHaveValue('');
await expect(page.getByPlaceholder('Address')).toHaveValue('');

Still it errors out at toBeHidden()

toBeAttached passes the test

I have fixed this by wrapping the component in v-if , but just wanted to experiment a bit with tests

I checked the CSS, the modal was hidden with display:none; Now sure why toBeHidden errors out though