Тестовый сценарий WebPage с угловым приложением

Question

Я использую webpagetest.org для тестирования производительности. Чтобы добраться до страницы, которую мне нужно протестировать, мне нужно ввести текст и нажать кнопку "Далее", поскольку я не могу напрямую перейти на эту страницу.

Это ссылка на пример приложения

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

Я пытаюсь ввести какой-то текст на вход с помощью

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

Проблема, с которой я сталкиваюсь, заключается в том, что следующая кнопка не включается даже после ввода значения в текстовое поле.

Скрипт веб-страницы

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

Я попытался установить setValue для ввода, но это привело к тому же результату

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/