Javascript 如何使用Puppeter填充输入字段?
我使用的是E2E测试,现在我尝试用下面的代码填充输入字段:Javascript 如何使用Puppeter填充输入字段?,javascript,node.js,google-chrome-devtools,puppeteer,e2e-testing,Javascript,Node.js,Google Chrome Devtools,Puppeteer,E2e Testing,我使用的是E2E测试,现在我尝试用下面的代码填充输入字段: await page.type('#email', 'test@example.com'); 它起作用了,但我发现电子邮件地址被一个字符一个字符地输入到字段中,就像一个真正的人在输入一样 是否可以一次将所有电子邮件地址填入输入字段?只需如下设置输入值: wait page.$eval('#email',el=>el.value=>test@example.com'); 以下是在维基百科上使用它的一个示例: const puppete
await page.type('#email', 'test@example.com');
它起作用了,但我发现电子邮件地址被一个字符一个字符地输入到字段中,就像一个真正的人在输入一样
是否可以一次将所有电子邮件地址填入输入字段?只需如下设置输入值:
wait page.$eval('#email',el=>el.value=>test@example.com');
以下是在维基百科上使用它的一个示例:
const puppeter=require('puppeter');
(异步()=>{
const browser=wait puppeter.launch();
const page=wait browser.newPage();
等待页面。转到('https://en.wikipedia.org“,{waitUntil:'networkidle2'});
wait page.waitFor('input[name=search]');
//wait page.type('input[name=search],'Adenosine triphosphate');
等待页面。$eval('input[name=search]',el=>el.value='Adenosine triphosphate');
等待页面。单击('input[type=“submit”]”);
wait page.waitForSelector(“#mw内容文本”);
常量文本=等待页面。评估(()=>{
const anchor=document.querySelector(“#mw content text”);
返回anchor.textContent;
});
console.log(文本);
等待浏览器关闭();
})();
要扩展上述公认的答案,您也可以将$eval与局部范围的变量一起使用
const myLocalValue = 'Adenosine triphosphate';
await page.$eval('input[name=search]', (el, value) => el.value = value, myLocalValue);
这将从本地范围中获取“myLocalValue”,并将其作为“value”传递到浏览器范围中
await page.focus('#email')
await page.keyboard.type('test54')
page.evaluate()
您可以使用将电子邮件字符串指定给元素的属性:
等待页面。评估(()=>{
const email=document.querySelector(“#email”);
email.value=test@example.com';
});
对于木偶演员夏普,语法有点不同,有两种方法,但一种比另一种好。以下是一个完整的示例:
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);
}
谢谢你的回答!非常感谢。我浪费了很多时间试图让“type”方法在登录上工作。看起来很有效,但登录总是失败。干得好,真的节省了我很多时间。你好,亲爱的安德鲁!你能告诉我这个语法的来源吗?嗨,Robot先生,我已经有一段时间没有看到这个了,我真的不记得是从哪里得到的。快速查看这些文档可以看到预期的原型以及可选的“…args”。没有一个例子能清楚地说明这一点,但它是有文档记录的。这非常有用。我完全搞不懂为什么简单地将字符串值更改为局部变量是行不通的。很好的扩展和超级帮助。解决我的问题,谢谢!这起作用了。问题是,在某些形式下,按键上有一个触发器,可以做一些事情。如果只是设置输入字段值,则此触发器不会运行,表单提交也无法正常工作。