puppeteer - 如何提交表单

Question

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(); 

Answer 1

I solved it by using this instead of submitting the form:

await page.click('#search-button'); 
await page.waitForNavigation(); 

Answer 2

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

Answer 3

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

Answer 4

You can submit the form by sending:
await page.click("button[type=submit]");

Found here: https://stackoverflow.com/a/46965168/8839237