Discover AI-native insights at Testμ Conference‘25

How to use emulateCPUThrottling method in Puppeteer

Best JavaScript code snippet using puppeteer

index.js

...32    var res = [];33    for (i = 0; i < iterazioni; i++) {34        const page = await browser.newPage();35        await page.emulateNetworkConditions(avgFixed)36        await page.emulateCPUThrottling(argv.cpu || 1);37        page.setCacheEnabled(false);38        if (argv.nexus == true) {39            await page.emulate(nexus);40        } else {41            await page.setViewport({42                width: argv.w || 1920,43                height: argv.h || 1080,44                deviceScaleFactor: 1,45                isMobile: argv.mobile || false,46            });47        }48        page.on('console', function(msg) { try { log.push(JSON.parse(msg.text())); } catch {49                (argv.v == true) && console.log(msg.text()) } });50        await page.goto(argv.url);...

lcp.js

Source: lcp.js

...47    const client = await page.target().createCDPSession();48    await client.send("Network.enable");49    await client.send("ServiceWorker.enable");50    // await page.emulateNetworkConditions(networkConditions["Fast 3G"]);51    // await page.emulateCPUThrottling(4);52    await page.emulate(phone);53    await page.evaluateOnNewDocument(calculateLCP);54    await page.goto(url, { waitUntil: "load", timeout: 60000 });55    const lcp = await page.evaluate(() => {56      return window.largestContentfulPaint;57    });58    browser.close();59    return lcp;60  } catch (error) {61    console.log(error);62    browser.close();63  }64}65getLCP("https://mw-production1.coach.com").then((lcp) =>...

benchmark.js

Source: benchmark.js

...4const test = async (name) => {5  const browser = await puppeteer.launch({ headless, timeout: 0 })6  const page = await browser.newPage()7  const navigationPromise = page.waitForNavigation()8  await page.emulateCPUThrottling(6)9  const root = `benchmark/${name}`10  if (!fs.existsSync(root)) {11    fs.mkdirSync(root, { recursive: true })12  }13  await page.tracing.start({ path: `${root}/tracing.json` })14  page.setDefaultNavigationTimeout(0)15  await page.goto(`http://localhost:3000/${name}`, {16    waitUntil: "load",17    timeout: 0,18  })19  await navigationPromise20  const count = 421  for (let i = 0; i < count; i++) {22    await page.type(`[name=input-${i}]`, "Hello")...

mac.wsce.config.js

Source: mac.wsce.config.js

...20                name: "CPU Throttling",21                when: "before",22                twice: false,23                run: async (_, page, __) => {24                    await page.emulateCPUThrottling(1);25                },26            },27        ],28        puppeteerOptions: { headless: true },29    },30    exporter: {31        port: 3001,32    },...

puppet.js

Source: puppet.js

...15      url: process.env.object_FULL_URL,16      name: "objecttoken",17      value: process.env.object_AUTH18  })19  await page.emulateCPUThrottling(parseInt(process.env.object_THROTTLE));20  console.log("page setup complete")21  await page.goto(process.env.object_FULL_URL);22  page.on('console', (msg) => console.log(msg.text()));...

throttle-network-cpu.js

Source: throttle-network-cpu.js

...5  const client = await page.target().createCDPSession();6  await client.send('Network.enable');7  // Simulated network throttling (Slow 3G)8  await page.emulateNetworkConditions(puppeteer.networkConditions['Slow 3G']);9  await page.emulateCPUThrottling(4);10  await browser.close();...

estimo.js

Source: estimo.js

1const estimo = require('estimo')2async function doThis() {3  const report = await estimo(['http://localhost:3000/error-boundary', 'http://localhost:3000/optional-chaining'], {4    runs: 5, emulateCpuThrottling: true,5    cpuThrottlingRate: 4,6  })7  console.log({ report });8}...

cpu-throttling.js

Source: cpu-throttling.js

