如何始终如一地填写输入字段? [英] How can I consistently fill out input fields?

问题描述

我不知道为什么，但似乎有些领域对我不起作用.

这对我来说在一个站点上运行良好:

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

但是，在

请注意上面的结果屏幕截图如何在提交按钮上没有任何内容，您的其他选择器也是如此.

修复2:正确传递数据

这是可选的，以防第一次修复没有改变任何东西.

步骤 1

不要传递两个参数，而是用大括号传递一个参数.

await page.evaluate((sel, val) => {const ele = document.querySelector(sel);如果(！元素){返回;}ele.value = val;}, (sel, val));//<-- 看这里

步骤 2

如果上述步骤 1 不起作用，请尝试触发更改.所以如果是angular app，应该知道元素变了，把上面的改成这个，

await page.evaluate((sel, val) => {const ele = document.querySelector(sel);如果(！元素){返回;}ele.value = val;//在这里触发变化var event = new Event('输入', {'泡泡':真的，'可取消':真});ele.dispatchEvent(事件);}, (sel, val));

可选

如果你想多次重用同一个东西，你可以用这种方式重写它们，

const fillInput = (sel, val) =>{await page.waitForSelector(sel, {可见: true });await page.evaluate((sel, val)=>{})//上面函数的代码应该在这里}

然后这样调用，

await fillInput(emailInputSel, email)

I'm not sure why, but it seems like some fields just don't work for me.

This is working fine for me on one site:

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

However, on https://app.member.virginpulse.com/, it doesn't seem to work for me. It should be simple enough as the input fields both have IDs (#username and $password)... however, it just doesn't seem to fill out properly.

const puppeteer = require('puppeteer');
const email = "[e-mail]";
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'});
    ...

Other things I've tried:

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

Nothing seems to fill out the data properly. Does anyone know what is happening and how to get this to work?

解决方案

Fix 1: Wait until element is VISIBLE

Just waiting for selector will not work, we must wait till the element is properly visible on the viewport and navigation requests are done.

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

Just adding above changes on your current code gave me this result,

Notice how the result screenshot above does not have any content on the submit button, same happens with your other selectors as well.

Fix 2: Pass the data properly

This is optional in case the first fix does not change anything.

Step 1

Instead of passing two arguments, pass one argument with braces.

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

Step 2

If the above step 1 does not work, then try to trigger the change. So if it's a angular app, it should know that the element has changed, Change the above to this,

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

Optional

If you want to reuse the same thing multiple time, you can rewrite them in this manner,

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

then call like this,

await fillInput(emailInputSel, email)

这篇关于如何始终如一地填写输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！