从 puppeteer 调用 angular 函数

Question

我有一个 Angular 网站，我想使用 puppeteer 对其进行一些操作并截取屏幕截图。我需要在页面加载后调用 angular 函数。

如果我在 chrome 中打开我的页面，我可以调用我的 angular 函数：

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

但是对于木偶师，如果我尝试这样做：

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

我有一个错误说 Error: Evaluation failed: ReferenceError: $$ is not defined

我试图在我的 angular 组件中声明一个 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 开发工具控制台，这工作正常。使用 puppeteer，我可以调用该函数，但我不断收到 Error: Evaluation failed: ReferenceError: $$ is not defined 消息。

如果我尝试改变我的功能，例如记录一些东西，它工作正常，问题似乎是 ng.probe。

有没有办法从 puppeteer 调用 angular 函数？

感谢您的宝贵时间

Answer 1

问题是 $$ 函数在页面内未定义。 $$ 函数是 Console Utilities API 的一部分。这意味着当您在 Chrome 中打开 DevTools 时，它在控制台中可用，但它实际上不适用于页面内执行的任何函数。引用上面链接的文档：

Warning: These functions only work when you call them from the Chrome DevTools Console. They won't work if you try to call them in your scripts

如果您查看函数 $$ 的作用 (docs)，您会发现它只是 document.querySelectorAll() 函数的替代品，再次引用文档：

$$(selector) returns an array of elements that match the given CSS selector. This command is equivalent to calling document.querySelectorAll().

代码

因此，如果您在代码中将 $$ 替换为 document.querySelectorAll() 或 document.querySelector，它应该可以工作：

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

从 puppeteer 调用 angular 函数

Call angular function from puppeteer

function

angular

puppeteer