Ввод данных в несколько форм ввода в Puppeteer

Question

Я пытаюсь заполнить форму в Puppeteer с адресом электронной почты и паролем, а затем нажать «Отправить».

Каждый раз, когда запускаются тесты, электронная почта или пароль вводятся не полностью до нажатия кнопки отправки. Это урезанная версия того, что я делаю:

await page.type(selectorSlackInputEmail, email);
await page.type(selectorSlackInputPassword, password);
await page.click(selectorSlackButtonSignIn);

Я думаю, что это может быть потому, что тест не ожидает должным образом завершения page.type, и поэтому фокус переключается на следующий входили кнопка отправки нажимается перед заполнением каждого поля ввода.

Как обойти эту проблему?

Answer 1

После попытки других методов (включая await page.type и await page.focus, а затем await page.keyboard.type), это единственное, что мне подходит для заполнения нескольких полей формы:

await signInPage.evaluate(
  (email, password) => {
    document.querySelector('input#email').value = email;
    document.querySelector('input#password').value = password;
  },
  email,
  password
);

Это неудовлетвори мой первоначальный вариант использования. Я хочу правильно смоделировать ввод пользователя в формы, но этот метод обходит это и напрямую вставляет значения в поля.

Я бы приветствовал «правильное» решение этой проблемы.

Answer 2

Я бы ожидал, что ваши await директивы покроют проблему, с которой вы столкнулись - я думаю, что метод type просто ...

отправляет keydown, keypress / input и keyup события [1]

... что, возможно, некоторым слушателям требуется некоторое время для выполнения своих перехваченных функций между отправкойэти события и вызов метода click.

Как насчет обходного пути, который явно проверяет наличие у этих селекторов ожидаемых данных перед нажатием кнопки отправки?

await page.type(selectorSlackInputEmail, email);
await page.type(selectorSlackInputPassword, password);

await page.waitFor(() => {
    return document.querySelector(selectorSlackInputEmail).value = email) &&
      document.querySelector(selectorSlackInputPassword).value = password);
});

// And only *then*
await page.click(selectorSlackButtonSignIn);