How to use puppeteer to automante Amazon Connect CCP login?

Question

I'm trying use puppeteer to automate the login process for our agents in Amazon Connect however I can't get puppeteer to finish loading the CCP login page. See code below:

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

I can never see the content of the page, it times out. Am I doing something wrong? If I launch the browser with { headless: false } I can see the page never finishes loading.

Please note the same code works fine with https://www.github.com/login so it must be something specific to the source code of Connect's CCP.

Answer 1

In case you are from future and having problem with puppeteer for no reason, try to downgrade the puppeteer version first and see if the issue persists.

---

This seems like a bug with Chromium Development Version 73.0.3679.0, The error log said it could not load specific script somehow, but we could still load the script manually.

The Solution:

Using Puppeteer version 1.11.0 solved this issue. But if you want to use puppeteer version 1.12.2 but with a different chromium revision, you can use the executablePath argument.

Here are the respective versions used on puppeteer (at this point of answer),

• 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

I checked my locally installed chrome,which was loading the page correctly,

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

Note: The puppeteer team suggested on their doc to specifically use the chrome provided with the code (most likely the latest developer version) instead of using different revisions.

Also I edited the code a little bit to finish loading when all network requests is done and the username input is 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();
})();

The specific revision number can be obtained in many ways, one is to check the package.json of puppeteer package. The url for 1.11.0 is,

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

If you like to automate the chrome revision downloading, you can use browserFetcher to fetch specific revision.

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

Result: