How to use copyFile method in Puppeteer

Using PerformanceObserver you can get timing of each request by specifying entry type to "resource". Add each entry to object window and then evaluate it with puppeteer.

const puppeteer = require('puppeteer');

const perfObsRunner = () => {
  window.resourceList = [];
  new PerformanceObserver((list) => {
    list.getEntries().forEach((item) => {
      window.resourceList = [...window.resourceList, item.toJSON()]
    })
  }).observe({type: 'resource', buffered: true});
}


const getResourceTiming = async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.evaluateOnNewDocument(perfObsRunner);
  await page.goto("https://pptr.dev/", { waitUntil: 'load', timeout: 30000 });
  const resource = await page.evaluate(() => ({ resource: window.resourceList }))

  await page.close();
  await browser.close();
}

From response you can get information about request, like: startTime, duration, responseStart, responseEnd. Example response:

resource = [
    {
      "name": "https://pptr.dev/style.css",
      "entryType": "resource",
      "startTime": 55.9099999954924,
      "duration": 0,
      "initiatorType": "link",
      "nextHopProtocol": "h2",
      "workerStart": 0,
      "redirectStart": 0,
      "redirectEnd": 0,
      "fetchStart": 55.9099999954924,
      "domainLookupStart": 55.9099999954924,
      "domainLookupEnd": 55.9099999954924,
      "connectStart": 55.9099999954924,
      "connectEnd": 55.9099999954924,
      "secureConnectionStart": 55.9099999954924,
      "requestStart": 0,
      "responseStart": 0,
      "responseEnd": 55.9099999954924,
      "transferSize": 0,
      "encodedBodySize": 3704,
      "decodedBodySize": 14326,
      "serverTiming": [],
      "workerTiming": []
    },
    {
      "name": "https://pptr.dev/index.js",
      "entryType": "resource",
      "startTime": 56.08000000938773,
      "duration": 0,
      "initiatorType": "script",
      "nextHopProtocol": "h2",
      "workerStart": 0,
      "redirectStart": 0,
      "redirectEnd": 0,
      "fetchStart": 56.08000000938773,
      "domainLookupStart": 56.08000000938773,
      "domainLookupEnd": 56.08000000938773,
      "connectStart": 56.08000000938773,
      "connectEnd": 56.08000000938773,
      "secureConnectionStart": 56.08000000938773,
      "requestStart": 0,
      "responseStart": 0,
      "responseEnd": 56.08000000938773,
      "transferSize": 0,
      "encodedBodySize": 52861,
      "decodedBodySize": 149772,
      "serverTiming": [],
      "workerTiming": []
    },
    {
      "name": "https://raw.githubusercontent.com/GoogleChrome/puppeteer/main/README.md",
      "entryType": "resource",
      "startTime": 98.98000000976026,
      "duration": 1.6949999844655395,
      "initiatorType": "fetch",
      "nextHopProtocol": "h2",
      "workerStart": 0,
      "redirectStart": 0,
      "redirectEnd": 0,
      "fetchStart": 98.98000000976026,
      "domainLookupStart": 0,
      "domainLookupEnd": 0,
      "connectStart": 0,
      "connectEnd": 0,
      "secureConnectionStart": 0,
      "requestStart": 0,
      "responseStart": 0,
      "responseEnd": 100.6749999942258,
      "transferSize": 0,
      "encodedBodySize": 0,
      "decodedBodySize": 0,
      "serverTiming": [],
      "workerTiming": []
    },
]

For the location, the <span> element right before, where the marker icon lives, has a quite unique class tv-profile__title-info-icon--place, so you can grab that location textnode with

const loc = document.querySelector('.tv-profile__title-info-icon--place').nextSibling.textContent;

For the anchor elements you know they will differ by their href attribute (that's why you want it right?), so you can use that as a selector. For instance

• twitter link: a[href*="://twitter.com/"]
• youtube link: a[href*="://www.youtube.com/"]

And the one link that won't match will be the personal site link:

a.tv-profile__title-info-item:not([href*="://twitter.com"]):not([href*="://www.youtube.com"])

The problem is that not all tr are having the child elements you are expecting. This might be because of a td tag with a colspan. So you should first filter your array to sort the other elements out.

Code

Change your lines including your map function beginning from let movimentosInfo = ... to this:

let movimentosInfo = rowns.filter(row => {
    return row.querySelector("tr td:first-child") && row.querySelector("tr td:first-child + td");
}).map(row => {
    let data = row.querySelector("tr td:first-child").textContent;
    let descricao = row.querySelector("tr td:first-child + td").textContent;
    return { data, descricao };
});

This adds a filter function which tests whether the desired elements do exist before mapping their content.

It appears that page#cookies returns some cookies with the session=true,expires=0 configuration. setCookie ignores these values.

I worked around this by constructing a new cookies array overriding the expires and session properties.

const cookies = await page.cookies();

const sessionFreeCookies = cookies.map((cookie) => {
  return {
    ...cookie,
    expires: Date.now() / 1000 + 10 * 60,
    session: false
  };
});

At the time writing this answer, session property is not documented. Refer to the following issue https://github.com/GoogleChrome/puppeteer/issues/980.

userInfo isn't accessible in puppeteer evaluation

you can use evaluate method with pushing a param, see here for it Puppeteer: pass variable in .evaluate()

I think using $eval might even be a little bit cleaner:

await page.$eval('input[name=email]', e => e.blur());

If you want full html same as inspect? Here it is:

    const puppeteer = require('puppeteer');

    (async function main() {
      try {
        const browser = await puppeteer.launch();
        const [page] = await browser.pages();

        await page.goto('https://example.org/', { waitUntil: 'networkidle0' });
        const data = await page.evaluate(() => document.querySelector('*').outerHTML);

        console.log(data);

        await browser.close();
      } catch (err) {
        console.error(err);
      }
    })();

I was trying to test an Angular app and the click and type related actions was not working. Finally it was solved with MouseEvent and KeyboardEvent API.

It work with both MouseEvent and KeyboardEvent. Here is example with MouseEvent.

function simulateEvent(eventx, elem) {
    const event = new MouseEvent(eventx, {
        view: window,
        bubbles: true,
        cancelable: true,
    });
    return elem.dispatchEvent(event);
};

function simulateType(selector, value) {
    const elem = document.querySelector(selector);
    elem.value = value;
    const events = ['click', 'focus', 'keydown', 'keypress', 'mousedown', 'compositionend', 'compositionstart', 'blur']
    for (let fakeEvent of events) {
        simulateEvent(fakeEvent, elem);
    }
};

It sets the value to the input field, and sends a lot of events as you can see.

Why? Some website watches for keydown, keypress etc. however, I have seen a lot of website did not even let me submit the form if I did not click on the input fields.

I had a similar problem. I put in a delay of 400ms before snapping the screenshot and it seems to have fixed the problem. If you come up with something better I'd love to know it.