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?
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.
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();
I solved it by using this instead of submitting the form:
await page.click('#search-button');
await page.waitForNavigation();
Assuming your search bar has "search" as its ID,
Basically you need to use the selector expression to get a handle to your search bar and then using the evaluate
function you can do the form submission,
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
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
You can submit the form by sending:
await page.click("button[type=submit]");
Found here: https://stackoverflow.com/a/46965168/8839237
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.