Puppeteer:如何提交表格?

doc*_*tus 20 javascript node.js google-chrome-headless puppeteer

使用puppeteer,你怎么能以编程方式提交表单?到目前为止,我已经能够使用page.click('.input[type="submit"]')如果表单实际包含提交输入.但是对于不包含提交输入的表单,关注表单文本输入元素和使用page.press('Enter')似乎并不会导致表单提交:

const puppeteer = require('puppeteer');

(async() => {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://stackoverflow.com/', {waitUntil: 'load'});
    console.log(page.url());

    // Type our query into the search bar
    await page.focus('.js-search-field');
    await page.type('puppeteer');

    // Submit form
    await page.press('Enter');

    // Wait for search results page to load
    await page.waitForNavigation({waitUntil: 'load'});


    console.log('FOUND!', page.url());

    // Extract the results from the page
    const links = await page.evaluate(() => {
      const anchors = Array.from(document.querySelectorAll('.result-link a'));
      return anchors.map(anchor => anchor.textContent);
    });
    console.log(links.join('\n'));
    browser.close();

})();
Run Code Online (Sandbox Code Playgroud)

Gra*_*ler 28

如果您尝试填写并提交登录表单,可以使用以下内容:

await page.goto('https://www.example.com/login');

await page.type('#username', 'username');
await page.type('#password', 'password');

await page.click('#submit');

await page.waitForNavigation();

console.log('New Page URL:', page.url());
Run Code Online (Sandbox Code Playgroud)

  • 请记住,如果输入已经具有内容(例如更新表单的情况),则此方法将在输入字段中添加已有的数据。 (2认同)
  • @mckenna“另一个有趣的解决方案是单击目标字段 3 次,以便浏览器选择其中的所有文本,然后您可以只输入您想要的内容:” `await input.click({ clickCount: 3 })` : /sf/answers/3684326481/ (2认同)

Nam*_*Anh 27

试试这个

const form = await page.$('form-selector');
await form.evaluate(form => form.submit());
Run Code Online (Sandbox Code Playgroud)

对于v0.11.0和laters:

await page.$eval('form-selector', form => form.submit());
Run Code Online (Sandbox Code Playgroud)

  • `await page.evaluate(form => form.submit(),form);`是正确的语法。 (2认同)