...4    name: "CPU Throttling",5    when: "before",6    twice: false,7    run: async (_, page, __) => {8        await page.emulateCPUThrottling(factor);9    },10};...

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.emulateCPUThrottling(4);6  await page.screenshot({path: 'example.png'});7  await browser.close();8})();

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.emulateCPUThrottling(4);7    await page.waitFor(5000);8    await browser.close();9})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2const fs = require('fs');3(async () => {4  const browser = await puppeteer.launch({ headless: false });5  const page = await browser.newPage();6  await page.emulateCPUThrottling(4);7  await page.screenshot({ path: 'google.png' });8  await browser.close();9})();10const puppeteer = require('puppeteer');11const fs = require('fs');12(async () => {13  const browser = await puppeteer.launch({ headless: false });14  const page = await browser.newPage();15  await page.emulateNetworkConditions({16  });17  await page.screenshot({ path: 'google.png' });18  await browser.close();19})();20const puppeteer = require('puppeteer');21const fs = require('fs');22(async () => {23  const browser = await puppeteer.launch({ headless: false });24  const page = await browser.newPage();25  await page.emulateMedia('screen');26  await page.screenshot({ path: 'google.png' });27  await browser.close();28})();29const puppeteer = require('puppeteer');30const fs = require('fs');31(async () => {32  const browser = await puppeteer.launch({ headless: false });33  const page = await browser.newPage();34  const title = await page.evaluate(() => document.title);35  console.log(title);36  await browser.close();37})();38const puppeteer = require('puppeteer');39const fs = require('fs');40(async () => {41  const browser = await puppeteer.launch({ headless: false });42  const page = await browser.newPage();

Using AI Code Generation

1const puppeteer = require("puppeteer");2(async () => {3  const browser = await puppeteer.launch({4  });5  let pages = await browser.pages();6  let tab = pages[0];7  await tab.emulateCPUThrottling(4);8})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2async function emulateCPUThrottling() {3  const browser = await puppeteer.launch({4  });5  const page = await browser.newPage();6  await page.emulate(puppeteer.devices['iPhone X']);7  await page.emulateCPUThrottling(4);8  await page.waitFor(5000);9  await browser.close();10}11emulateCPUThrottling();

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch({headless: false, args: ['--disable-gpu', '--disable-dev-shm-usage', '--no-sandbox']});4  const page = await browser.newPage();5  const client = await page.target().createCDPSession();6  await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });7  await page.screenshot({path: 'example.png'});8  await browser.close();9})();

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.emulateCPUThrottling(4);6  await page.screenshot({path: 'google.png'});7  await browser.close();8})();9const puppeteer = require('puppeteer');10(async () => {11  const browser = await puppeteer.launch({headless: false});12  const page = await browser.newPage();13  await page.emulateNetworkConditions({14  });15  await page.screenshot({path: 'google.png'});16  await browser.close();17})();18const puppeteer = require('puppeteer');19(async () => {20  const browser = await puppeteer.launch({headless: false});21  const page = await browser.newPage();22  await page.emulateMedia('screen');23  await page.screenshot({path: 'google.png'});24  await browser.close();25})();26const puppeteer = require('puppeteer');27(async () => {28  const browser = await puppeteer.launch({headless: false});29  const page = await browser.newPage();30  await page.emulate({31    viewport: {32    },33  });34  await page.screenshot({path: 'google.png'});35  await browser.close();36})();37const puppeteer = require('puppeteer');38(async () => {39  const browser = await puppeteer.launch({headless: false});

StackOverFlow community discussions

Questions

Discussion

Can I use puppeteer inside chrome extension

Puppeteer: Wait until elementHandle is no longer attached to the DOM

Cannot get the children of a div using Puppeteer page.evaluate

Launch Puppeteer on a manual Page

Puppeteer: Get innerHTML

Puppeteer: how to listen for on innerHTML change

Puppeteer: search for inner text case insensitive

How does an ElementHandle differ from a DOM Element?

How can I find any number within a range of numbers using .includes()

TypeError: Method Promise.prototype.then called on incompatible receiver Proxy

I know this is 9 months late but I had the same use case at work on Window machines but you can make it work with Mac.

The trick is to use puppeteer-web https://github.com/puppeteer/puppeteer/tree/master/utils/browser#bundling-for-web-browsers

Bundle the repository and place it in your chrome extension folder and then reference it in your popup.html with something like

<script src="./puppeteer/utils/browser/puppeteer-web.js"></script>

You'll then need to take advantage of Chrome's remote debugging functionality as puppeteer-web can't start its own instance via puppeteer.launch() and can only use puppeteer.connect() to connect to an already existing chrome instance.

On windows add --remote-debugging-port=9222 to the end of the target field of the chrome short cut as per How to make Chrome always launch with remote-debugging-port flag

Or on Mac /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')

Once remote debugging is activated you'll be able to see the webSocketDebuggerUrl property by visiting http://127.0.0.1:9222/json/version on your browser. This is the browserWSEndpoint the connect method will invoke.

You will also need to add the port address to the permissions array in the manifest.json file otherwise ajax requests won't work in the chrome extension.

Eg:

"permissions": [ "tabs" , "identity", "http://127.0.0.1:9222/*"],

Example popup.html file

<!DOCTYPE html>
<html>
  <head>
    <title>Example popup</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div>
      <button id='puppeteer-button'>Do Puppeteer Things</button>
      <script src="./puppeteer/utils/browser/puppeteer-web.js"></script>
      <script type="module" src="popup.js"></script>
    </div>
  </body>
</html>

Example popup.js file

let browserWSEndpoint = '';
const puppeteer = require("puppeteer");

async function initiatePuppeteer() {
  await fetch("http://127.0.0.1:9222/json/version")
    .then(response => response.json())
    .then(function(data) {
        browserWSEndpoint = data.webSocketDebuggerUrl;
      })
    .catch(error => console.log(error));
}

initiatePuppeteer();

// Assign button to puppeteer function

document
  .getElementById("puppeteer-button")
  .addEventListener("click", doPuppeteerThings);

async function doPuppeteerThings() {
  const browser = await puppeteer.connect({
    browserWSEndpoint: browserWSEndpoint
  });
  const page = await browser.newPage();

  // Your puppeteer code goes here

}

Hope that helps, I haven't had any issues by appending remote debugging to my target field on my work window machines, despite feeling a bit hacky. I wrote a short blog post on it with better syntax highlighting here.

https://stackoverflow.com/questions/55184255/can-i-use-puppeteer-inside-chrome-extension

Using `page.waitForXPath`

The easiest way would be to use page.waitForXPath with the option hidden set to true:

await page.waitForXPath('XPATH', { hidden: true });

This will wait until the element is not present in the DOM anymore or hidden (via CSS).

Alternative: `page.waitForFunction`

Alternatively, you can use page.waitForFunction to wait until a function that you provide returns true. By using document.evaluate to evaluate an XPath expression you can then wait until your condition resoles to true.

Using an existing variable

As you already have the element in a variable, you can use page.waitForFunction and pass the element as args:

await page.waitForFunction(element => element.parentNode === null, {}, spinnerElement);

You might need to change the checking function depending on how the node is removed.

https://stackoverflow.com/questions/61661976/puppeteer-wait-until-elementhandle-is-no-longer-attached-to-the-dom

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

https://stackoverflow.com/questions/69097991/cannot-get-the-children-of-a-div-using-puppeteer-page-evaluate

I'd just set a recursive function with a callback:

async function monitor (selector, callback, prevValue) {
  const newVal = await page.$(selector);
  if (newVal !== prevValue) {
    callback(newVal);
  }
  /* add some delay */
  await new Promise(_ => setTimeout(_, 1000))
  /* call recursively */
  monitor (selector, callback, newVal);
}

monitor('span#status', status => {
  // Fires whenever `status` changes
})

https://stackoverflow.com/questions/50392736/puppeteer-how-to-listen-for-on-innerhtml-change

Your XPath expression is valid, but you are returning text() instead of the node itself. page.$x expects the XPath to return an element, therefore your code does not work. To return the node you need to query for the span element.

const element = await page.$x("//span[contains(translate(text(), 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'two')]");

Please note, that text() only works for text-only nodes. If you have mixed content (containing elements and text), you should use the string value (. instead of text()):

const element = await page.$x("//span[contains(translate(., 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'two')]");

To compare the expressions I put them below each other:

//span//text()[contains(translate(., 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'two')]
//span[contains(translate(text(), 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'two')
//span[contains(translate(., 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'two')]

The first one is the expression (given by you) for the text of the span node. The second one queries the node itself by using text(). The last one uses the string value to query the node.

https://stackoverflow.com/questions/55398345/puppeteer-search-for-inner-text-case-insensitive

With ElementHandle can you still access to properties like textContent but in "Puppeteer way". Firstly you must .getProperty() on ElementHandle, and after that convert it to .jsonValue(). Remember that all this operations returns poromises so you should await on all of them like this:

await (await (await page.$('#text')).getProperty('textContent')).jsonValue();

Here is full working example:

const puppeteer = require('puppeteer');

const html = `
<html>
  <body>
    <div id="text">Sample content</div>
  </body>
</html>`;

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`data:text/html,${html}`);

  const text = await page.evaluate(() => document.querySelector('#text').textContent);
  const text2 = await (await (await page.$('#text')).getProperty('textContent')).jsonValue();

  console.log(text);
  console.log(text2);

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

https://stackoverflow.com/questions/50242653/how-does-an-elementhandle-differ-from-a-dom-element

I can't see the page, HTML or text you're working with, but I guess you have numbers with commas delimiting thousands places. So why not simply remove those commas and parse the strings to numbers, then compare normally?

const numShare = await page.$$eval(".FormData", els =>
  els.find(e => {
    const n = +e.textContent.trim().replace(/,/g, "");
    return n >= 1000 && n <= 100000;
  })
  .parentNode
  .textContent
  .trim()
);

Runnable POC:

const els = [...document.querySelectorAll(".FormData")];
const result = els.find(e => {
    const n = +e.textContent.trim().replace(/,/g, "");
    return n >= 1000 && n <= 100000;
  })
  .parentNode
  .textContent
  .trim(); 
console.log(result);

<div>
  foo
  <div class="FormData">101,000</div>
</div>
<div>
  baz
  <div class="FormData">1,000</div>
</div>

Another approach is const n = +e.textContent.match(/\d/g).join("");, which pulls out all of the numbers and is more tolerant of extra characters like currency symbols and spaces.

As for why your current approach doesn't work, you're just asking whether it includes the first truthy value in your giant || chain:

console.log(',000' || ',9' || ',8' || ',7' || ',6' || ',5' || ',4' || ',3' || ',2' || ',1');

Following up on the comments, it sounds like you need to select a field as well as test the range. Here's code that works on the example XML you provided:

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

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/69.0.3497.100 Safari/537.36";
  await page.setUserAgent(ua);
  const url = "link to your XML file";
  await page.goto(url, {waitUntil: "domcontentloaded"});
  const text = await page.$eval(".SmallFormData", el =>
    el.parentNode.nextElementSibling.nextElementSibling.textContent.trim()
  );
  const n = +text.match(/\d/g).join("");
  console.log(text, n >= 1000 && n <= 100000); // => 2,275 true
})()
  .catch((err) => console.error(err))
  .finally(() => browser?.close());

