Question

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

如果我在Chrome中打开页面，则可以使用以下命令调用我的angular函数：

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

但是如果我尝试做p，

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。

有没有一种方法可以从操纵call中调用角度函数？

感谢您的时间

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()
});

从p调用角度函数

1 个答案: