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
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/