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

Question

抱歉我的语言不好.. 我和木偶师一起工作了一段时间。我想做什么：

有一个登录页面.. Login Page

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

步骤 - 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)
}

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

It should not be like this(Photo)

This is how it should be (Photo)

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

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

我想我做了必要的解释。

（你能帮帮我吗？）

Answer 1

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

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

await page.waitForNavigation();

我在你发送的 link 上试过了，它成功了。

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

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

How to make Auto Value Input Send with Puppeteer?

javascript

testing

automated-tests

css-selectors

puppeteer