Вызов угловой функции от кукловода

Question

У меня есть англоязычный веб-сайт, и я хочу использовать кукловода, чтобы сделать с ним какие-то действия и сделать скриншоты. Мне нужно вызвать угловую функцию после загрузки моей страницы.

Если я открою свою страницу в Chrome, я могу вызвать свою угловую функцию с помощью:

ng.probe($$('app-home')[0]).componentInstance.myFunction()

Но с кукловодом, если я попытаюсь сделать:

await page.evaluate("ng.probe($$('app-home')[0]).componentInstance.myFunction()")

У меня ошибка: 1009 *

Я попытался объявить функцию js в моем угловом компоненте с помощью:

var s = document.createElement("script");
s.type = "text/javascript";
s.text = "function launchMyFunction() {" +
    "ng.probe($$('app-home')[0]).componentInstance.myFunction()" +
    "}"
this.elementRef.nativeElement.appendChild(s);

С консолью инструментов Chrome dev это работает нормально. С кукловодом я могу вызвать функцию, но продолжаю получать сообщение Error: Evaluation failed: ReferenceError: $$ is not defined.

Если я пытаюсь изменить свою функцию, например, чтобы что-то регистрировать, она работает правильно, похоже, проблема в ng.probe.

Есть ли способ вызвать угловую функцию у кукловода?

Спасибо за ваше время

Answer 1

Проблема в том, что функция $$ не определена внутри страницы. Функция $$ является частью API консольных утилит . Это означает, что он доступен в консоли при открытии DevTools в Chrome, но на самом деле он недоступен для любой функции, выполняемой на странице. Чтобы процитировать документы, связанные выше:

Предупреждение: Эти функции работают только при вызове их из консоли Chrome DevTools. Они не будут работать, если вы попытаетесь вызвать их в своих скриптах

---

Если вы посмотрите на то, что делает функция $$ ( документы ), вы увидите, что это просто замена функции document.querySelectorAll(), опять же цитируя документы:

$$(selector) возвращает массив элементов, соответствующих заданному селектору CSS. Эта команда эквивалентна вызову document.querySelectorAll () .

Код

Так что если вы замените $$ на document.querySelectorAll() или document.querySelector в вашем коде, это должно работать:

await page.evaluate(() => {
  ng.probe(document.querySelector('app-home')).componentInstance.myFunction()
});