用角app测试WebPage脚本

Question

我正在使用webpagetest.org进行性能测试。要到达我需要测试的页面，我需要输入一些文本并单击next按钮，因为我无法直接到达该页面。

这是到示例应用程序的链接。

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

我试图在输入中输入一些文本，方法是

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

我面临的问题是，即使在textbox中输入了一个值之后，next按钮仍未启用

网页脚本是

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

我尝试了输入setValue，但结果是相同的

Answer 1

Angulars ngModel需要触发一个“输入”事件，以便更新模型。

如果使用element.value更改输入字段的值，这与webpagetest.org使用的值相同，则不会发生更改检测。

要解决此问题，只需在webpagetest.org脚本中手动执行此事件即可。

示例脚本：

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

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

clickAndWait    innerText=Next

参见示例结果：31adbf8f109c1c54658a4f7a94157192/