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.

The callback passed to page.evaluate runs in the emulated page context, not in the standard scope of the Node script. Expressions can't be passed between the page and the Node script without careful considerations: most importantly, if something isn't serializable (converted into plain JSON), it can't be transferred.

querySelectorAll returns a NodeList, and NodeLists only exist on the front-end, not the backend. Similarly, NodeLists contain HTMLElements, which also only exist on the front-end.

Put all the logic that requires using the data that exists only on the front-end inside the .evaluate callback, for example:

const numberOfDivs = await page.evaluate(_ => {
  return document.querySelectorAll('div').length;
});

or

const firstDivText = await page.evaluate(_ => {
  return document.querySelector('div').textContent;
});

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);
});

page.waitForNavigation(); waits for navigation after a click or any navigation action that triggers from the page.you should probably add the waitForNavigation after the page.click.

await Promise.all([
  page.click('#loginSubmit'),
  page.waitForNavigation({ waitUntil: 'networkidle0' }),
]);

It will wait until both promises resolves.

So now your initial code would look like this,

const puppeteer = require('puppeteer');

async function main() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.setViewport({width: 1200, height: 720});
  await page.goto('https://www.daum.net', { waitUntil: 'networkidle0' }); // wait until page load
  await page.type('#id', CREDS.username);
  await page.type('#loginPw', CREDS.password);
  // click and wait for navigation
  await Promise.all([
    page.click('#loginSubmit'),
    page.waitForNavigation({ waitUntil: 'networkidle0' }),
  ]);
}

main();

Note: Answer aside, I cannot test this since I don't have a login for daum.net and I cannot see the actual error you are facing. If you can try the solution provided above, and share the results, it'd be much more helpful.

As I commented on the question. The problem is the about:blank location. What I recommend is doing the following:

• Create a web folder.
• Put there your fonts folder.
• Create there an empty.html file. Like this one https://github.com/GoogleChrome/puppeteer/blob/master/test/assets/empty.html
• After doing const page = await browser.newPage(); call await page.goto('file://your path/expressed/as/url/web/empty.html');
• Now your relative path "./fonts/, should work

First of all, return the promise instead of assigning it to a variable.

const findInputFieldByName = (page, inputName) => {
  return new Promise(((resolve, reject) => { // <-- Return it

After that, you can throw error if need.

await findInputFieldByName(page,'identifier').catch(error => {
    throw ('The following error occurred: ' + error) // <-- pass the error to main program
});

    let dd = "undefined";
    while (dd === "undefined" || dd[0] === "undefined"){
      dd = document.getElementsByClassName("PostContent-imageWrapper-rounded")
    }

This loop blocks event loop and prevents the DOM from updating. So maybe try this instead:

  await pg.waitForSelector('.PostContent-imageWrapper-rounded > img');
  let imgSrc = await pg.evaluate(function(){
    let img = document.querySelector('.PostContent-imageWrapper-rounded > img');
    return img.src;
  });
  console.log(imgSrc);

Are you sure the element is loaded & visible before clicking on it? Maybe something like this before you click on it?

await page.waitFor(<selector>,{visible:true})

You may be overthinking it. page.goto returns the response you seem to be looking for:

const puppeteer = require("puppeteer"); // ^19.1.0

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  const url = "https://www.asr.pima.gov/Parcel/GetParcel";
  const finalResponse = await page.goto(url);
  console.log(finalResponse.headers());
  console.log(await page.cookies());
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

Now, let's say you're looking for some other response that's kicked off by the initial page load. A way to do it is by planting the promise without await before goto, then beginning navigation.

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  const url = "https://www.asr.pima.gov/Parcel/GetParcel";
  const finalResponseP = page.waitForResponse(res => res.url() === url);
  await page.goto(url, {waitUntil: "domcontentloaded"});
  const finalResponse = await finalResponseP;
  console.log(finalResponse.headers());
  console.log(await page.cookies());
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

This works for the base url as shown above, but not necessarily, so it's a more general solution than the first code block. If you have multiple responses, you can try Promise.all or add a listener with page.on("response", res => {}).

Based on the follow-up, it sounds like you were expecting cookies to be set on this request, but I don't see any on a visit to the page in my browser.

If you're looking for the cookie that's returned after you enter a search, you can access it as follows:

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  const ua =
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36";
  await page.setUserAgent(ua);
  const url = "https://www.asr.pima.gov/Parcel/GetParcel";
  const finalResponse = await page.goto(url, {waitUntil: "domcontentloaded"});
  console.log(finalResponse.headers());
  await page.type("#parcel", "123-45-678A");
  await Promise.all([
    page.waitForResponse(res => res.url().includes("GetSearchResults")),
    page.click('[type="submit"]'),
  ]);
  console.log(await page.cookies());
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());