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

Question

Sorry in advance for my bad language.. I've been working with the puppeteer for a while. what i want to do:

There is a login page.. Login Page

My goal is to autofill this login page How? For example:

Step - 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.

Step - 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)
    }

// normal places up to this part

// The problem is below!

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

The problem is that this code is not working. Why is that? Because; (When I Send Data This data is not real) - I do not know the reason.

It should not be like this(Photo)

This is how it should be (Photo)

As a Result: My goal is to autofill entries and items like buttons. all i have to do is give the url.

Consider briefly the events of elements such as All Inputs and buttons for action.

I think I made the necessary explanation.

(Can you help me?)

Answer 1

If the question you are asking is how to add values to inputs you can try this.

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

await page.waitForNavigation();

I tried it on the link you sent and it worked.

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

Update you can also try this.

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

Last update. This works i have tried it on both site and it worked.

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