Question

我想使用Puppeteer在输入字段中输入值。根据{{3}}，这似乎很简单（文档示例）：

await page.type('#mytextarea', 'Hello'); // Types instantly
await page.type('#mytextarea', 'World', {delay: 100}); // Types slower, like a user

所以我创建了以下测试脚本：

const puppeteer = require('puppeteer');

(async () => {

  const browser = await puppeteer.launch({headless: false}); // devtools: true
  const page = await browser.newPage();
  await page.goto('https://mycoolsite/index.html');

  page.on('console', msg => console.log(new Date().toISOString() + ' ' + msg._text));

  const selector = '#barcode';
  await page.waitForSelector(selector);
  await page.type(selector, "1234");

})();

它适用于page.type（）行。这意味着，它将启动Chromium的实例，转到正确的URL，并在日志中显示控制台的预期输出。但是不要在字段中键入值。在节点输出或浏览器控制台输出中都没有看到任何错误。

为排除静默故障，我将选择器名称更改为不存在的名称（例如“ #qwertyuiop”），并按预期获得了故障。

如果将行await page.type(selector, "1234");替换为以下内容，我找到了一种解决方法：

  const element = await page.$(selector);
  await page.evaluate(element => { element.setAttribute('value', 1234); }, element);

那感觉就像是骇客。为什么puppeteer使用page.evaluate正确设置了值，但没有使用记录的page.type方法正确设置？

Answer 1

想通了...

输入由隐藏元素包含。

更改线路

await page.waitForSelector(selector);

到

await page.waitForSelector(selector, {visible: true, timeout: 3000 });

解决了。显然，一个元素必须在page.type（）起作用之前是可见的，但是通过属性设置该元素的值并不重要，只要它是DOM的一部分即可。

（从docs中-visible选项使puppeteer等待元素出现在DOM 和中。默认值为false。）

Answer 2

  const selector = '#barcode';
  await page.waitForSelector(selector);
  await page.focus(selector); //you need to focus on the textField
  await page.keyboard.type(selector, "1234"); //you are also missing  keyboard  property

木偶-page.type（）不起作用，而element.setAttribute（）起作用吗？

2 个答案: