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

page.evaluate（）

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

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

Answer 4

另一种方式

next

Answer 5

您好，我正在www.zap.co.il上尝试此操作，但是它没有用：您知道是什么问题吗？

const inputElement = await page.$('input[type=search]'); await page.goto('https://www.zap.co.il', {waitUntil: 'networkidle2'}); await page.waitFor('input[type=search]');

await page.$eval('input[type=search]', el => el.value = 'HP')

Answer 6

对于Puppeteer Sharp，语法有点不同，有两种方法可以做到，但一种比另一种更好。这是一个完整的例子：

static async Task Main(string[] args)
{
    await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultChromiumRevision);

    await using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions { Headless = true, Product = Product.Chrome }))
    await using (var page = await browser.NewPageAsync())
    {
        try
        {
            await page.GoToAsync(urlString);
            await page.WaitForSelectorAsync("#btnSubmit");

            await ReplaceText(page, "#inputUsernameId", usernameString);
            await ReplaceText(page, "#inputPasswordId", passwordString);

            await page.ClickAsync("#btnSubmit");
            await page.WaitForNavigationAsync();  // Optional, if the page is changing          
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
            // Handle me / Log me
            throw;
        }
    }
}

private static async Task ReplaceText(Page page, string selector, string replacementValue)
{
    await page.WaitForSelectorAsync(selector).ConfigureAwait(false);
    await page.EvaluateExpressionAsync($"document.querySelector(\"{selector}\").value = \"{replacementValue}\"").ConfigureAwait(false);

    // Alternative older method below (not as reliable with async, but works):
    // await ele.FocusAsync().ConfigureAwait(false);
    //
    // await page.Keyboard.DownAsync("Control").ConfigureAwait(false);
    // await ele.PressAsync("A").ConfigureAwait(false);
    // await page.Keyboard.UpAsync("Control").ConfigureAwait(false);
    // await ele.PressAsync("Backspace").ConfigureAwait(false);
    //    
    // await ele.TypeAsync(replacementText).ConfigureAwait(false);
    // await ele.PressAsync("Tab").ConfigureAwait(false);
}

如何使用puppeteer填充输入字段

6 个答案:

page.evaluate（）