如何使用 puppeteer 自动登录 Amazon Connect CCP？

Question

我正在尝试使用 puppeteer 为我们在 Amazon Connect 中的代理自动执行登录过程，但是我无法让 puppeteer 完成加载 CCP 登录页面。请参阅下面的代码：

const browser = await puppeteer.launch();

const page = await browser.newPage();
const url = 'https://ccalderon-reinvent.awsapps.com/connect/ccp#/';

await page.goto(url, {waitUntil: 'domcontentloaded'});

console.log(await page.content());

// console.log('waiting for username input');

// await page.waitForSelector('#wdc_username');

await browser.close();

一直看不到页面内容，超时了。难道我做错了什么？如果我使用 { headless: false } 启动浏览器，我可以看到页面永远不会完成加载。

请注意，相同的代码在 https://www.github.com/login 中也能正常工作，因此它必须是 Connect 的 CCP 源代码特定的内容。

Answer 1

如果您来自未来并且无缘无故遇到 puppeteer 问题，请先尝试降级 puppeteer 版本，看看问题是否仍然存在。

这似乎是 Chromium 开发版本 73.0.3679.0 的一个错误，错误日志说它无法以某种方式加载特定脚本，但我们仍然可以手动加载脚本。

解决方案：

使用 Puppeteer 1.11.0 版解决了这个问题。但是如果你想使用 puppeteer 版本 1.12.2 但有不同的 chromium 版本，你可以使用 executablePath 参数。

以下是 puppeteer 上使用的各个版本（此时回答），

Chromium 73.0.3679.0 - Puppeteer v1.12.2
Chromium 72.0.3582.0 - Puppeteer v1.11.0
Chromium 71.0.3563.0 - Puppeteer v1.9.0
Chromium 70.0.3508.0 - Puppeteer v1.7.0
Chromium 69.0.3494.0 - Puppeteer v1.6.2

我检查了本地安装的 chrome，它正在正确加载页面，

$(which google-chrome) --version
Google Chrome 72.0.3626.119

注意：puppeteer 团队在他们的文档中建议专门使用随代码提供的 chrome（很可能是最新的开发人员版本），而不是使用不同的修订版。

我还稍微编辑了代码以在完成所有网络请求并且 username 输入 visible.

时完成加载

const puppeteer = require("puppeteer");
(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    executablePath: "/usr/bin/google-chrome"
  });

  const page = await browser.newPage();
  const url = "https://ccalderon-reinvent.awsapps.com/connect/ccp#/";

  await page.goto(url, { waitUntil: "networkidle0" });

  console.log("waiting for username input");
  await page.waitForSelector("#wdc_username", { visible: true });

  await page.screenshot({ path: "example.png" });
  await browser.close();
})();

具体的修订号可以通过多种方式获取，一种是查看puppeteer包的package.json。 1.11.0 的 url 是

https://github.com/GoogleChrome/puppeteer/blob/v1.11.0/package.json

如果您想自动下载 chrome 修订版，您可以使用 browserFetcher 来获取特定修订版。

const browserFetcher = puppeteer.createBrowserFetcher();
const revisionInfo = await browserFetcher.download('609904'); // chrome 72 is 609904
const browser = await puppeteer.launch({executablePath: revisionInfo.executablePath})

结果：

如何使用 puppeteer 自动登录 Amazon Connect CCP？

How to use puppeteer to automante Amazon Connect CCP login?

javascript

google-chrome

amazon-connect

google-chrome-headless

puppeteer

解决方案：