Browser test can't fill modal form

Hi,

I’ve written some browser test that work perfectly on normal form though I can’t fill inputs that are inside a modal form. I tried to target the inputs inside the modal form with their id, name but still it won’t fill them.
I even tried to open the modal before but still it won’t fill the inputs, does anyone succeed filling modal form with browser test?

Cheers,
Mathieu

Is your modal opened and filled (HTML appended) via javascript?
Because if your test is not considering js parsing and rendering, then the element really won’t be there. Basically if there are no typos, the test won’t be lying.

A way to debug… if your tests don’t parse js, try testing in chrome with js disabled. Then try to look for the element in the console.

Now, if your tests parse and render from js, then you need to elaborate your question, so that we can help you.

Hi @duartealexf,

Thank you for your answer but I’m not sure what you mean.
I open the modal with js but really the modal is just hidden so the html is there even if the modal isn’t open.
Still in my test I open the modal (I even took a screenshot to see if it was opened and it is) and then I try to fill it, though the fill won’t work.
When disabling js I can’t open the modal but the elements are still present in the page, I can find them when inspecting.
Here is my code if it can help:

'use strict'

const { test, trait } = use('Test/Suite')('Login')

trait('Test/Browser')

test('Show error on invalid email', async ({ browser }) => {
	const page = await browser.visit('/')
    
    // open the modal
    await page
    	.click('li[id="login-account"')

    // fill the inputs
    await page
        .type('[name="email"]', 'invalid-email')
        .type('[name="password"]', 'dzaokdpza')

    // submit the login form
    await page
        .submitForm('form[name="login"')
    
    // check that there is a div with has-error class on the page
    await page
        .assertExists('div.has-error')
}).timeout(0);

Cheers

I believe you are missing a closing square bracket in your submit form:

// submit the login form
await page
    .submitForm('form[name="login"]') // <- fix here

Maybe that’s all?

Yep thanks for that but still the form won’t fill.

Sorry, I thought I replied but apparently I was bothered with something else and I didn’t, apologies.

Hey @mathieuh! :wave:

You probably need to wait a little bit before filling the inputs.

To know what’s going on you can take a screenshot of the current state of the browser.

Hey @romain.lanz, sorry for the late reply was busy on something else.

You were right we just need to wait though the waitForElement() method doesn’t seem to fix the problem. I had to add an extra pause() to make it work.