Discover AI-native insights at Testμ Conference‘25

How to use checkFiredEvents method in Puppeteer

Best JavaScript code snippet using puppeteer

NavigationWatchdog.js

...76  _checkNavigationComplete() {77    if (this._navigatedFrame.isDetached()) {78      this._resolveCallback(new Error('Navigating frame was detached'));79    } else if (this._navigatedFrame._lastCommittedNavigationId === this._targetNavigationId80        && checkFiredEvents(this._navigatedFrame, this._firedEvents)) {81      this._resolveCallback(null);82    }83    function checkFiredEvents(frame, firedEvents) {84      for (const subframe of frame._children) {85        if (!checkFiredEvents(subframe, firedEvents))86          return false;87      }88      return firedEvents.every(event => frame._firedEvents.has(event));89    }90  }91  _onNavigationAborted(params) {92    if (params.frameId === this._navigatedFrame._frameId && params.navigationId === this._targetNavigationId)93      this._resolveCallback(new Error('Navigation to ' + this._targetURL + ' failed: ' + params.errorText));94  }95  promise() {96    return this._promise;97  }98  dispose() {99    helper.removeEventListeners(this._eventListeners);...

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch({headless: false});4  const page = await browser.newPage();5  await page.type('input[name="q"]', 'puppeteer');6  await page.click('input[name="btnK"]');7  await page.waitForNavigation();8  const firedEvents = await page.evaluate(() => {9    return window.performance.getEntriesByType('navigation');10  });11  console.log(firedEvents);12  await browser.close();13})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch({4  });5  const page = await browser.newPage();6  await page.type('[name="q"]', 'puppeteer');7  await page.click('[name="btnK"]');8  await page.waitForNavigation();9  await page.waitForSelector('#resultStats');10  const result = await page.evaluate(() => {11    const data = [];12    const elements = document.querySelectorAll('.g');13    for (var element of elements) {14      let title = element.querySelector('.LC20lb').innerText;15      let description = element.querySelector('.st').innerText;16      data.push({ title, description });17    }18    return data;19  });20  console.log(result);21  await browser.close();22})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2const expect = require('chai').expect;3(async () => {4    const browser = await puppeteer.launch({5    });6    const page = await browser.newPage();7    await page.setViewport({ width: 1920, height: 1080 });8    await page.type('input[name="q"]', 'puppeteer');9    await page.keyboard.press('Enter');10    await page.waitForNavigation();11    await page.waitForNavigation();12    await page.click('a[href="

Using AI Code Generation

1const puppeteer = require('puppeteer');2const { checkFiredEvents } = require('puppeteer-event-recorder');3(async () => {4  const browser = await puppeteer.launch();5  const page = await browser.newPage();6  await page.type('input[name="q"]', 'puppeteer event recorder');7  await page.click('input[name="btnK"]');8  await page.waitForSelector('div#resultStats');9  await page.waitFor(1000);10  const events = await checkFiredEvents(page);11  console.log(events);12  await browser.close();13})();

Using AI Code Generation

1const { PuppeteerCrawler } = require('apify');2const { checkFiredEvents } = require('apify-shared/utilities');3const puppeteerCrawler = new PuppeteerCrawler({4    handlePageFunction: async ({ request, page }) => {5        await page.goto(request.url, { waitUntil: 'networkidle2' });6        await page.waitFor(3000);7        await checkFiredEvents(page);8        await page.screenshot({ path: 'example.png' });9    },10    handleFailedRequestFunction: async ({ request }) => {11        console.log(`Request ${request.url} failed too many times`);12    },13});14await puppeteerCrawler.run();15`PuppeteerPool` is a pool of [Puppeteer](

Using AI Code Generation

1const puppeteer = require('puppeteer');2const { checkFiredEvents } = require('puppeteer-recorder');3(async () => {4  const browser = await puppeteer.launch();5  const page = await browser.newPage();6  await checkFiredEvents(page, async () => {7    await page.type('input[name="q"]', 'Puppeteer');8    await page.click('input[type="submit"]');9  }, 'test.js');10  await browser.close();11})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2const fs = require('fs');3const path = require('path');4const script = fs.readFileSync(path.join(__dirname, 'checkFiredEvents.js'), 'utf8');5(async () => {6  const browser = await puppeteer.launch();7  const page = await browser.newPage();8  await page.evaluateOnNewDocument(script);9  await page.waitFor(1000);10  await page.evaluate(() => {11    document.querySelector('input[name="q"]').value = 'puppeteer';12  });13  await page.waitFor(1000);14  const events = await page.evaluate(() => {15    return checkFiredEvents('input[name="q"]', 'input');16  });17  console.log(events);18  await browser.close();19})();20[ { type: 'focus', timeStamp: 1661.775000002335 },21  { type: 'input', timeStamp: 1661.775000002335 },22  { type: 'keydown', timeStamp: 1661.775000002335 },23  { type: 'keyup', timeStamp: 1661.775000002335 },24  { type: 'keypress', timeStamp: 1661.775000002335 },25  { type: 'input', timeStamp: 1661.775000002335 },26  { type: 'keydown', timeStamp: 1661.775000002335 },27  { type: 'keyup', timeStamp: 1661.775000002335 },28  { type: 'keypress', timeStamp: 1661.775000002335 },29  { type: 'input', timeStamp: 1661.775000002335 },30  { type: 'keydown', timeStamp: 1661.775000002335 },31  { type: 'keyup', timeStamp: 1661.775000002335 },32  { type: 'keypress', timeStamp: 1661.775000002335 },33  { type: 'input', timeStamp: 1661.775000002335 },34  { type: 'keydown', timeStamp: 1661.775000002335 },35  { type: 'keyup', timeStamp: 1661.775000002335 },36  { type: 'keypress', timeStamp: 1661.775000002335 },37  { type: 'input', timeStamp: 1661

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  await page.screenshot({path: 'example.png'});6  await browser.close();7})();8const puppeteer = require('puppeteer');9(async () => {10  const browser = await puppeteer.launch();11  const page = await browser.newPage();12  await page.screenshot({path: 'example.png'});13  await browser.close();14})();15const puppeteer = require('puppeteer');16(async () => {17  const browser = await puppeteer.launch();18  const page = await browser.newPage();19  await page.screenshot({path: 'example.png'});20  await browser.close();21})();22const puppeteer = require('puppeteer');23(async () => {24  const browser = await puppeteer.launch();

StackOverFlow community discussions

Questions

Discussion

How to download pdf from puppeteer using Nest js as Server Side and React in Client Side?

Puppeteer throws "UnhandledPromiseRejectionWarning: TimeoutError: Navigation Timeout Exceeded" sometimes

How to get input element with puppeteer, when the page load all elements inside frameset tag

How to manipulate the DOM before in-page scripts are executed?

Puppeteer Button Press

Is there a way to add script to add new functions in evaluate() context of chrome+puppeeter?

How to scrape instagram post URL's using puppeteer (Node.js applicatie)

Is it possible to simulate pressing 'Down' arrow?

How to take full web page screenshot using webdriverIO command?

Puppeteer page.click works, but page.evaluate + document click doesn't work

I figured this out for a project once and saved the snippet... The key is loading the PDF into a buffer, and then sending that back to the client.

Here's an example function implemented in a NestJS service:

  async generatePDF(): Promise<Buffer> {
    const content = fs.readFileSync(
      path.resolve(__dirname, './templates/invoice.html'),
      'utf-8'
    )

    const browser = await puppeteer.launch({ headless: true })
    const page = await browser.newPage()
    await page.setContent(content)

    const buffer = await page.pdf({
      format: 'A4',
      printBackground: true,
      margin: {
        left: '0px',
        top: '0px',
        right: '0px',
        bottom: '0px'
      }
    })

    await browser.close()

    return buffer
  }

Here's an example NestJS controller:

  @Get('/:uuid/pdf')
  async getInvoicePdfByUUID(
    @Param('uuid', ParseUUIDPipe) uuid: string,
    @GetUser() user: User,
    @Res() res: Response,
  ): Promise<void> {

    // ...

    const buffer = await this.invoicesService.generatePDF()

    res.set({
      // pdf
      'Content-Type': 'application/pdf',
      'Content-Disposition': 'attachment; filename=invoice.pdf',
      'Content-Length': buffer.length,

      // prevent cache
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      'Pragma': 'no-cache',
      'Expires': 0,
    })

    res.end(buffer)
  }

Note that the above assumes you're using NestJS with Express.

Cheers!

https://stackoverflow.com/questions/62797984/how-to-download-pdf-from-puppeteer-using-nest-js-as-server-side-and-react-in-cli

I encountered the same issue but solved it by replacing

{waitUntil: 'networkidle2'}

with:

{waitUntil: 'domcontentloaded'}

More information here:

[https://github.com/puppeteer/puppeteer/issues/2482][1]

Just to add more information, some sites have a lot of content and so the page might not have loaded within the default timeout of 30 seconds. So do away with this, you can totally remove timeout by doing so:

await page.setDefaultNavigationTimeout(0)

So this can look like this:

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.setDefaultNavigationTimeout(0);
await page.goto('https://www.example.com/', {
waitUntil: 'networkidle2'
});

https://stackoverflow.com/questions/56757822/puppeteer-throws-unhandledpromiserejectionwarning-timeouterror-navigation-tim

You have to get the frame element, from there you can get the frame itself so you can call evaluate inside that frame:

const elementHandle = await page.$('frame[name=SWContent]');
const frame = await elementHandle.contentFrame();
let urls = await frame.evaluate(() => {
  let results = [];
  let items = document.querySelectorAll("input").length;
  return items;
});

https://stackoverflow.com/questions/62684621/how-to-get-input-element-with-puppeteer-when-the-page-load-all-elements-inside

I think the way to achieve what you are looking for is to perform:

set page.setJavaScriptEnabled(false)
enter the page
extract all the scripts and HTML without scripts
set page.setJavaScriptEnabled(true)
enter page.goto(`data:text/html,${HTMLWithoutScript}`) with HTML from step 3
execute your scripts
incject original extracted scripts page.addScriptTag({ content: script }) from step 3

Example

Here is a visualization of your problematic example:

const puppeteer = require('puppeteer');

const html = `
<html>
    <head></head>
    <body>
        <img src="https://picsum.photos/200/300?image=1062" alt="dog ">
        <img src="https://picsum.photos/200/300?image=1072" alt="car ">
        <div class="alts">List of alts: </div>
        <script>
            const images = document.querySelectorAll('img');
            const altsContainer = document.querySelector('.alts');
            images.forEach(image => {
                const alt = image.getAttribute('alt') || 'missing alt ';
                altsContainer.insertAdjacentHTML('beforeend', alt);
            })
        </script>
    </body>
</html>`;

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(`data:text/html,${html}`);
    await page.evaluate(() => {
        document.querySelectorAll('img[alt]').forEach(
            e => e.removeAttribute('alt')
        )
    });
    await page.screenshot({ path: 'image.png' });
    await browser.close();
})();

This code produce:

So remove alts is not working here.

solution

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    
    await page.setJavaScriptEnabled(false);
    await page.goto(`data:text/html,${html}`);
    const { script, HTMLWithoutScript } = await page.evaluate(() => {
        const script = document.querySelector('script').innerHTML;
        document.querySelector('script').innerHTML = '';
        const HTMLWithoutScript = document.body.innerHTML;
        return { script, HTMLWithoutScript }
    });
    
    await page.setJavaScriptEnabled(true);
    await page.goto(`data:text/html,${HTMLWithoutScript}`);
    await page.evaluate(() => {
        document.querySelectorAll('img[alt]').forEach(
            e => e.removeAttribute('alt')
        )
    });
    await page.addScriptTag({ content: script });
    await page.screenshot({ path: 'image.png' });
    await browser.close();
})();

This will produce results as you expect in a question:

https://stackoverflow.com/questions/48577053/how-to-manipulate-the-dom-before-in-page-scripts-are-executed

I've figured it out finally. I found inside that same form an anchor element whose type was submit. I then clicked on it and the form was submitted.

Here's the code I've used:

const form = await page.$('a#topbar-search');
await form.evaluate( form => form.click() );

You can also use the $eval method instead of evaluate:

await page.$eval( 'a#topbar-search', form => form.click() );

https://stackoverflow.com/questions/46342930/puppeteer-button-press

You can register helper functions to run in the browser context in separate page.evaluate() calls. page.exposeFunction() looks tempting, but it doesn't have access to browser context (and you need the document object).

Here is an example of registering helper functions like $x() in the browser context:

const puppeteer = require('puppeteer');

const addHelperFunctions = () => {
    window.$x = xPath => document
        .evaluate(
            xPath,
            document,
            null,
            XPathResult.FIRST_ORDERED_NODE_TYPE,
            null
        )
        .singleNodeValue;
};

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://en.wikipedia.org', { waitUntil: 'networkidle2' });

    await page.evaluate(addHelperFunctions);

    const text = await page.evaluate(() => {
        // $x() is now available
        const featureArticle = $x('//*[@id="mp-tfa"]');

        return featureArticle.textContent;
    });
    console.log(text);
    await browser.close();
})();

You can also keep helpers in a separate file and inject them into the browser context using page.addScriptTag().

Here is an example of it:

helperFunctions.js

window.$x = xPath => document
    .evaluate(
        xPath,
        document,
        null,
        XPathResult.FIRST_ORDERED_NODE_TYPE,
        null
    )
    .singleNodeValue;

And use it:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://en.wikipedia.org', { waitUntil: 'networkidle2' });

    await page.addScriptTag({ path: './helperFunctions.js' });

    const text = await page.evaluate(() => {
        // $x() is now available
        const featureArticle = $x('//*[@id="mp-tfa"]');

        return featureArticle.textContent;
    });
    console.log(text);
    await browser.close();
})();

