Search code examples
testingautomated-testssyntheticwebpagetest

WebPagetest not filling in forms, gives "Navigation Error"

I'm new to WebPagetest (https://www.webpagetest.org/) and am having some trouble with login forms. I am using scripting, and can navigate to the page with the form, but it appears as though I am not correctly entering any form values, nor is the form submitting.

Here is a version of my script:

logData 1
navigate    https://www.example.com/secure/login
setValue    name=username   activation_test
setValue    name=password   password
submitForm  id=signInForm
//clickAndWait  id=signInBtn
//exec  document.getElementsByTagName('html')[0].style.display = 'none';
sleep   5
block   google.com/csi
navigate    https://www.example.com/?jbhp=true

Of course, my first thought is to make sure that my HTML elements match, but they appear to be fine...

  • Username:

input tabindex="1" aria-required="true" class="success required" id="username" maxlength="64" name="username" placeholder="Email Address or Username" type="text" value=""

  • Password:

input tabindex="2" aria-required="true" class="success required" id="password" name="password" placeholder="Password" type="password" value=""

  • Form:

form action="#" id="signInForm" method="post" class="form formLarge" novalidate="novalidate"

  • Submit (verified within the form; only used when clickAndWait is uncommented):

button tabindex="3" id="signInBtn" class="ancBtn lrg" data-track-click="sign in : sign in" type="submit"

The result page of the test shows that it navigates to the final location as though not logged in. Also, I see this as part of the results: Step_2 (Error: Navigation Error). Sadly, if there is better documenting as to what specifically caused the navigation error, I have yet to find it.

Finally, if I switch from using "submitForm" to "clickAndWait" (which is commented out in the above example) the only difference in the result is that Step_2 shows a screenshot of the page rather than just an orange block.

Solution

  • IFrames. Stupid IFrames. If you find your way to my question, above, I would bet that your page has IFrames. In my case, my IFrame is coming from the same domain as the browser page -- if this is not the case for your IFrame, I'm not sure if this will work.

    To access elements in the IFrame, I had to forget "setValue", "clickAndWait", and so on. I had to go straight to Javascript. Scripted, it looks something like these examples:

    exec document.querySelector("iframe[id=stupidIFrameId]").contentDocument.querySelector("input[id=password]").value = 'password'

execAndWait document.querySelector("iframe[id=stupidIFrameId]").contentDocument.querySelector("button[id=signInButton]").click()