4

I'm new to puppeteer and trying to figure out how to execute a javascript code, provided as a string value, in puppeteer.

For example, the value (which is retrieved from an input) can look like this: document.getElementById('selector').value='some_value';

I've implemented the following code

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.southwest.com/', { waitUntil: 'domcontentloaded' });
const script = await page.evaluate("document.getElementById('LandingAirBookingSearchForm_originationAirportCode').value='Dallas'; document.getElementById('LandingAirBookingSearchForm_originationAirportCode').dispatchEvent(new Event('input',{bubbles:!0}));");
await browser.close();

But it returns the following error:

Evaluation failed: TypeError: Cannot set property 'value' of null

Valip
  • 4,440
  • 19
  • 79
  • 150
  • It seems that `#LandingAirBookingSearchForm_originationAirportCode` is not in the DOM. Did you verify it? – Ruan Mendes Oct 29 '19 at 15:02
  • I checked it manuallt by visiting the site and executing that script – Valip Oct 29 '19 at 15:10
  • Not manually, run `await page.evaluate("document.getElementById('LandingAirBookingSearchForm_originationAirportCode')` and that should return null, meaning you have to wait for it. – Ruan Mendes Oct 29 '19 at 15:15
  • Meaning that there is no way to run a js code, like the one from the example, at once? – Valip Oct 29 '19 at 15:19
  • Not sure what you mean; the JavaScript is being run. But it's running before the element is created. – Ruan Mendes Oct 29 '19 at 15:25

1 Answers1

4
  1. Evaluate ur script on the page in a callback
  2. Wait for the element with the ID of 'LandingAirBookingSearchForm_originationAirportCode' before you execute the script to be sure the side has loaded
const puppeteer = require('puppeteer');

(async function () {
    const browser = await puppeteer.launch(/*{headless: false}*/);
    const page = await browser.newPage();
    await page.goto('https://www.southwest.com/', { waitUntil: 'domcontentloaded' });
    await page.waitFor('#LandingAirBookingSearchForm_originationAirportCode');
    await page.evaluate(() => {
        document.getElementById('LandingAirBookingSearchForm_originationAirportCode').value='Dallas'; 
        document.getElementById('LandingAirBookingSearchForm_originationAirportCode').dispatchEvent(new Event('input',{bubbles:!0}));
    });
    await browser.close();
})();
Mischa
  • 1,591
  • 9
  • 14
  • The javascript code comes from an user input, which means that it can contain anything, and I'm not sure if it's possible to parse off every block of code and execute this pattern – Valip Oct 29 '19 at 15:18
  • In that case forget my first point .... but still u have to wait for the page to be fully loaded so that you can actually select and manipulate the elements. Have a look here: https://stackoverflow.com/questions/52497252/puppeteer-wait-until-page-is-completely-loaded/52501267 – Mischa Oct 29 '19 at 15:25