如何在 puppeteer 中执行 javascript 代码

Question

我是 puppeteer 的新手，并试图弄清楚如何在 puppeteer 中以字符串值的形式执行 JavaScript 代码。

例如，值（从输入中检索）可能如下所示：document.getElementById('selector').value='some_value';

我已经实现了以下代码

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

但它返回以下错误：

评估失败：TypeError：无法设置属性“值”为空

Answer 1

1. 在回调中评估页面上的脚本
2. 在执行脚本之前等待 ID 为“LandingAirBookingSearchForm_originationAirportCode”的元素，以确保侧面已加载

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