https://stackoverflow.com/questions/48476356/is-there-a-way-to-add-script-to-add-new-functions-in-evaluate-context-of-chrom

First things first: since Instagram is a heavy javascript-powered React application, the selectors you are after may not be available right after the page is loaded. So we should wait for them to appear in the DOM:

await page.waitForSelector('.v1Nh3.kIKUG._bz0w');

Now with page.evaluate we get the posts, but since you only want the links inside of those posts, let's grab them right away in the query:

const result = await page.evaluate(() => {
    // Get elements into a NodeList
    const elements = document.querySelectorAll('.v1Nh3.kIKUG._bz0w a');
    ...
}

But we cant convert the elements from Nodelist to an Array and just return them, because they're still DOM nodes, complex unserializable objects, and they need to be serializable to be able to return from page.evaluate. So instead of returning the complete nodes we'll just get what we need: urls from href attribute:

const result = await page.evaluate(() => {
    // Get elements into a NodeList
    const elements = document.querySelectorAll('.v1Nh3.kIKUG._bz0w a');

    // Convert elements to an array, 
    // then for each item of that array only return the href attribute
    const linksArr = Array.from(elements).map(link => link.href);

    return linksArr;
});

Other ways to do it

In your question you mentioned page.$$ method. It is indeed applicable here to get handles of the objects we seek. But the code to iterate over them is not pretty:

const results = await page.$$('.v1Nh3.kIKUG._bz0w a')
for (const i in results)
{
   console.log(await(await(await results[i]).getProperty("href")).jsonValue());
}

My favourite way to get those links though would be to use page.$$eval method:

const results = await page.$$eval('.v1Nh3.kIKUG._bz0w a', links => links.map(link => link.href))

It does exactly the same what we did in page.evaluate solution but in a much more concise way.

https://stackoverflow.com/questions/58429471/how-to-scrape-instagram-post-urls-using-puppeteer-node-js-applicatie

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

https://stackoverflow.com/questions/50352613/is-it-possible-to-simulate-pressing-down-arrow

If you want support of all browser and devices use https://github.com/wswebcreation/wdio-image-comparison-service

Alternately, with WebdriverIO 6 (maybe with 5 as well) it's possible to use Puppeteer commands. With Puppeteer, it's possible to take full-page screenshots, see https://github.com/puppeteer/puppeteer/blob/v5.3.1/docs/api.md#pagescreenshotoptions

// Mocha example
describe('Screenshot', () => {
    // replace with beforeAll in Jasmine!
    before(() => {
        // add command to reuse easily everywhere in the project
        // https://webdriver.io/docs/customcommands.html
        browser.addCommand('takeFullPageScreenshot', function (options = {}) {
            // Puppeteer commands should be wrapped with browser.call
            // because they return Promises
            // https://webdriver.io/docs/api/browser/call.html
            return browser.call(async () => {
                // https://webdriver.io/docs/api/browser/getPuppeteer.html
                const puppeteer = await browser.getPuppeteer()
                // now we interact with Puppeteer API
                // https://github.com/puppeteer/puppeteer/blob/v5.3.1/docs/api.md#browserpages
                const pages = await puppeteer.pages()

                // https://github.com/puppeteer/puppeteer/blob/v5.3.1/docs/api.md#pagescreenshotoptions
                return pages[0].screenshot({ ...options, fullPage: true })
            })
        })
    })

    it('should take full page screenshot', () => {
        browser.url('https://stackoverflow.com/questions/64242220/how-to-take-full-web-page-screenshot-using-webdriverio-command')

        // somehow wait for page to load
        expect($('.user-details')).toBeVisible()

        // take screenshot and save to file
        browser.takeFullPageScreenshot({ path: './screenshot.png' })

        // take screenshot but don't save to file
        const screenshot = browser.takeFullPageScreenshot()
    })
})

https://stackoverflow.com/questions/64242220/how-to-take-full-web-page-screenshot-using-webdriverio-command

Short answer

page.evaluate(() => document.querySelector('SELECTOR').click()); just fires the click event
page.click('SELECTOR') tries to mimic human behavior when clicking

Explanation

Let's check the documentation for both methods to really understand what is happening.

`page.evaluate(() => document.querySelector('SELECTOR').click());`

Let's see what the MDN documentation says:

[...] It fires the element's click event.

That's all it does. It just fires the click event, so that all handlers listening to that click event of the element are called. This means, it does not care if the element is outside of the current viewport. The element might even be hidden (via CSS) and the click event would still fire.

Let's compare that to the "puppeteer-way":

`page.click`

The part of the puppeteer documentation regarding page.click:

This method fetches an element with selector, scrolls it into view if needed, and then uses page.mouse to click in the center of the element. [...]

That means, that puppeteer mimics human behavior here. First, the element is scrolled into view, then the mouse is moved on top of the element (triggering any other events like mouseover, mouseenter, etc. on the way). Finally, the button is clicked by simulation a mouse (see the corresponding Mouse class in the puppeteer code). This also triggers any related events (like mousedown).

Complex UI libraries might not like it, when you trigger JavaScript events on your own. Keep in mind, they are often optimized for human interaction, not for interaction with bots. That means, the UI library might listen to the mousedown or mouseenter event (as an example) instead of directly listening to the click event.

Behaving "human-like"

When interacting with an unknown website, it is best to try to behave as human as possible. Even pages that do not have any specific "anti-bot" measures, might use frameworks that expect a specific flow of events.

By the way, you are not the only one having this problem. Check out these questions for similar problems:

https://stackoverflow.com/questions/60827605/puppeteer-page-click-works-but-page-evaluate-document-click-doesnt-work

Blogs

Check out the latest blogs from LambdaTest on this topic:

Apr’22 Updates: Local Testing With Playwright, Puppeteer & Taiko, Test On Microsoft Surface Duo, And Much More!

May this May month bring you a lot of success and happiness! In April, we had a couple of fun events along with sponsoring virtual events like “Techwell STAREAST”, “Unicom EMEA”, “Codeless Conf 2022”, and conducting webinars like How Does Enterprise Accelerate Test And Release Velocity?Last month was quite remarkable, with a handful of jubilant memories to cherish forever and a learning experience to carry forward for the next month.

40 Best UI Testing Tools And Techniques

A good User Interface (UI) is essential to the quality of software or application. A well-designed, sleek, and modern UI goes a long way towards providing a high-quality product for your customers − something that will turn them on.

Complete Selenium WebDriver Tutorial: Guide to Selenium Test Automation

When it comes to web automation testing, there are a number of frameworks like Selenium, Cypress, PlayWright, Puppeteer, etc., that make it to the ‘preferred list’ of frameworks. The choice of test automation framework depends on a range of parameters like type, complexity, scale, along with the framework expertise available within the team. However, it’s no surprise that Selenium is still the most preferred framework among developers and QAs.

Difference Between Web And Mobile Application Testing

Smartphones have changed the way humans interact with technology. Be it travel, fitness, lifestyle, video games, or even services, it’s all just a few touches away (quite literally so). We only need to look at the growing throngs of smartphone or tablet users vs. desktop users to grasp this reality.

How To Speed Up JavaScript Testing With Selenium and WebDriverIO?

This article is a part of our Content Hub. For more in-depth resources, check out our content hub on WebDriverIO Tutorial and Selenium JavaScript Tutorial.

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.