使用 Angular 应用程序编写网页测试脚本答案

【问题标题】：WebPage test scripting with angular app使用 Angular 应用程序编写网页测试脚本
【发布时间】：2018-03-21 05:25:16
【问题描述】：

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

这是示例应用的链接

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

我正在尝试通过使用在输入中输入一些文本

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

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

网页脚本是

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

我尝试了 setValue 作为输入，但结果相同

【问题讨论】：

当您输入一些值时，会启用下一个按钮
和sam一样，在输入一些字母后该按钮被启用。删除字母时，该按钮再次被禁用。
使用 document.querySelector('input').value= 'Test' 设置值。该按钮未启用

标签： javascript angular performance-testing webpagetest

【解决方案1】：

Angulars ngModel 需要触发“输入”事件才能更新模型。

如果您使用 element.value 更改输入字段的值，这与 pagestest.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/

【讨论】：