javascript puppeteer - 如何提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46191367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
puppeteer - how to submit form
提问by Kristoffer
How do I submit the form? I have a simple search bar and a search button. The following enters the search string, but the click event is not fired. When headless is set to false and I manully click enter in the serachfield, the search is working. How to submit the button?
我如何提交表格？我有一个简单的搜索栏和一个搜索按钮。以下输入搜索字符串，但不触发单击事件。当 headless 设置为 false 并且我在 serachfield 中手动单击 Enter 时，搜索正在工作。如何提交按钮？
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('http://localhost:3000', {waitUntil: 'networkidle'});
await page.focus('#search');
// Type our query into the search bar
await page.type('michael');
// Submit form
await page.press('Enter');
await page.screenshot({path: './screenshots/search3.png'});
browser.close();
})();
My searchbar
我的搜索栏
search(e) {
e.preventDefault();
this.props.onClick(this.props.value);}
render() {
return (<form className="form-inline" id="search-form" onSubmit
{this.search}>
<div className="form-group">
<input
type="text"
className="form-control"
id="search"
value={this.props.value}
placeholder={this.props.placeHolder}
onChange={this.props.onChange}
/>
<button primary type="submit" >
{this.props.buttonText}
</button>
</div>
</form>);
}
UPDATE
更新
This is not working:
这不起作用：
const searchForm = await page.$('#search-form');
await searchForm.evaluate(searchForm => searchForm.submit());
It does a postback and the text in the form was cleared, even though it should trigger the function with preventDefault.
它执行回发并清除表单中的文本，即使它应该使用 preventDefault 触发函数。
So the issue seems to be this line of code await
所以问题似乎是这行代码等待
searchForm.evaluate(searchForm => searchForm.submit());
This is working:
这是有效的：
I changed the code to:
我将代码更改为：
await page.click('#search-button');
await page.waitForNavigation();
回答by Kristoffer
I solved it by using this instead of submitting the form:
我通过使用它而不是提交表单来解决它：
await page.click('#search-button');
await page.waitForNavigation();
回答by David R
Assuming your search bar has "search" as its ID,
假设您的搜索栏的 ID 为“搜索”，
Basically you need to use the selector expression to get a handle to your search bar and then using the evaluatefunction you can do the form submission,
基本上，您需要使用选择器表达式来获取搜索栏的句柄，然后使用evaluate您可以提交表单的功能，
You need to have the below snippet to submit your form,
您需要使用以下代码段来提交表单，
const searchForm = await page.$('#search');
await searchForm.evaluate(searchForm => searchForm.submit());
Hope this helps
希望这可以帮助
回答by Carson
first follow this link
首先点击这个链接
puppeteer-how-to-submit-a-form
your question
你的问题
when you press an enter than screenshot it, this is the questions.
当你按下回车键而不是截图时，这就是问题。
// this code just await press event finished, but not form submitted finished,
//in this way, you can not screenshot form submit finished status
await page.press('Enter');
await page.screenshot({path: './screenshots/search3.png'});
// form submitting ...
This is why your code not works.
这就是您的代码不起作用的原因。
hopes to help you
希望能帮到你
