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, Apr 06 '18 at 06:35
Just like sam, the button is enabled after entering some letters. When removing the letters, the button is disabled again. — Hossain Alhaidari, Apr 06 '18 at 06:53
Use document.querySelector('input').value= 'Test' to set the value . The button is not getting enabled — Aditya Mukesh, Apr 06 '18 at 07:12

score 1 · Accepted Answer · answered Apr 06 '18 at 08:44

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/

WebPage test scripting with angular app

1 Answers1