This makes some assumptions about the page structure and may not be the most reliable way to select the Amount value, but in the absence of counterexamples I'll leave it stand as-is for now to avoid premature optimization.

https://stackoverflow.com/questions/74395574/how-can-i-find-any-number-within-a-range-of-numbers-using-includes

For posterity, I discovered that with Proxies you need to rebind javascript's this keyword. Example:

function validator(promise, prop) {
    if (prop in promise || promise.hasOwnProperty(prop)) {
        if (typeof promise[prop] === 'function') {
            return promise[prop].bind(promise); // << Important part!
        }
        return promise[prop];
    }

    return 'Fake!';
}

const proxy = new Proxy(
    Promise.resolve('Testing 1 2 3'),
    validator
);

console.log(proxy.someFakeThing); // prints 'Fake!'

proxy.then(console.log); // Prints 'Testing 1 2 3'

https://stackoverflow.com/questions/53872760/typeerror-method-promise-prototype-then-called-on-incompatible-receiver-proxy

Blogs

Check out the latest blogs from LambdaTest on this topic:

Cypress vs Selenium – Which Is Better ?

Selenium is one of the most prominent automation frameworks for functional testing and web app testing. Automation testers who use Selenium can run tests across different browser and platform combinations by leveraging an online Selenium Grid, you can learn more about what Is Selenium? Though Selenium is the go-to framework for test automation, Cypress – a relatively late entrant in the test automation game has been catching up at a breakneck pace.

11 Best Automated UI Testing Tools In 2022

The web development industry is growing, and many Best Automated UI Testing Tools are available to test your web-based project to ensure it is bug-free and easily accessible for every user. These tools help you test your web project and make it fully compatible with user-end requirements and needs.

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.

Webinar: Test Orchestration using HyperExecute

The speed at which tests are executed and the “dearth of smartness” in testing are the two major problems developers and testers encounter.

Best 9 JavaScript Testing Frameworks

This article is a part of our Content Hub. For more in-depth resources, check out our content hub on 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.