通过 javascript (puppeteer) 填写表格答案

【问题标题】：Fill a form through javascript (puppeteer)通过 javascript (puppeteer) 填写表格
【发布时间】：2021-06-07 09:23:05
【问题描述】：

我正在尝试填写 this login form 并像这样提交：

document.querySelector('#username').value="my@email";
document.querySelector('#username').dispatchEvent(new Event('change'));
document.querySelector('#password').value="mypassword";
document.querySelector('#password').dispatchEvent(new Event('change'));
document.querySelector('button[class~="btn-red"]').click();

但网站显示电子邮件和密码为空的消息。我猜它在等待按键什么的。

如何模拟？

【问题讨论】：

尝试发出事件input而不是change
@NullDev 谢谢，这行得通！您可以发布答案吗？
发布为答案！ :)
谢谢，我验证了

标签： javascript puppeteer google-chrome-headless

【解决方案1】：

您可以发出input 事件而不是change 事件：

document.querySelector('#username').value="my@email";
document.querySelector('#username').dispatchEvent(new Event('input'));
document.querySelector('#password').value="mypassword";
document.querySelector('#password').dispatchEvent(new Event('input'));
document.querySelector('button[class~="btn-red"]').click();

【讨论】：

【解决方案2】：

const puppeteer = require('puppeteer');

(async() => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.boxtal.com/fr/fr/app/utilisateur/connexion', {
    waitUntil: 'networkidle2'
  });

  await page.waitFor('#username');

  await page.type('#username','my@email');;

  // await browser.close();
})();

如果您使用的是 puppeteer，您可以使用上面的代码输入输入字段

【讨论】：

其实我用的不是puppeteer，而是没有那个方法的php headless chromium。