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('/', { 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

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./', { 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

• javascript
• node.js
• puppeteer

• It seems that #LandingAirBookingSearchForm_originationAirportCode is not in the DOM. Did you verify it? – Ruan Mendes Commented Oct 29, 2019 at 15:02
• I checked it manuallt by visiting the site and executing that script – Valip Commented Oct 29, 2019 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 Commented Oct 29, 2019 at 15:15
• Meaning that there is no way to run a js code, like the one from the example, at once? – Valip Commented Oct 29, 2019 at 15:19
• Not sure what you mean; the JavaScript is being run. But it's running before the element is created. – Ruan Mendes Commented Oct 29, 2019 at 15:25

1 Answer 1

1. Evaluate your 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./', { 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();
})();