Instead of

await page.click(".pbi-glyph-chevronrightmedium");

use

await page.$eval(".pbi-glyph-chevronrightmedium", el => el.click());

(source)

From puppeteer docs:

The method runs document.querySelector within the page. If no element matches the selector, the return value resolves to null.

1) null doesn't have length.

2) ElementHandle.$ returns a promise.

change the condition to:

if (await section.$(".mn-contact-phone"))

or if there are multiple elements:

if (await section.$$(".mn-contact-phone").length > 0)

addStyleTag:

You can use page.addStyleTag to add some style which will either add a link or style tag based on your options which can be a url, path or some css content.

// url
await page.addStyleTag({url: 'http://example.com/style.css'})

// path, can be relative or absolute path
await page.addStyleTag({path: 'style.css'})

// content
await page.addStyleTag({content: '.body{background: red}'})

evaluateOnNewDocument:

If you want to apply on each page/navigation, you can use page.evaluateOnNewDocument with this snippet.

await page.evaluateOnNewDocument(()=>{
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = '.body{background: red}'; // the css content goes here
  document.getElementsByTagName('head')[0].appendChild(style);
});

There are a few things you can improve in your code:

(async()=>{

  log('start playwright async');

  let maxRunners = 1;
  let running = 0;
  let list = [1,2,3,4,5,6,7,8,9,0,11,12,13,14,15];

  log('start job');
  const promises = [];
  while (list.length > 0) {

      if (running < maxRunners) {
          log('runner started');
          running++;

          let entry = list[0];
          list.shift();

          log('start browser loop');
          for (const browserType of ['chromium', 'firefox', 'webkit']) {
              log('fire async');
              promises.push((async () => {
                  log('loop next');
                  log('launch: ', browserType);
                  const browser = await playwright[browserType].launch({
                      headless: false
                  });
                  log(browserType, ' launched');
                  const context = await browser.newContext();
                  log('open new page');
                  const page = await context.newPage('http://whatsmyuseragent.org/');
                  log('page opened');
                  log('make screenshot');
                  await page.screenshot({path: `example-${browserType}.png`});
                  log('screenshot made');
                  log('close browser');
                  await browser.close();
                  log('browser closed');
                  log('loop succeed');

                  running--;
              })());
              log('end async');
          }
          log('end loop');
      } else {
        await Promise.all(promises);
      }
  }

  await Promise.all(promises);
  log('job finished');
  log('end playwright script');

  function log(...msgs) {
      let date = new Date();
      let timeString = date.toISOString().substr(11, 8);
      //date.setSeconds(45); // specify value for SECONDS here
      //var timeString = date.toISOString().substr(11, 8);
      let msg = '';
      for (let i in msgs) {
          msg += msgs[i];
      }

      console.log(timeString, ':', msg);
  }
})()

Let's wrap everything in an async function

(async()=>{
)();

Then, let's keep track of those tasks/promises:

const promises = [];
...
log('fire async');
promises.push((async () => {
})());

If you get out of workers you need to wait for them:

if (running < maxRunners) {
...
} else {
   await Promise.all(promises);
}

You should get running with this.

No, what you want is not easily possible like that. The library jest-image-snapshot uses the library pixelmatch to compare two images. That means it actually compares the pixels of the image without executing any logic on the document itself.

You have three options:

1. Use failureThreshold to define how much can differ
2. Remove the element from the page before taking the screenshot (as you already proposed)
3. Remove/Black the element in the image

Option 1: Use failureThreshold

The library has an option called failureThreshold built-in, which allows to define a threshold when comparing the images. This threshold is for the whole image and not specific to elements or parts of the image. Depending on your use case, it might be useful if the part of the page you want to ignore is small and other minor changes might be tolerable.

Code sample

it('...', async () => {
    // ...
    expect(image).toMatchImageSnapshot({
        failureThreshold: '0.01',
        failureThresholdType: 'percent'
    });
});

Option 2: Remove the element from the page

This would be the easiest way to do it. Remove the element that you want to ignore. If the remaining page does not completely change by this, this might be the easiest and best way.

Code sample

it('...', async () => {
    const page = await browser.newPage();
    await page.goto('...');
    await page.execute(() => {
        // remove element from the DOM
        const el = document.querySelector('#element-selector');
        el.parentElement.removeChild(el);
    });
    const image = await page.screenshot();

    expect(image).toMatchImageSnapshot();
});

Option 3: Remove/Black the element in the image

If option 2 is not viable for some reason, you could also manipulate the image itself. You first, check the position of the element inside the page and its height and weight and then black the part of the image at that position.

To get the position and size of the element you can use the following code:

const [top, left, weight, height] = await page.execute(() => {
    const el = document.querySelector('#element-selector');
    const rect = element.getBoundingClientRect();
    return [rect.top, rect.left, rect.width, rect.height];
});

After that you could use a library like lwip or jimp to directly manipulate the image and paint that part of the image black (or pixelate) it before comparing them.

In case of Grant solution, you shouldn't forget to remove event listener and to wait for it. You can try this solution, it works for me. I had similar problem.

async waitForTransitionEnd(element) {
  await page.evaluate((element) => {
    return new Promise((resolve) => {
      const transition = document.querySelector(element);
      const onEnd = function () {
        transition.removeEventListener('transitionend', onEnd);
        resolve();
      };
      transition.addEventListener('transitionend', onEnd);
    });
  }, element);
}

And call it:

await page.click('#showMeetings');
await waitForTransitionEnd('#elementWithTransition');
await page.click("#mtgfind");

You can use elementHandle.$x() to evaluate an XPath expression relative to the elementHandle to obtain the parent and siblings of your given element:

const example = await page.$('#example'); // Element
const example_parent = (await example.$x('..'))[0]; // Element Parent
const example_siblings = await example.$x('following-sibling::*'); // Element Siblings

One way is to listen on the event requestfinished

const browser = await puppeteer.launch();
const page = await browser.newPage();

page.on('requestfinished', (request) => {
    console.log(request.url())
});

await page.goto('http://www.wildesoft.net/');
await page.waitFor(5000);

await browser.close();

This will log to the console all resources received e.g.

Short answer

This XPath expression will query a button which contains the text "Button text":

const [button] = await page.$x("//button[contains(., 'Button text')]");
if (button) {
    await button.click();
}

To also respect the <div class="elements"> surrounding the buttons, use the following code:

const [button] = await page.$x("//div[@class='elements']/button[contains(., 'Button text')]");

Explanation

To explain why using the text node (text()) is wrong in some cases, let's look at an example:

<div>
    <button>Start End</button>
    <button>Start <em>Middle</em> End</button>
</div>

First, let's check the results when using contains(text(), 'Text'):

• //button[contains(text(), 'Start')] will return both two nodes (as expected)
• //button[contains(text(), 'End')] will only return one nodes (the first) as text() returns a list with two texts (Start and End), but contains will only check the first one
• //button[contains(text(), 'Middle')] will return no results as text() does not include the text of child nodes

Here are the XPath expressions for contains(., 'Text'), which works on the element itself including its child nodes:

• //button[contains(., 'Start')] will return both two buttons
• //button[contains(., 'End')] will again return both two buttons
• //button[contains(., 'Middle')] will return one (the last button)

So in most cases, it makes more sense to use the . instead of text() in an XPath expression.