如何使用puppeteer填充输入字段

Question

我正在使用puppeteer进行E2E测试,现在尝试使用下面的代码填充输入字段.

await page.type('#email', 'test@example.com');

它工作,但我发现电子邮件地址是一个字符一个字符键入字段,就好像一个真人正在打字.
是否可以让输入字段一次填充电子邮件地址？

Answer 1

只需设置输入值,如下所示:

await page.$eval('#email', el => el.value = 'test@example.com');

以下是在维基百科上使用它的示例:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://en.wikipedia.org', {waitUntil: 'networkidle2'});

    await page.waitFor('input[name=search]');

    // await page.type('input[name=search]', 'Adenosine triphosphate');
    await page.$eval('input[name=search]', el => el.value = 'Adenosine triphosphate');

    await page.click('input[type="submit"]');
    await page.waitForSelector('#mw-content-text');
    const text = await page.evaluate(() => {
        const anchor = document.querySelector('#mw-content-text');
        return anchor.textContent;
    });
    console.log(text);
    await browser.close();
})();

Answer 2

要扩展上面接受的答案,您也可以将$ eval与本地范围的变量一起使用,

const myLocalValue = 'Adenosine triphosphate';    
await page.$eval('input[name=search]', (el, value) => el.value = value, myLocalValue);

这将从本地范围获取'myLocalValue',并将其作为'value'传递给浏览器范围

Answer 3

另一种方式

await page.focus('#email')
await page.keyboard.type('test54')

Answer 4

page.evaluate()

您可以使用page.evaluate()将电子邮件字符串分配给value元素的属性：

await page.evaluate(() => {
  const email = document.querySelector('#email');
  email.value = 'test@example.com';
});

Answer 5

在最新版本的 Puppeteer(10.x) 中，所选答案对我不起作用。相反，对我有用的是以下命令。

test('should login', async () => {
const page = await browser.newPage();
page.setDefaultTimeout(6000);
await page.goto('https://www.saucedemo.com/');
await page.waitForSelector('#user-name');
await page.type('#user-name', 'standard_user');
await page.type('#password', 'secret_sauce');
await page.click('#login-button');
await page.waitForSelector('#contents_wrapper');});