How to enable parallel tests with puppeteer?

Question

I am using the chrome puppeteer library directly to run browser integration tests. I have a few tests written now in individual files. Is there a way run them in parallel? What is the best way to achieve this?

Answer 1

To run puppeteer instances in parallel you can check out this library I wrote: puppeteer-cluster

It helps to run different puppeteer tasks in parallel in multiple browsers, contexts or pages and takes care of errors and browser crashes. Here is a minimal example:

const { Cluster } = require('puppeteer-cluster');

(async () => {
  const cluster = await Cluster.launch({
    concurrency: Cluster.CONCURRENCY_CONTEXT, // use one browser per worker
    maxConcurrency: 4, // cluster with four workers
  });

  // Define a task to be executed for your data
  cluster.task(async ({ page, data: url }) => {
    await page.goto(url);
    const screen = await page.screenshot();
    // ...
  });

  // Queue URLs
  cluster.queue('http://www.google.com/');
  cluster.queue('http://www.wikipedia.org/');
  // ...

  // Wait for cluster to idle and close it
  await cluster.idle();
  await cluster.close();
})();

You can also queue your functions directly like this:

  const cluster = await Cluster.launch(...);

  cluster.queue(async ({ page }) => {
    await page.goto('http://www.wikipedia.org');
    await page.screenshot({path: 'wikipedia.png'});
  });

  cluster.queue(async ({ page }) => {
    await page.goto('https://www.google.com/');
    const pageTitle = await page.evaluate(() => document.title);
    // ...
  });

  cluster.queue(async ({ page }) => {
    await page.goto('https://www.example.com/');
    // ...
  });

Answer 2

// My tests contain about 30 pages I want to test in parallel
const aBunchOfUrls = [
  {
    desc: 'Name of test #1',
    url: SOME_URL,
  },
  {
    desc: 'Name of test #2',
    url: ANOTHER_URL,
  },
  // ... snip ...
];

const browserPromise = puppeteer.launch();

// These test pass! And rather quickly. Slowest link is the backend server.
// They're running concurrently, generating a new page within the same browser instance
describe('Generate about 20 parallel page tests', () => {
  aBunchOfUrls.forEach((testObj, idx) => {
    it.concurrent(testObj.desc, async () => {
      const browser = await browserPromise;
      const page = await browser.newPage();

      await page.goto(testObj.url, { waitUntil: 'networkidle' });
      await page.waitForSelector('#content');

      // assert things..
    });
  });
});

from https://github.com/GoogleChrome/puppeteer/issues/474 written by https://github.com/quicksnap

Answer 3

How I achieved this was to create your suite(s) of tests in individual files, as you have done already. Then create a testSuiteRunner.js file (or whatever you wish to call it) and set it up as follows:

require('path/to/test/suite/1);
require('path/to/test/suite/2);
require('path/to/test/suite/3);
...

Import all of your suite(s) using require statements, like above, (no need to give them const variable names or anything like that) and then you can use node ./path/to/testSuiteRunner.js to execute all of your suites in parallel. Simplest solution I could come up with for this one!

Answer 4

I think the best idea would be to use a test runner like Jest that can manage that for you. At least I do that this way. Please keep in mind the machine might blow up if you'd run too many Chrome instances at the same time so it's safe to limit the number of parallel tests to 2 or so.

Unfortunately, it isn't clearly described in the official documentation of how Jest parallels the tests. You might find this https://github.com/facebook/jest/issues/6957 useful.

Libraries as puppeteer-cluster are great but remember first of all you want to parallel your tests, not puppeteer's tasks.