In the page.evaluate function, you can return a promise, which will resolve to a value. In this case Promise.all returns a promise, which you can chain to return the value you want. It'd look something like this:

const returned = await page.evaluate(() => {
  const fac = new FastAverageColor();
  const imgs = Array.from(document.querySelectorAll('img'));
  const imgpromises = imgs.map(img => fac.getColorAsync(img.src));
  return Promise.all(imgpromises).then(imgcolors => { 
    return {
      document:{
        height: document.body.scrollHeight, 
        width: document.body.scrollWidth 
      },
      imgcolors: imgcolors
    };
  });
});

Alternatively, since you are using async functions, you can just use the await operator to wait for values to be resolved:

const returned = await page.evaluate(async () => {
  const fac = new FastAverageColor();
  const imgs = Array.from(document.querySelectorAll('img'));
  const imgpromises = imgs.map(img => fac.getColorAsync(img.src));
  const imgcolors = await Promise.all(imgpromises);
  return {
    document:{
      height: document.body.scrollHeight, 
      width: document.body.scrollWidth 
    },
    imgcolors: imgcolors
  };
});

Note that page.evaluate can only return serializable values, i.e. things that can be JSON.stringify'd. It looks like imgcolors should be serializable, but in other cases, you might need to convert the values to something serializable.

One possible approach is to wrap the eSpeak command line tool (Windows & Linux) http://espeak.sourceforge.net/. You can then wrap with Node.js.

const { exec } = require('child_process');

var outputFile = process.argv[2] || "output.wav";
var voice = process.argv[3] || "en-uk-north";
var text = process.argv[4] || "hello there buddy";
var command = `espeak.exe -v ${voice} -w ${outputFile} "${text}"`;

exec(command, (err, stdout, stderr) => {
  if (err) {
    console.log("Error occurred: ", err);
    return;
  }
});

This gives a fairly low quality output.

