How to execute a js function on the page while automating in puppeteer?

Question

Say the script has navigated to a certain page. How to execute a js function inside that script?

describe("TestSuite", () => {
  test("Login", async() => {
    await page.goto(APP);
    await page.waitForSelector("[name=loginForm]");
    await page.click("input[name=username]");
    await page.type("input[name=username]", user.username);
    await page.click("input[name=pwd]");
    await page.type("input[name=pwd]", user.pwd);
    await page.click("input[name=login]");
    await page.waitForSelector(".PageBodyVertical");

 // execute a js function x() here which is loaded with the page.

  }, 60000);

Add a click event that calls that function to a button then use `page.click('that_button')` — VTodorov, Jun 04 '18 at 07:51

score 20 · Accepted Answer · answered Jun 04 '18 at 08:07

20

Use the .evaluate() function.

describe("TestSuite", () => {
  test("Login", async() => {
    await page.goto(APP);
    await page.waitForSelector("[name=loginForm]");
    await page.click("input[name=username]");
    await page.type("input[name=username]", user.username);
    await page.click("input[name=pwd]");
    await page.type("input[name=pwd]", user.pwd);
    await page.click("input[name=login]");
    await page.waitForSelector(".PageBodyVertical");

    await page.evaluate( function(){
      x();
    } );

  }, 60000);

answered Jun 04 '18 at 08:07

Pjotr Raskolnikov

1,558
2
15
27

How do you pass a variable into that javascript? – CodeGuru Jun 19 '19 at 05:20
4

@CodeGuru by searching on stackoverflow https://stackoverflow.com/a/46098448/5036031 – Pjotr Raskolnikov Jun 19 '19 at 15:53
await page.evaluate(() => fLogon()); getting undefined flogon on typecript – Sahil Paudel Aug 07 '20 at 20:44
Create fake function from resolve error type script: Ex: function x() { return 'Fake func' } – Jeremias Santos Feb 28 '22 at 17:13

Mercury · Answer 2 · 2023-03-15T07:38:54.140

Example with args:

let a1 = "hello";
let a2 = " world";

const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.evaluate(function(a1, a2){
      console.log('msg: ' + a1 + a2); // This code runs in the page's context and returns the result
}, a1, a2);

Puppeteer evaluate docs: https://pptr.dev/api/puppeteer.page.evaluate

Note 1: In order to see the console print you need to add a listener
Note 2: In order to invoke your own functions within evaluate you need to expose the function

How to execute a js function on the page while automating in puppeteer?

2 Answers2