如何使用 Puppeteer 进行自动值输入发送？

Question

提前为我的糟糕语言道歉..我已经和木偶师一起工作了一段时间。 我想做的事：

有一个登录页面..登录页面

我的目标是自动填充此登录页面如何？ 例如：

步骤1

const puppeteer = require("puppeteer");

(async () => {

const browser = await puppeteer.launch(
    {
        "headless": false,
        defaultViewport: null,
        args: ['--start-maximized'],
        "slowMo": 1
    });
const page = (await browser.pages())[0];
await page.goto('http://www.vbsca.ca/login/login.asp', { waitUntil: ['load', 'domcontentloaded', 'networkidle2'] }); // A website for example.

第2步

let check;
try {

    const testAttribute = async (attributeName, selector) => {
        return await page.evaluate((attributeName, selector) => {
            const fieldList = Array.from(document.querySelectorAll(selector))
            return fieldList.every((field) => {
                const attributes = Array.from(field.attributes)
                return attributes.some((att) => { return att.name === attributeName })
            })
        }, attributeName, selector)
    }

// 这部分的正常位置

// 下面是问题！

    console.log("Test", await testAttribute('type', 'input'));
    check = await testAttribute('type', 'input');

    if (check === true) {
        console.log("Next")

        await page.waitForTimeout(3000);    

        await page.evaluate(() => {
            const inputTest = Array.from(document.querySelectorAll('input'))
            console.log("İnputTest: ", inputTest)
            for (let key in inputTest) {
                inputTest[key].value = "Test";
                let elementTest = inputTest[key] // Result = <input type="password" placeholder="Enter Your Personal Password" value>               
            }
        });
    }
    else {
        console.log("Not Found")
    }
} catch (error) {
    console.log(error)
}

问题是这段代码不起作用。 这是为什么？ 因为; （当我发送数据时这个数据不是真实的） - 我不知道原因。

不应该是这样的（图）

本该如此（图）

结果：我的目标是自动填充条目和按钮等项目。 我所要做的就是给 url。

简要考虑元素的事件，例如所有输入和操作按钮。

我想我做了必要的解释。

（你能帮助我吗？）

Answer 1

如果您要问的问题是如何向输入添加值，您可以试试这个。

await page.evaluate(() => {
  document.querySelectorAll('input').forEach(el => el.value = "Tesing");
  document.querySelector('input[type="submit"]').click();
});

await page.waitForNavigation();

我在您发送的链接上试过了，它成功了。

  let browser, page;
  let url = 'http://www.vbsca.ca/login/login.asp';

  try {
    browser = await puppeteer.launch({ headless: true });
    page = await browser.newPage();
    await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 60000 });
    await page.waitForSelector('input', { visible: true, timeout: 60000 });

    await page.evaluate(() => {
      document.querySelectorAll('input').forEach(el => el.value = "Tesing");
      document.querySelector('input[type="submit"]').click();
    });
    
    await page.waitForNavigation();
  } catch (error) {
    console.log(error.message);
  } finally {
    if (browser) {
      await browser.close();
      console.log('closing browser');
    }
  }

更新你也可以试试这个。

await page.evaluate(() => {
  const inputs = document.querySelectorAll('input');
        
  for (let i = 0; i < inputs.length; i++) {
    if (i == 0) {
      inputs[i].value = 'Username';
    } else if (i == 1) {
      inputs[i].value = 'Password';
    }
  }

  document.querySelector('input[type="submit"]').click();
});

最后更新。 这有效，我已经在两个站点上都尝试过并且有效。

 let browser, page;
  let url = 'http://test-sertifika.tga-certification.glomil.com';
//let url = 'http://www.vbsca.ca/login/login.asp';

  try {
    browser = await puppeteer.launch({ headless: true });
    page = await browser.newPage();
    await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 60000 });
    await page.waitForSelector('input', { visible: true, timeout: 60000 });

    await page.evaluate(() => {
      const inputs = document.querySelectorAll('input');

      for (let i = 0; i < inputs.length; i++) {
        if (i == 0) {
          inputs[i].value = 'Username';
        } else if (i == 1) {
          inputs[i].value = 'Password';
        }
      }

      if (document.querySelector('div[class="submit-wrapper"] > button')) {
        document.querySelector('div[class="submit-wrapper"] > button').click();
      } else if (document.querySelector('input[type="submit"]')) {
        document.querySelector('input[type="submit"]').click();
      }
    });
    
    await page.waitForNavigation();
  } catch (error) {
    console.log(error.message);
  } finally {
    if (browser) {
      await browser.close();
      console.log('closing browser');
    }
  }