【问题标题】:Puppeteer: How to submit a form?Puppeteer:如何提交表单?
【发布时间】:2018-01-28 09:52:11
【问题描述】:

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

})();

【问题讨论】:

    标签: javascript node.js google-chrome-headless puppeteer


    【解决方案1】:

    试试这个

    const form = await page.$('form-selector');
    await form.evaluate(form => form.submit());
    

    对于 v0.11.0 及更高版本:

    await page.$eval('form-selector', form => form.submit());
    

    【讨论】:

    • 谢谢!看起来问题不是在表单元素上使用.evaluate() - 不知道你能做到这一点。
    • @NamMaiAnh 我收到 TypeError:form.evaluate 不是函数
    • @redochka 你可以给我看看代码吗?你确定form 是不是null
    • @NamMaiAnh 'ElementHandle' 没有 'evaluate' 方法。
    • await page.evaluate(form => form.submit(), form); 是正确的语法。
    【解决方案2】:

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

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

    【讨论】:

    • 请记住,如果输入已经包含更新表单的内容,则此方法将在输入字段中预先添加数据。
    • @mckenna "另一个有趣的解决方案是单击目标字段 3 次,以便浏览器选择其中的所有文本,然后您可以输入您想要的内容:" await input.click({ clickCount: 3 }) : @987654321 @
    猜你喜欢
    • 2018-02-21
    • 2020-12-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-12-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多