如何在 Puppeteer 中设置 <input> 值

使用此代码片段在 Puppeteer 中设置 HTML <input> 元素的值：

set_input_value_snippet.js

const newInputValue = "test 123";
await page.evaluate(val => document.querySelector('.search-form-input').value = val, newInputValue);amp

const newInputValue = "test 123";
await page.evaluate(val => document.querySelector('.search-form-input').value = val, newInputValue);amp

记住将 '.search-form-input' 替换为适合选择你的 <input> 的任何 CSS 选择器。示例包括 'input[name="username"]' 或 '.username > input'。

完整示例：

puppeteer_set_input_example.js

// 最小 puppeteer 示例
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://techoverflow.net', {waitUntil: 'domcontentloaded'});
  // 设置输入值
  const newInputValue = "test 123";
  await page.evaluate(val => document.querySelector('.search-form-input').value = val, newInputValue);
  // 截图以验证结果
  await page.screenshot({path: 'screenshot.png'});
  // 清理
  await browser.close();
})();

// 最小 puppeteer 示例
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://techoverflow.net', {waitUntil: 'domcontentloaded'});
  // 设置输入值
  const newInputValue = "test 123";
  await page.evaluate(val => document.querySelector('.search-form-input').value = val, newInputValue);
  // 截图以验证结果
  await page.screenshot({path: 'screenshot.png'});
  // 清理
  await browser.close();
})();

注意此方法适用于任何简单的 <input>，但是它可能不适用于你在一些现代网站上找到的一些重度 JavaScript 化的输入。

Check out similar posts by category: Javascript, Puppeteer

If this post helped you, please consider buying me a coffee or donating via PayPal to support research & publishing of new posts on TechOverflow

Buy me a coffee