Scripting: Struggling with selecting DOM elements

Support
1

Hello everyone!

I’m loving WebPageTest, and I’m trying to use it with the parts of our site that need authentication.

I’m trying to use scripting and DOM interactions to log into our site https://github.com/WPO-Foundation/webpagetest-docs/blob/master/user/Scripting.md#setvalue

But I’m really struggling.

For example, even with the basic script below, the images captured by the test show that no text whatsoever have been entered in the username and password fields (I’ve attached a screenshot).

logData 1

navigate https://www.kooth.com/login

setValue name=username someName
setValue name=password somePW

submitForm name=login

Can anyone see what I might be doing wrong?
Or is DOM manipulation unreliable?

2

It heavily depends on how the form is implemented (if they aren’t plain text fields the value may not be displayed).

These days I find it a lot easier to only use the “exec” command for manipulating pages with javascript. Get the form filling working with Javascript in a local dev tools console and then use that same script in an “exec” command (with an execAndWait for clicking the button or if the whole sequence is in one JS chunk)

1 Like
3

Thanks Patrick, that solved my issue.

The work was implemented as React controlled component, listening for input events to update the React app’s internal state.

I naively thought I could just update the form’s value.
Writing the script in the DevTools first (as you suggested) worked well.

And yes, I’m also finding it much easier to use exec and execAndWait.