Как я могу последовательно заполнять поля ввода?

Question

Я не уверен, почему, но кажется, что некоторые поля просто не работают для меня.

На одном сайте у меня все работает нормально:

await page.click(USERNAME_SELECTOR);
await page.keyboard.type(CREDS.username);
await page.click(PASSWORD_SELECTOR);
await page.keyboard.type(CREDS.password);
await page.click(LOGIN_BUTTON_SELECTOR);
await page.waitForNavigation();

Однакона https://app.member.virginpulse.com/, мне кажется, это не работает.Это должно быть достаточно просто, так как оба поля ввода имеют идентификаторы (#username и $password) ... однако, кажется, что они не заполняются должным образом.

const puppeteer = require('puppeteer');
const email = "foo@bar.com";
const password = "foopass";
const emailInputSel = "#username";
const passwordInputSel = "#password";
const signInButtonSel = ".login-submit input";
const homeUrl = "https://app.member.virginpulse.com";

async function run() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(homeUrl, {waitUntil: 'domcontentloaded'});
    //----from here---
    await page.waitFor(emailInputSel);
    await page.$eval(emailInputSel, (e,v) => e.value = v, email);
    await page.$eval(passwordInputSel, (e,v) => e.value = v, password);
    //----to here----- i've tried several things
    await page.screenshot({path: 'screenshot.png'});
    ...

Другие вещи, которые я 'мы пробовали:

await page.evaluate((sel, val) => {
    const ele = document.querySelector(sel);
    if (!ele) {
        return;
    }
    ele.value = val;
}, sel, val);

---

await page.evaluate((sel) => {
    const ele = document.querySelector(sel);
    if (!ele) {
        return;
    }
    ele.click(); ele.focus();
}, sel);
await page.keyboard.type(val);

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

Answer 1

Исправление 1: подождать, пока элемент не станет видимым

Просто ожидание селектора не будет работать, мы должны подождать, пока элемент будет правильно виден в окне просмотра и запросы навигации выполнены.

// wait until all requests are done
await page.goto(homeUrl, { waitUntil: "networkidle0" });

// wait until the email selector is visible on viewport
await page.waitForSelector(emailInputSel, { visible: true }); 

Просто добавив вышеуказанные изменения в ваш текущий код, я получил такой результат,

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

Исправление 2: Передайте данные правильно

Это необязательно, если первое исправление ничего не меняет.

Шаг1

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

await page.evaluate((sel, val) => {
    const ele = document.querySelector(sel);
    if (!ele) {
        return;
    }
    ele.value = val;
}, (sel, val)); // <-- Look here

Шаг 2

Если вышеуказанный шаг 1 не работает, попробуйте вызвать изменение .Так что, если это угловое приложение, оно должно знать, что элемент изменился. Измените приведенное выше на это,

await page.evaluate((sel, val) => {
  const ele = document.querySelector(sel);
  if (!ele) {
    return;
  }
  ele.value = val;

  // Trigger the change here
  var event = new Event('input', {
    'bubbles': true,
    'cancelable': true
  });

  ele.dispatchEvent(event);

}, (sel, val));

Необязательно

Если вы хотите использовать одну и ту же вещь несколько раз, выможно переписать их таким образом,

const fillInput = (sel, val) => {
  await page.waitForSelector(sel, { visible: true });
  await page.evaluate((sel, val)=>{}) // the code from above function should be here
}

, затем позвонить вот так:

await fillInput(emailInputSel, email)