从 puppeteer 调用角度函数

Question

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

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

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

但是对于 puppeteer，如果我尝试这样做：

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

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

我试图在我的角度组件中声明一个 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 调用角度函数？

感谢您的宝贵时间

Answer 1

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

警告：这些函数仅在您从 Chrome DevTools 控制台调用它们时才有效。如果您尝试在脚本中调用它们，它们将不起作用

---

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

$$(selector) 返回与给定 CSS 选择器匹配的元素数组。该命令相当于调用document.querySelectorAll()。

代码

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

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