I've also played with the Bing Speech API and the output is very good, I've created a Node.js example. You would need to sign up for an API key but this is very easy (you to to https://azure.microsoft.com/en-us/try/cognitive-services/ and select "Speech").

const key = 'your api key here';

function synthesizeSpeech(apiKey)
{
    const fs = require('fs');
    const request = require('request');
    const xmlbuilder = require('xmlbuilder');
    const text = process.argv[2] || "The fault, dear Brutus, is not in our stars, But in ourselves, that we are underlings.";
    const outputFile = process.argv[3] || "speech.wav";

    var ssml_doc = xmlbuilder.create('speak')
        .att('version', '1.0')
        .att('xml:lang', 'en-au')
        .ele('voice')
        .att('xml:lang', 'en-au')
        .att('xml:gender', 'Female')
        .att('name', 'Microsoft Server Speech Text to Speech Voice (en-AU, HayleyRUS)')
        .txt(text)
        .end();
    var post_speak_data = ssml_doc.toString();

    console.log('Synthesizing speech: ', text);
    request.post({
        url: 'https://api.cognitive.microsoft.com/sts/v1.0/issueToken',
        headers: {
            'Ocp-Apim-Subscription-Key' : apiKey
        }
    }, function (err, resp, access_token) {
        if (err || resp.statusCode != 200) {
            console.log(err, resp.body);
        } else {
            try {
                request.post({
                    url: 'https://speech.platform.bing.com/synthesize',
                    body: post_speak_data,
                    headers: {
                        'content-type' : 'application/ssml+xml',
                        'X-Microsoft-OutputFormat' : 'riff-16khz-16bit-mono-pcm',
                        'Authorization': 'Bearer ' + access_token,
                        'X-Search-AppId': '9FCF779F0EFB4E8E8D293EEC544221E9',
                        'X-Search-ClientID': '0A13B7717D0349E683C00A6AEA9E8B6D',
                        'User-Agent': 'Node.js-Demo'
                    },
                    encoding: null
                }, function (err, resp, data) {
                    if (err || resp.statusCode != 200) {
                        console.log(err, resp.body);
                    } else {
                        try {
                            console.log('Saving output to file: ', outputFile);
                            fs.writeFileSync(outputFile, data);
                        } catch (e) {
                            console.log(e.message);
                        }
                    }
                });
            } catch (e) {
                console.log(e.message);
            }
        }
    });
}

synthesizeSpeech(key);

Also check out the MARY project here: http://mary.dfki.de/, this is an open source server that you can install, the voice output is very good, you could make calls to the server from node.js.

If you install the Mary Speech engine (quite easy):

"use strict";

const fs = require('fs');
const request = require('request');
const text = process.argv[2] || "The fault, dear Brutus, is not in our stars, But in ourselves, that we are underlings.";
const outputFile = process.argv[3] || "speech_mary_output.wav";

const options = {
    url: `http://localhost:59125/process?INPUT_TEXT=${text}!&INPUT_TYPE=TEXT&OUTPUT_TYPE=AUDIO&AUDIO=WAVE_FILE&LOCALE=en_US&VOICE=cmu-slt-hsmm`,
    encoding: null // Binary data.
}

console.log('Synthesizing speech (using Mary engine): ', text);
console.log('Calling: ', options.url);
request.get(options, function (err, resp, data) {
    if (err || resp.statusCode != 200) {
        console.log(err, resp.body);
    } else {
        try {
            console.log(`Saving output to file: ${outputFile}, length: ${data.length} byte(s)`);
            fs.writeFileSync(outputFile, data, { encoding: 'binary'});
        } catch (e) {
            console.log(e.message);
        }
    }
});

This will synthesize speech for you. No API key required!

You can use .content() to retrieve the HTML at the current point in time. The pre-edit question wrongly assumed that .content() returned the original. Running this resulting HTML into jsdom allows you to execute JS on the DOM without being affected by the original page.

I had the same issue where puppeteer was running okay on my local environment but when i deployed to AWS EC2 i face up the same error shared loading libraries Solution

1. First check the version of nodejs you are running and if its not less than v14.0 or greater than v14.0. Upgrade or downgrade (recommended to upgrade) and restart your app then try.

The most common cause is a bug in Node.js v14.0.0 which broke extract-zip, the module Puppeteer uses to extract browser downloads into the right place. The bug was fixed in Node.js v14.1.0, so please make sure you're running that version or higher. Alternatively, if you cannot upgrade, you could downgrade to Node.js v12, but we recommend upgrading when possible.

2. Trivial:- Make sure the directory where your project folder is located is not owned by root.

For those who might have experience this issue while running on windows enviroment, You can try to pass ignoreDefaultArgs: ['--disable-extensions'] option when launching it chromium from code i.e

const browser = await puppeteer.launch({ignoreDefaultArgs: ['--disable-extensions']})

This will deactivate default behaviour of puppeteer from disabling any extensions usually used by chromium/chrome.

Linux and MAcOS uses

The issues that results in this error

UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process! error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory TROUBLESHOOTING

is mostly but not all the times caused by missing dependencies that are required in the latest version. The good thing is you can easily check the missing chrome dependencies causing the crash.

• Make sure you are in the root folder of your project
• Navigate to node_modules folder
• Navigate to the folder where puppeteer chrome Linux tools are installed

• cd /project_folder/node_modules/puppeteer/.local-chromium/linux-some number/chrome-linux
  replace the linux-some number with whatever ls will output
• ls at /.local-chromium to check name of your directory

• At the last directory [ chrome-linux ] run below command to check the missing dependencies

  ldd chrome | grep not

if you see any missing dependencies, run this command to install everything and restart your application.

sudo apt-get install ca-certificates fonts-liberation libappindicator3-1 libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm1 libgcc1 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 lsb-release wget xdg-utils

Voila!! everything should be fixed

In the HTML you’ve provided, the yt-formatted-string element you want is a direct child of the second td under the second tr, but you try to match it a yt-formatted-string that’s a direct child of the second tr. You need to fix your selector. For example:

console.log("HTML:", document.querySelector("#details-container > table > tbody > tr:nth-child(2) > td:nth-child(2) > yt-formatted-string").innerHTML)

<div id="details-container" class="style-scope ytd-channel-about-metadata-renderer">
  <yt-formatted-string class="subheadline style-scope ytd-channel-about-metadata-renderer">Details</yt-formatted-string>
  <table class="style-scope ytd-channel-about-metadata-renderer">
    <tbody class="style-scope ytd-channel-about-metadata-renderer">
      <tr class="style-scope ytd-channel-about-metadata-renderer">
        <td class="label style-scope ytd-channel-about-metadata-renderer">
          <yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer"></yt-formatted-string>
        </td>
        <td class="style-scope ytd-channel-about-metadata-renderer">
          <ytd-button-renderer align-by-text="" class="style-scope ytd-channel-about-metadata-renderer" button-renderer=""></ytd-button-renderer>
          <div id="captcha-container" class="style-scope ytd-channel-about-metadata-renderer"></div>
          <div id="email-container" class="style-scope ytd-channel-about-metadata-renderer"></div>
          <a id="email" target="_blank" class="style-scope ytd-channel-about-metadata-renderer" href="mailto:undefined" hidden=""></a>
        </td>
      </tr>
      <tr class="style-scope ytd-channel-about-metadata-renderer">
        <td class="label style-scope ytd-channel-about-metadata-renderer">
          <yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer"><span class="deemphasize style-scope yt-formatted-string"> Location:   </span></yt-formatted-string>
        </td>
        <td class="style-scope ytd-channel-about-metadata-renderer">
          <yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer">YourCountry</yt-formatted-string>
        </td>
      </tr>
    </tbody>
  </table>
</div>

And you should be able to call $$eval &c. if you have an ElementHandle. The problem is that your selector didn’t match, so you didn’t have one.

This code is wrong:

const emailOptOutConfirmedValue = await frame.$('#email-optout-8hv3a', e => e.getAttribute('data-com.user-edited'))
expect(emailOptOutConfirmedValue).to.include('yes')

You're using frame.$(selector). Notice how it takes only one argument. The second argument is ignored and your call returns a handle to a DOM element, which causes the expect(...).to.include(...) to fail with a complaint that it cannot test that thing.

You should use frame.$eval(selector, pageFunction[, ...args]) instead. This call will call the function passed as a second argument on the result of applying the selector. So the code should be:

const emailOptOutConfirmedValue = await frame.$eval('#email-optout-8hv3a', e => e.getAttribute('data-com.user-edited'))
expect(emailOptOutConfirmedValue).to.include('yes')

I've left your test intact above, but it seems to me what you'd be looking for here is for a specific value for the attribute, so I'd use this test:

expect(emailOptOutConfirmedValue).to.equal('yes')

The inclusion test would pass if the attribute's value is baryesfoo.

There is an option to save user data using the userDataDir option when launching puppeteer. This stores the session and other things related to launching chrome.

puppeteer.launch({
  userDataDir: "./user_data"
});

It doesn't go into great detail but here's a link to the docs for it: https://pptr.dev/#?product=Puppeteer&version=v1.6.1&show=api-puppeteerlaunchoptions

There's a few things I notice might be causing your issues. You need to add async to your describe block. Also, "describe" groups together multiple tests so you're missing an it or test block. Jest docs also note adding the expect.assertions(NUM_OF_ASSERTIONS); I'd do something like:

const puppeteer = require('puppeteer');
const { toMatchImageSnapshot } = require('jest-image-snapshot');
expect.extend({ toMatchImageSnapshot });
const timeout = 5000;

async function myStoryLinkTest(page) {
  const selector = `a[href*="selectedStory="]`;

  await page.goto('http://localhost:8080');

  await page.evaluate(() => {
    Array.from(document.querySelectorAll('div[data-name]'), item => {
      item.addEventListener('click', () => {});
      item.click();
    });
  });

  const storyLinks = await page.evaluate(selector => {
    return Array.from(document.querySelectorAll(selector), story => {
      let href = story.href;
      let name = story.text.replace(/[^A-Z0-9]/gi, '-').replace(/-{2,}/, '-');
      let component = href.match(/selectedKind=(.*?)\&/).pop();
      return { href: href, name: component + '-' + name };
    });
  });

  return storyLinks;
}

describe('visual tests', async () => {
    let page, browser;

    beforeAll(async () => {
      browser = await puppeteer.connect({ browserWSEndpoint });
      page = await browser.newPage();
    });

    afterAll(async () => {
      await page.close();
      await browser.disconnect();
    });

    it('should do something with storyLinks', async () => {
        expect.assertions(1);
        const storyLinkResult = await myStoryLinkTest(page);
        expect(storyLinkResult).toEqual('Some value you expect');
     }, timeout);
  });

Author of puppeteer-cluster here.

Quote from the docs:

cluster.queue(..): [...] Be aware that this function only returns a Promise for backward compatibility reasons. This function does not run asynchronously and will immediately return.

cluster.execute(...): [...] Works like Cluster.queue, just that this function returns a Promise which will be resolved after the task is executed. In case an error happens during the execution, this function will reject the Promise with the thrown error. There will be no "taskerror" event fired.

When to use which function:

• Use cluster.queue if you want to queue a large number of jobs (e.g. list of URLs). The task function needs to take care of storing the results by printing them to console or storing them into a database.
• Use cluster.execute if your task function returns a result. This will still queue the job, so this is like calling queue in addition to waiting for the job to finish. In this scenario, there is most often a "idling cluster" present which is used when a request hits the server (like in your example code).

So, you definitely want to use cluster.execute as you want to wait for the results of the task function. The reason, you do not see any errors is (as quoted above) that the errors of the cluster.queue function are emitted via a taskerror event. The cluster.execute errors are directly thrown (Promise is rejected). Most likely, in both cases your jobs fail, but it is only visible for the cluster.execute