How to use compileAndCatchErrors method in Puppeteer

Consider the following element from the webpage you specified:

<div class="central-featured-lang lang1" lang="en">...</div>

You can use className or getAttribute('class') to obtain the content of the class attribute of an element:

const myclassname = await page.evaluate(() => document.querySelector('.lang1' ).className);

console.log(myclassname); // Returns "central-featured-lang lang1"

Or, you can return an iterable array of the classes of an element using classList:

const myclassnamearray = await page.evaluate(() => [...document.querySelector('.lang1').classList]);

console.log(myclassnamearray[0]); // Returns "central-featured-lang"
console.log(myclassnamearray[1]); // Returns "lang1"

There's no built-in variable in NodeJS named document, since it doesn't run in the browser.

If you want to access document, in Puppeteer there's a page.evaluate() function where you can access the document variable (as well as everything else inside client-side JS):

// ...
await page.evaluate(() => {
  document.querySelector("button[type=\"submit\"]").click();
});

Please note though, that all the JavaScript you run will be run on the browser, not in NodeJS, so if you want to get the value back you can return:

const result = await page.evaluate(() => {
  var something = document.getElementById("something");
  return something.innerText; 
});
console.log(result); // will print in the console "blah blah blah"

Likewise if you want to pass variables to the callback you have to give them to the evaluate function:

await page.evaluate((name, age) => {
  // do something with 'name' and 'age'
}, "John", 34);

I think I had the same issue. It is when you have a repeating table header (thead { display: table-header-group }) and the table breaks for printing between tr tags within thead. I couldn't find a way to do it with only the break-after, break-before or break-inside properties. This is a bit of a hack, but here is how I fixed it:

:root {
  --header-height: 60px;
}

th {
    break-inside: avoid;
}

thead th::after {
    content: '';
    display: block;
    height: var(--header-height);
    margin-bottom: -var(--header-height);
    break-inside: avoid;
}

The height and negative margin-bottom are equal to the height of the tr elements below the first tr. In my code I just have 60px and -60px hard coded in, but I wanted to be clear that depending on the height of your table header that you will have to change those values. The height creates the size of element that can't be broken inside by a page break and the negative margin-bottom brings back up the table content so that it is not impacted by the existence of the pseudo-element. It essentially forces the header to be on the next page.

Why console.log does not work

Under the hood, console.log uses util.inspect, which produces output intended for debugging. To create reasonable debugging information, this function will truncate output which would be too long. To quote the docs:

The util.inspect() method returns a string representation of object that is intended for debugging. The output of util.inspect may change at any time and should not be depended upon programmatically.

Solution: Use process.stdout

If you want to write output to stdout you can use process.stdout which is a writable stream. It will not modify/truncate what you write on the stream. You can use it like this:

process.stdout.write(JSON.stringify(data) + '\n');

I added a line break at the end, as the function will not produce a line break itself (in contrast to console.log). If your script does not rely on it you can simply remove it.

Note: It is already pointed in the comments but there is a syntax error in the example. The launch should look like this:

const browser = await puppeteer.launch({
  headless: false,
  args: ['--user-data-dir=C:\\Users\\USER\\AppData\\Local\\Google\\Chrome\\User Data']
});

The error is coming from the fact that you are launching multiple browser instances at the very same time hence the profile directory will be locked and cannot be moved to reuse by puppeteer.

You should avoid starting chromium instances with the very same user data dir at the same time.

Possible solutions

• Make the opened windows sequential, can be useful if you have only a few. E.g.:

const firstFn = async () => await puppeteer.launch() ...
const secondFn = async () => await puppeteer.launch() ...

(async () => {
  await firstFn()
  await secondFn()
})();

• Creating copies of the user-data-dir as User Data1, User Data2 User Data3 etc. to avoid conflict while puppeteer copies them. This could be done on the fly with Node's fs module or even manually (if you don't need a lot of instances).
• Consider reusing Chromium instances (if your use case allows it), with browser.wsEndpoint and puppeteer.connect, this can be a solution if you would need to open thousands of pages with the same user data dir.
  Note: this one is the best for performance as only one browser will be launched, then you can open as many pages in a for..of or regular for loop as you want (using forEach by itself can cause side effects), E.g.:

const puppeteer = require('puppeteer')
const urlArray = ['https://example.com', 'https://google.com']

async function fn() {
  const browser = await puppeteer.launch({
    headless: false,
    args: ['--user-data-dir=C:\\Users\\USER\\AppData\\Local\\Google\\Chrome\\User Data']
  })
  const browserWSEndpoint = await browser.wsEndpoint()

  for (const url of urlArray) {
    try {
      const browser2 = await puppeteer.connect({ browserWSEndpoint })
      const page = await browser2.newPage()
      await page.goto(url) // it can be wrapped in a retry function to handle flakyness

      // doing cool things with the DOM
      await page.screenshot({ path: `${url.replace('https://', '')}.png` })
      await page.goto('about:blank') // because of you: https://github.com/puppeteer/puppeteer/issues/1490
      await page.close()
      await browser2.disconnect()
    } catch (e) {
      console.error(e)
    }
  }
  await browser.close()
}
fn()

The try catch block is a solution.

However, on the accepted answer all errors are silenced!!

You should only catch the Puppeteer TimeOut errors.

try {
  await page.waitForSelector('.foo');
} catch (e) {
  if (e instanceof puppeteer.errors.TimeoutError) {
    // Do something if this is a timeout.
  }
}

References: https://devdocs.io/puppeteer/

Try using defaultViewport: null,

You can use the default page opened by puppeteer, like this:

    async function launchBrowser() {
    const browser = await puppeteer.launch({
        headless: false,
        executablePath: process.env.CHROMIUM_PATH,
        defaultViewport: null,
        ignoreHTTPSErrors: true
    });
    return browser; 
}

const browser = await launchBrowser()
const defaultPages = await browser.pages()
const page = defaultPages[0]
await page.goto('https://www.google.com.my/')

Here the window will also be having only one tab and not that empty tab.

If you need to collect the coverage, it can be fixed by adding /* istanbul ignore next */ before browser contexted functions (lines with .eval) to prevent istanbul coverage injects.

As far as I can tell Puppeteer doesn't allow itself to be launched more than once for the same userDataDir because that folder includes a caching folder which must be unique per puppeteer instance. You can however open multiple pages using the same browser instance. For example:

   const browser = await puppeteer.launch({
      executablePath: "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
      headless: false,
      // excludeSwitches: 'enable-automation',
      args: [
         '--user-data-dir=C:\\Users\\USER\\AppData\\Local\\Google\\Chrome\\User Data'
      ],
   });
   const page1 = await browser.newPage();
   const page2 = await browser.newPage();
   await page1.goto("https://www.bbc.co.uk", {waitUntil: 'networkidle2'});
   await page2.goto("https://www.google.co.uk", {waitUntil: 'networkidle2'});

If you truly need completely isolated Puppeteer processes you'll need to launch each with its own unique userDataDir. You could try building a lightweight profile with just the config files you need and making a copy for each process you launch.

Sorry, that this isn't really a perfect solution but I don't think what you're trying to do is possible.