TestMu 2025 - The Largest Virtual Software Testing Conference is Back | 50,000+ Attendees

How to use navigationResponse method in Puppeteer

Best JavaScript code snippet using puppeteer

secondaryNavigationHelper.test.js

Source: secondaryNavigationHelper.test.js

1const { assert } = require('chai');2const i18next = require('i18next');3const i18nextFsBackend = require('i18next-fs-backend');4const i18nextConfig = require('../../../../config/i18next');5const helper = require('../../../../lib/helpers/secondaryNavigationHelper');6const baseRoute = '/changes-and-enquiries';7const navigationResponse = [{8  text: 'Personal',9  href: `${baseRoute}/personal`,10  visuallyHiddenTextStart: 'Navigate to',11  visuallyHiddenTextEnd: 'details',12}, {13  text: 'Contact',14  href: `${baseRoute}/contact`,15  visuallyHiddenTextStart: 'Navigate to',16  visuallyHiddenTextEnd: 'details',17}, {18  text: 'Award',19  href: `${baseRoute}/award`,20  visuallyHiddenTextStart: 'Navigate to State Pension',21  visuallyHiddenTextEnd: 'details',22}, {23  text: 'Payment',24  href: `${baseRoute}/payment`,25  visuallyHiddenTextStart: 'Navigate to',26  visuallyHiddenTextEnd: 'details',27}];28describe('secondary navigation helper', () => {29  before(async () => {30    await i18next31      .use(i18nextFsBackend)32      .init(i18nextConfig);33  });34  describe('navigationItems', () => {35    it('should be a function', () => {36      assert.isFunction(helper.navigationItems);37    });38    it('should return an array', () => {39      assert.isArray(helper.navigationItems());40    });41    it('should return an array with 4 items', () => {42      assert.lengthOf(helper.navigationItems(), 4);43    });44    it('should return an array with no selected value when undefined', () => {45      assert.deepEqual(helper.navigationItems(), navigationResponse);46    });47    it('should return an array with no selected value when does not match', () => {48      assert.deepEqual(helper.navigationItems('foo'), navigationResponse);49    });50    it('should return an array with selected value when personal selected', () => {51      const selectedNavigationResponse = JSON.parse(JSON.stringify(navigationResponse));52      selectedNavigationResponse[0].selected = true;53      assert.deepEqual(helper.navigationItems('personal'), selectedNavigationResponse);54    });55    it('should return an array with selected value when contact selected', () => {56      const selectedNavigationResponse = JSON.parse(JSON.stringify(navigationResponse));57      selectedNavigationResponse[1].selected = true;58      assert.deepEqual(helper.navigationItems('contact'), selectedNavigationResponse);59    });60    it('should return an array with selected value when award selected', () => {61      const selectedNavigationResponse = JSON.parse(JSON.stringify(navigationResponse));62      selectedNavigationResponse[2].selected = true;63      assert.deepEqual(helper.navigationItems('award'), selectedNavigationResponse);64    });65    it('should return an array with selected value when payment selected', () => {66      const selectedNavigationResponse = JSON.parse(JSON.stringify(navigationResponse));67      selectedNavigationResponse[3].selected = true;68      assert.deepEqual(helper.navigationItems('payment'), selectedNavigationResponse);69    });70  });...

multiple-headers.js

Source: multiple-headers.js

1 (async function(testRunner) {2  var {page, session, dp} = await testRunner.startURL(3      '../resources/test-page.html',4      `Tests that multiple HTTP headers with same name are correctly folded into one LF-separated line.`);5  const url = 'http://127.0.0.1:8000/inspector-protocol/network/resources/multiple-headers.php';6  await dp.Network.enable();7  await dp.Page.enable();8  session.evaluate(`fetch("${url}?fetch=1").then(r => r.text())`);9  const fetchResponse = (await dp.Network.onceResponseReceived()).params.response;10  testRunner.log(`Pragma header of fetch of ${fetchResponse.url}: ${fetchResponse.headers['Access-Control-Pragma']}`);11  await dp.Network.onceLoadingFinished();12  session.evaluate(`13    var f = document.createElement('frame');14    f.src = "${url}";15    document.body.appendChild(f);16  `);17  const navigationResponse = (await dp.Network.onceResponseReceived()).params.response;18  testRunner.log(`Pragma header of navigation to ${navigationResponse.url}: ${navigationResponse.headers['Access-Control-Pragma']}`);19  testRunner.completeTest();...

data-url-status.js

Source: data-url-status.js

1(async function(testRunner) {2  var {page, session, dp} = await testRunner.startURL(3      '../resources/test-page.html',4      `Tests that network instrumentation indicates HTTP 200 status for data: URLs.`);5  dp.Network.enable();6  dp.Page.enable();7  dp.Page.navigate({url: 'data:text/html,<div>Hello, world!</div>'});8  const navigationResponse = (await dp.Network.onceResponseReceived()).params.response;9  testRunner.log(`Navigation status: ${navigationResponse.status} (${navigationResponse.statusText})`);10  session.evaluate(`fetch('data:text/plain,Hello again!');`);11  const fetchResponse = (await dp.Network.onceResponseReceived()).params.response;12  testRunner.log(`Fetch status: ${fetchResponse.status} (${fetchResponse.statusText})`);13  testRunner.completeTest();...

index.js

Source: index.js

...10      exact: 'WNW'11    }12  }13  const expectedResponse = 'You are 1.1km west of Polehill reserve'14  const actual = navigationResponse(15    navigation.distance,16    navigation.compassDirection.rough,17    destination.properties.name18  )19  t.is(actual, expectedResponse, expectedResponse)20  t.end()...

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  console.log(response.status());6  await browser.close();7})();8Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium. The following example launches a full version of Chrome:9const puppeteer = require('puppeteer');10(async () => {11  const browser = await puppeteer.launch({headless: false});12  const page = await browser.newPage();13  await page.screenshot({path: 'example.png'});14  await browser.close();15})();16Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium. The following example launches a full version of Chrome:17const puppeteer = require('puppeteer');18(async () => {19  const browser = await puppeteer.launch({headless: false});20  const page = await browser.newPage();21  await page.screenshot({path: 'example.png'});22  await browser.close();23})();24Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium. The following example launches a full version of Chrome:25const puppeteer = require('puppeteer');26(async () => {27  const browser = await puppeteer.launch({headless: false});28  const page = await browser.newPage();29  await page.screenshot({path: 'example.png'});30  await browser.close();31})();

StackOverFlow community discussions

Questions

Discussion

Puppeteer doesn't work at VPS (DigitalOcean)

How to get the src attribute of an image with Puppeteer? I am getting 'Cannot read property 'getAttribute' of null' error

Puppeteer iterate table cells and click specific cells

How to scrape inside <div> list using puppeteer

Return a list of divs with the same selector using puppeteer

How to generate chartjs charts to pdf using laravel?

Getting all elements on the page with javascript

How to imitate mouse scroll inside div in popup with puppeteer?

Puppeteer how to retry url fetch with delay if it failed

Getting custom element using puppeteer and then do click action

SOLVED

The problem was an IP block, which I can fix using proxy.

Now I use --proxy-server argument like this:

const browser = await puppeteer.launch({
    executablePath: '/opt/google/chrome/chrome',
    args: [
        '--disable-setuid-sandbox',
        '--no-sandbox',
        '--disable-gpu',
        '--no-first-run',
        `--proxy-server=${proxyServer}`,
    ]
});

And now the script works!

Thanks everyone for the help!

https://stackoverflow.com/questions/53091884/puppeteer-doesnt-work-at-vps-digitalocean

Probably you have to wait for the element.

await page.waitForSelector('.photo img');
const imgSrc = await page.$eval('.photo img', (el) => el.getAttribute('src'));

await page.waitForSelector('.photo img');
const imgSrc = await page.$eval('.photo img', (el) => el.src); // Not sure if gonna work

https://stackoverflow.com/questions/67224288/how-to-get-the-src-attribute-of-an-image-with-puppeteer-i-am-getting-cannot-re

While you haven't provided the live page (so I can't verify that arbitrary JS, visibility and timing won't make this fail), I'll take a stab at it and see if the following works, assuming your HTML is pretty much static:

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

let browser;
(async () => {
  const html = `
    <body>
    <table class="calendar">
      <tr class="days">
        <td class="day">
          <div class="day_num">7</div>
          <div class="day_content"></div>
        </td>
        <td class="day">
          <div class="day_num">8</div>
          <div class="day_content"></div>
        </td>
        <td class="day">
          <div class="day_num">9</div>
          <div class="day_content">AWAY</div>
        </td>
      </tr>
    </table>
    <script>
      [...document.querySelectorAll(".day_content")][1]
        .addEventListener("click", e => {
          e.target.textContent = "CLICKED";
        })
      ;
    </script>
    </body>
  `;
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  await page.setContent(html);
  const xp = '//div[contains(@class, "day_num") and text()="8"]';
  const [dayEl] = await page.$x(xp);
  const dayContent = await dayEl.evaluate(el => {
    const dayContent = el.closest(".day").querySelector(".day_content");
    dayContent.click();
    return dayContent.textContent;
  });
  console.log(dayContent); // => CLICKED
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

The approach is to find the .day_num element you're interested in using an XPath on the class and text, then pop up the tree to the .day element and down again to the associated .day_content element to click it. I added a listener to change the text upon click to verify that it was indeed clicked.

You could also use nextElementSibling on the .day_num rather than the closest/querySelector combo, but this assumes more about the relationship between the .day_num and .day_content elements and would probably be more brittle.

Also, if the text content "8" might have whitespace, you can loosen it up a bit with substring contains in your XPath. '//div[contains(@class, "day_num") and contains(text(), "8")]', at the risk of false positives and selecting, say, "18" and "28". In that case, a regex or tree walk and trim might be more appropriate. It's hard to make a recommendation based on this excerpt of the HTML out of context.

Taking a step further, it sounds like you need to click multiple elements in a loop and are struggling to do that. Here's an attempt that works on a mocked-up version of the site:

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

let browser;
(async () => {
  const html = `
    <body>
    <table class="calendar">
      <tr class="days"></tr>
    </table>
    <script>
      for (let i = 0; i < 30; i++) {
        document.querySelector(".days").innerHTML += 
          \`<td class="day">
            <div class="day_num">\${i + 1}</div>
            <div class="day_content"></div>
          </td>\`
        ;
      }

      [...document.querySelectorAll(".day_content")].forEach(e =>
        e.addEventListener("click", e => {
          e.target.textContent = "AWAY";
        })
      );
    </script>
    </body>
  `;
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  await page.setContent(html);
  const awayDatesInMonth = [5, 12, 18, 20];

  for (const day of awayDatesInMonth) {
    const xp = `//div[contains(@class, "day_num") and text()="${day}"]`;
    const [dayEl] = await page.$x(xp);
    const dayContent = await dayEl.evaluate(el =>
      el.closest(".day").querySelector(".day_content").click()
    );
  }

  /* or if you can assume the elements are correctly indexed */
  const days = await page.$$(".day_content");

  for (const day of awayDatesInMonth) {
    await days[day-1].evaluate(el => el.click());
  }
  /* --- */

  console.log(await page.content());
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

If this doesn't work, please provide your own mock-up that better represents the original site you're working with so I can be sure I'm solving the relevant problem.

Note that I'm using native DOM clicks which are untrusted and work differently than the trusted Puppeteer page.click()/ElementHandle.click() methods. If the native DOM click doesn't trigger a response, try the Puppeteer click.

https://stackoverflow.com/questions/70958811/puppeteer-iterate-table-cells-and-click-specific-cells

There is a special convenience method page.$$eval for this task in puppeteer:

let result = await page.$$eval('.nameToRetrieve', names => names.map(name => name.textContent));
console.log(result);

This method runs Array.from(document.querySelectorAll(selector)) within the page and passes it as the first argument to pageFunction.

The result will be:

[ ' Name 1 ', ' Name 2 ', ' Name 3 ' ]

https://stackoverflow.com/questions/56421888/how-to-scrape-inside-div-list-using-puppeteer

Unfortunately, .evaluate() or .$$eval() and similar ones can only transfer serializable values (roughly, the values JSON can handle). As DOM elements are not serializable (they contain methods and circular references), each element in the collection is replaced with an empty object or undefined. You need to return either serializable value (for example, an array of texts) or use something like page.evaluateHandle() and JSHandle API.

The first option:

const arr= await feedHandle.$$eval(
  '.car-list-child',
  nodes => nodes.map(n => n.innerText)
);
console.log(arr);

https://stackoverflow.com/questions/67527026/return-a-list-of-divs-with-the-same-selector-using-puppeteer

Your best bet is probably to render the chart as an image with a Javascript-enabled renderer, and then add that image to your PDF.

Option 1: If you want to stick with headless rendering, you may need to add a --no-stop-slow-scripts option in addition to the Javascript delay (could also check out Puppeteer, an alternative renderer).

Option 2: Use a service that renders charts to image or PDF. QuickChart is an open-source web service that does this (I am one of its maintainers).

For example, take your Chart.js config:

$chartConfig = '{
  "type": "bar",
  "data": {
    "labels": [2012, 2013, 2014, 2015, 2016],
    "datasets": [{
      "label": "Users",
      "data": [120, 60, 50, 180, 120]
    }]
  }
}';

Pack it into a URL with the /chart endpoint:

$chartUrl = 'https://quickchart.io/chart?w=500&h=300&c=' . urlencode($chartConfig);

And then include the resulting URL as an image in your wkhtmltopdf page:

<img src="https://quickchart.io/chart?w=500&h=300&c=%7B%0A++%22type%22%3A+%22bar%22%2C%0A++%22data%22%3A+%7B%0A++++%22labels%22%3A+%5B2012%2C+2013%2C+2014%2C+2015%2C+2016%5D%2C%0A++++%22datasets%22%3A+%5B%7B%0A++++++%22label%22%3A+%22Users%22%2C%0A++++++%22data%22%3A+%5B120%2C+60%2C+50%2C+180%2C+120%5D%0A++++%7D%5D%0A++%7D%0A%7D" />

This will render your chart without any Javascript.

If you want an even simpler way and you're ok with a PDF that shows only the chart, add &format=pdf to the URL and the service will directly generate a PDF of your chart: example PDF

Note that you can self-host the chart render web service if necessary.

https://stackoverflow.com/questions/64200163/how-to-generate-chartjs-charts-to-pdf-using-laravel

Actually the answer is very straightforward. I missed the simplest solution with div.scrollTop = ....

try {
  const res = await page.$eval(`div._weirdo`,
    e => {
      e.scrollTop = e.scrollTop + 200
      return e
    }
  )
}
catch (e) {
  console.log(e)
}

https://stackoverflow.com/questions/51866987/how-to-imitate-mouse-scroll-inside-div-in-popup-with-puppeteer

You can then use a simple for loop to execute your retries (exit the for loop when your request was successful):

'use strict';
const puppeteer = require('puppeteer');
const delay = (ms) => {
    return new Promise(resolve => setTimeout(resolve, ms));
};

(async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.setViewport({width: 1024, height: 768});
    await page.setDefaultNavigationTimeout(0);

    const maxRetryNumber = 10;
    let success = false;
    for (let retryNumber = 1; retryNumber <= maxRetryNumber; retryNumber++) {
        const response = await page.goto('https://google.com');
        if (response.status() < 400) {
            success = true;
            break;
        }
        await delay(1000 * retryNumber);
    }

    if (!success) {
        // do something
    }

    await browser.close();
    process.exit();
})();

Source of delay function.

https://stackoverflow.com/questions/57544579/puppeteer-how-to-retry-url-fetch-with-delay-if-it-failed

With element you've created an ElementHandle which can be clicked with elementHandle.click and not with page.click.

This should work:

const element = await page.$('[data-testId="testid-button-refresh"]') // this is an ElementHandle
await element.click({ clickCount: 1 })

Or you can still use page.click, but to keep the click in the same context you should use the selector, and not the ElementHandle as the first argument:

await page.click('[data-testId="testid-button-refresh"]', { clickCount: 1 })

https://stackoverflow.com/questions/63036566/getting-custom-element-using-puppeteer-and-then-do-click-action

Blogs

Check out the latest blogs from LambdaTest on this topic:

Selenium 4.0 and The Future: Manoj Kumar [Testμ 2022]

We were eager to listen to Manoj Kumar, VP Developer Relations, LambdaTest, speak on the importance of Selenium 4.0 and how bright the future is. This was the agenda of the speech:

May’22 Updates: Automate Geolocation Testing With Playwright, Puppeteer, & Taiko, Pre-Loaded Chrome Extension, And Much More!

To all of our loyal customers, we wish you a happy June. We have sailed half the journey, and our incredible development team is tirelessly working to make our continuous test orchestration and execution platform more scalable and dependable than ever before.

A Practical Guide to Testing React Applications [React Testing Tutorial]

React is one of the most popular JavaScript libraries in use today. With its declarative style and emphasis on composition, React has transformed how we build modern web applications.However, as your application grows in size and complexity, you will want to write tests to avoid any future bugs. Moreover, building large-scale applications with React requires careful planning and organization to avoid some common pitfalls.

Automate User Flows with Chrome DevTools Recorder: Jecelyn Yeen [Testμ 2022]

Jecelyn Yeen, Developer Advocate, works on Chrome DevTools at Google. We were so glad to have her on our panel of speakers at the Testμ 2022 conference. Her major focus is on the developer tooling ecosystem. She spoke about improving user experience by creating an automation test script with no code using the Chrome DevTools. Here, she explained the two initiatives the Chrome team is working on to improve the web automation experience.

Test Orchestration using HyperExecute: Mayank Bhola [Testμ 2022]

Abhishek Mohanty, Senior Manager – Partner Marketing at LambdaTest, hosted Mayank Bhola, Co-founder and Head of Engineering at LambdaTest, to discuss Test Orchestration using HyperExecute. Mayank Bhola has 8+ years of experience in the testing domain, working on various projects and collaborating with experts across the globe.

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.