How to use executionContext method in Puppeteer

You can try to change this:

await page.goto(
  'https://www.ncbi.nlm.nih.gov/gene/?term=AGAP8#see-all');

into this:

  await page.goto(
    'https://www.ncbi.nlm.nih.gov/gene/?term=AGAP8#see-all', {waitUntil: 'networkidle'});

Or, you can create a function listenFor() to listen to a custom event on page load:

function listenFor(type) {
  return page.evaluateOnNewDocument(type => {
    document.addEventListener(type, e => {
      window.onCustomEvent({type, detail: e.detail});
    });
  }, type);
}`

await listenFor('custom-event-ready'); // Listen for "custom-event-ready" custom event on page load.

LE:

This also might come in handy:

await page.waitForSelector('h3'); // replace h3 with your selector

First, you have to expose a function that can be called from within the page. Second, you listen for the event and call the exposed function and pass on the event data.

// Expose a handler to the page
await page.exposeFunction('onCustomEvent', ({ type, detail }) => {
    console.log(`Event fired: ${type}, detail: ${detail}`);
});

// listen for events of type 'status' and
// pass 'type' and 'detail' attributes to our exposed function
await page.evaluateOnNewDocument(() => {
    window.addEventListener('status', ({ type, detail }) => {
        window.onCustomEvent({ type, detail });
    });
});

await page.goto(/* ... */);

If there is an event status fired in the page now (like the code you have given), you would see it being logged in the console of your Node.js application.

As posted in the comments, a more complex example can be found in the puppeteer examples.

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.

The page you linked uses Bootstrap, which has the following rule in its set (you can find it here):

@page{size:a3}

This will limit the height of the page to the size of a3.

You can either remove the rule (or Bootstrap altogether) from the website or add the following code before calling page.pdf:

await page.addStyleTag({
    content: '@page { size: auto; }',
})

You can use

document.getElementById

You want the text content so use :

var res = document.getElementById('dt-card-entry_info').textContent;

Your method can be used like this then :

const text = await page.evaluate(() => {
        const el = document.getElementById('dt-card-entry_info');
        return el.textContent;
    })

I don't like the await pageEval in the const def, so I would change it outside the scope of the eval.

This is because the pageEval is a promise, so you will need in turn to return a promise of the string content. Read More Here

let text = '';
await page.evaluate(() => {
    const el = document.getElementById('dt-card-entry_info');
    text = el.textContent;
})
console.log(text);

You can it working here : https://jsfiddle.net/9s4zxvLk/

The developer tools in Chrome won't be able to hook these fields because they're not part of the DOM; they're fields that are generated natively by Chromium itself when a server indicates that authentication via HTTP Basic Authentication is required.

Fortunately, puppeteer resides above both the DOM and the native layers of the Chromium instance it spawns and exposes the page.authenticate() method to use to handle situations like this. Call page.authenticate() prior to navigating to the page which asks for Basic Authentication credentials to set the username/password pair to use:

const puppeteer = require('puppeteer');

(async () => {
    let url = 'http://intranet...../'
    let browser = await puppeteer.launch()
    let page = await browser.newPage()
    await page.authenticate({'username':'YOUR_BASIC_AUTH_USERNAME', 'password': 'YOUR_BASIC_AUTH_PASSWORD'});
    await page.goto(url, {waitUntil: 'networkidle2' })

    await page.pdf({
        format:"A4",
        path:'./Speiseplan.pdf',
        displayHeaderFooter: false,
        printBackground:true
    })
    process.exit()
})();

Sony AK on DEV.to has a short-but-sweet article with sample code illustrating page.authenticate()'s usage.

You need to use 'ArrowDown'.

The keyboard.press functions wants a string as name of the key. https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#keyboardpresskey-options

So the line to press the down arrow would be:

await page.keyboard.press('ArrowDown');

Here is the list of available keys: https://github.com/puppeteer/puppeteer/blob/main/src/common/USKeyboardLayout.ts

You might need to include isMobile: true in your viewport options (page.setViewport()) and set the user agent (page.setUserAgent()) to match a specific mobile device. Puppeteer provides a convenience method to do both automatically with page.emulate().

Example:

const puppeteer = require('puppeteer');
const devices = puppeteer.devices;
const iPhone = devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.google.com');
  // other actions...
  await browser.close();
});

demo

You can use page.evaluate to manipulate DOM as you see fit:

await page.evaluate( () => document.getElementById("inputID").value = "")

However sometimes just manipulating a given field might not be enough (a target page could be an SPA with event listeners), so emulating real keypresses is preferable. The examples below are from the informative issue in puppeteer's Github concerning this task.

Here we press Backspace as many times as there are characters in that field:

const inputValue = await page.$eval('#inputID', el => el.value);
// focus on the input field
await page.click('#inputID');
for (let i = 0; i < inputValue.length; i++) {
  await page.keyboard.press('Backspace');
}

Another interesting solution is to click the target field 3 times so that the browser would select all the text in it and then you could just type what you want:

const input = await page.$('#inputID');
await input.click({ clickCount: 3 })
await input.type("Blah");