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

Как отправить форму? У меня есть простая панель поиска и кнопка поиска. Следующее вводит строку поиска, но событие клика не запускается. Когда для параметра «Безголовый» установлено значение «ложь» и я вручную нажимаю «Ввод» в поле поиска, поиск работает. Как подать кнопку?

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

node.js javascript puppeteer google-chrome-headless
person Kristoffer    schedule 13.09.2017    source источник
comment
как выглядит скриншот, если проблема еще не решена. Пожалуйста, прикрепите его.   -  person Adi Prasetyo    schedule 16.10.2017

Ответы (4)


arrow_upward
7
arrow_downward

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

await page.click('#search-button'); 
await page.waitForNavigation();
person Kristoffer    schedule 19.10.2017
comment
При нажатии на кнопку выдает ошибку проверки, как вернуться на предыдущую страницу? - person RN Kushwaha; 27.03.2018

arrow_upward
0
arrow_downward

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

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

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

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

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

person David R    schedule 13.09.2017
comment
хорошо, теперь форма запущена, но моя функция onSubmit не используется. Я добавил код формы к вопросу. Когда форма отправлена, строка поиска исчезает, а мой URL превращается в localhost:3000/?. При выполнении вручную строка поиска сохраняется в поле поиска, а URL-адрес превращается в localhost:3000/?searchString=michael - person Kristoffer; 13.09.2017
comment
@Kristoffer Вы пытались добавить мои предложения? .. (или) теперь ваш код начал работать? - person David R; 13.09.2017
comment
Я добавил ваши предложения, и теперь puppeteer работает (он не ломается), но я не получаю ожидаемого результата. Не похоже, что срабатывает правильная функция onSubmit. - person Kristoffer; 13.09.2017
comment
@Kristoffer Не могли бы вы удалить обработчик onSubmit и проверить, работает ли он должным образом? - person David R; 13.09.2017
comment
без моего обработчика onSubmit <form className="form-inline" id="search-form"> он по-прежнему очищает поле ввода поиска. Если я сделаю это вручную, я не получу никаких результатов поиска из-за отсутствия обработчика onSubmit. - person Kristoffer; 13.09.2017
comment
@Kristoffer Пожалуйста, измените свою декларацию <form... на <form className="form-inline" id="search-form" action="" method="GET"> и посмотрите, работает ли она. - person David R; 13.09.2017
comment
Тот же результат с <form className="form-inline" id="search-form" action="" method="GET"> Но тогда он также выполняет постбэк, потому что мне не хватает e.preventDefault(). Тот же результат с <form className="form-inline" id="search-form" action="" method="GET" onSubmit={this.search}> - person Kristoffer; 13.09.2017
comment
Если я изменю его, чтобы выполнить тот же поиск в stackoverflow (изменив идентификаторы/имена классов), поиск будет работать. Значит, это что-то с моей формой/настройкой? - person Kristoffer; 13.09.2017
comment
Это работает: await page.click('#search-button'); await page.waitForNavigation(); Это не работает: const searchForm = await page.$('#search-form'); await searchForm.evaluate(searchForm => searchForm.submit()); Итак, проблема, похоже, в этой строке кода await searchForm.evaluate(searchForm => searchForm.submit()); - person Kristoffer; 14.09.2017
comment
Давайте продолжим обсуждение в чате. - person David R; 14.09.2017
comment
Большой! Пожалуйста, обновите свой пост тем, что вы отладили, надеюсь, это обязательно кому-нибудь поможет! - person David R; 14.09.2017

arrow_upward
0
arrow_downward

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

puppeteer-how-to-submit-a-form

ваш вопрос

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

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

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

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

person Carson    schedule 27.09.2017
comment
Проблема была не в скриншоте, а в отправке формы. Если бы я отключил скриншот, он все равно не отправил бы форму правильно. Я попытался запустить его без головы, поэтому я мог видеть, что форма не была отправлена ​​​​должным образом даже после снимка экрана. - person Kristoffer; 17.10.2017

arrow_upward
0
arrow_downward

Вы можете отправить форму, отправив:
await page.click("button[type=submit]");

Найдено здесь: https://stackoverflow.com/a/46965168/8839237

person Peter    schedule 28.05.2021