WebPage test scripting with angular app

Question

I'm using webpagetest.org to do performance testing. To reach the page I need to test, I need to enter some text and click on the next button as I cannot reach that page directly.

This is the link to the sample app

https://angular-z3shbr.stackblitz.io/

I'm trying to enter some text into the input by using

document.querySelector('input').value= 'Test'

The issue I'm facing is the next button is not getting enabled even after a value is entered in the textbox

The Webpage script is

execAndWait    document.querySelector('input').value = "test";
clickAndWait    selector="next_button"

I tried setValue for the input but it led to the same result

to mee the next button is getting enabled when you enter some value — sam
– sam, Commented Apr 6, 2018 at 6:35
Just like sam, the button is enabled after entering some letters. When removing the letters, the button is disabled again. — user926367
– user926367, Commented Apr 6, 2018 at 6:53
Use document.querySelector('input').value= 'Test' to set the value . The button is not getting enabled — Aditya Mukesh
– Aditya Mukesh, Commented Apr 6, 2018 at 7:12

jornare · Accepted Answer · 2018-04-06 08:44:43Z

1

+50

Angulars ngModel requires an 'input' event to be triggered in order for the model to be updated.

If you change the value of an input field using element.value, which is the same that webpagetest.org uses, the change detection does not occur.

To fix this, simply execute this event manually in the webpagetest.org script

Example script:

navigate https://angular-z3shbr.stackblitz.io/
setValue           type=text some text

execAndWait document.getElementsByTagName('input')[0].dispatchEvent(new Event("input"));

clickAndWait    innerText=Next

See example result: https://www.webpagetest.org/result/180406_R3_31adbf8f109c1c54658a4f7a94157192/

answered Apr 6, 2018 at 8:44

jornare

2,89321 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

WebPage test scripting with angular app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related