кукловод - как отправить форму

1

Как отправить форму? У меня есть простая панель поиска и кнопка поиска. Следующее входит в строку поиска, но событие click не запускается. Если для параметра headless установлено значение false, и я нахожусь в поле "serachfield", поиск выполняется. Как отправить кнопку?

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

Моя панель поиска

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

ОБНОВИТЬ

Это не работает:

const searchForm = await page.$('#search-form'); 
await searchForm.evaluate(searchForm => searchForm.submit());

Он выполняет обратную передачу, и текст в форме был очищен, хотя он должен запускать функцию с preventDefault.

Таким образом, проблема заключается в том, что эта строка кода ждет

searchForm.evaluate(searchForm => searchForm.submit());

Это работает:

Я изменил код на:

await page.click('#search-button'); 
await page.waitForNavigation();
  • 0
    как выглядит скриншот, если проблема еще не решена. Пожалуйста, рассмотрите возможность прикрепления.
Теги:
puppeteer
google-chrome-headless

3 ответа

3
Лучший ответ

Я решил это, используя это вместо отправки формы:

await page.click('#search-button'); 
await page.waitForNavigation();
Поделиться
  • 0
    При нажатии кнопки выдает ошибки проверки, как вернуться на предыдущую страницу?
0

сначала следуйте по этой ссылке

Кукольник-хау к Submit-а-форму

ваш вопрос

когда вы нажимаете ввод, а не на скриншот, это вопросы.

// 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 ...

Вот почему ваш код не работает.

надеется помочь вам

Поделиться
  • 0
    Проблема была не в скриншоте, а в отправке формы. Если я отключил скриншот, он все равно не отправил правильную форму. Я попытался запустить его без заголовка, чтобы увидеть, что форма не была отправлена должным образом даже после скриншота.
0

Предполагая, что ваша панель поиска имеет "поиск" в качестве идентификатора,

В основном вам нужно использовать выражение селектора, чтобы получить дескриптор панели поиска, а затем с помощью функции evaluate вы можете выполнить отправку формы,

Вам необходимо предоставить нижеприведенный фрагмент, чтобы отправить форму,

const searchForm = await page.$('#search');
await searchForm.evaluate(searchForm => searchForm.submit());

Надеюсь это поможет

Поделиться
  • 0
    Хорошо, теперь форма запущена, но моя функция onSubmit не используется. Я добавил код формы к вопросу. Когда форма отправлена, строка поиска исчезает, и мой URL-адрес превращается в localhost:3000/? , При этом вручную searchString сохраняется в поле поиска, а URL-адрес превращается в localhost:3000/?searchString=michael
  • 0
    @Kristoffer Вы пытались добавить мои предложения? .. (или) ваш код начал работать сейчас?
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню