使用角度应用程序进行网页测试脚本

Question

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

这是示例应用的链接

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

我正在尝试使用

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

我面临的问题是，即使在文本框中输入值后，下一个按钮也没有启用

网页脚本是

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

我尝试为输入设置值，但它导致了相同的结果

Answer 1

Angulars ngModel 需要触发"input"事件才能更新模型。

如果使用 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

请参阅示例结果：https://www.webpagetest.org/result/180406_R3_31adbf8f109c1c54658a4f7a94157192/