Set value for input fields in Puppeteer on Children

I have a class with the ID ‘VerificationErrorMessage’ and it contains 6 input fields without name or id. I want to loop through all the ‘children’ so I can fill them with values.

First of all, I tried this to get any value, but I cannot figure out how I can add the data (set a value on the input field).

const els = await page.$$('[aria-describedby="VerificationErrorMessage"]');


for (let i = 0; i < els.length; i++) {
  const img = await els[i].$eval('input');

}

How can I change the input fields so it contain data?

<div aria-describedby="VerificationErrorMessage">
<input  type="tel">
<input  type="tel">
<input  type="tel">
<input  type="tel">
<input  type="tel">
<input  type="tel">
</div>

get a collection of the inputs:

const inputs = document.querySelectorAll("input[type=tel]");

Then loop through them, updating the value to whatever you want it to be.

inputs.forEach(function updateValue(input, index) {
    input.value = "input " + index;
});

Then I get this

Something awesome to happen at http://localhost:8080
(node:7916) UnhandledPromiseRejectionWarning: ReferenceError: document is not defined
    at startTinderBot (C:\Users\Daan\Documents\puppeteer\main.js:87:16)
(node:7916) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was
 not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_m
ode). (rejection id: 1)

You don’t even need to use JavaScript to set values to the inputs.

You can just set the value in the HTML code instead, which is frequently the easier and more reliable way.

<div aria-describedby="VerificationErrorMessage">
<input  type="tel" val="(nnn)nnn-nnnn">
<input  type="tel" val="(nnn)nnn-nnnn">
<input  type="tel" val="(nnn)nnn-nnnn">
<input  type="tel" val="(nnn)nnn-nnnn">
<input  type="tel" val="(nnn)nnn-nnnn">
<input  type="tel" val="(nnn)nnn-nnnn">
</div>

Ahh, I just noticed that you are using Puppeteer.

This may have to wait until someone comes along that is familiar with that.

You can use page.evaluate.

For example:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();
  await page.goto('http://localhost');

  await page.evaluate(() => {
    const inputs = [...document.querySelectorAll('input[type="tel"]')];
    inputs.forEach(input => input.value = 'Whatever');
  });

  await page.waitFor(2000);
  await browser.close();
})();

You’ll notice that I’ve set headless mode to false and have included a small delay so that you can see the result in the browser.

HTH

4 Likes

Hi @dseegersmail, you might either pass a function to $$eval() (note the $$ to get all input elements, rather than just the first one) that will get serialized and evaluated in the browser context, receiving the matches as its 1st argument:

const els = await page.$$('[aria-describedby="VerificationErrorMessage"]')

for (const el of els) {
  await el.$$eval('input', inputs => inputs.forEach(input => {
    input.value = '123'
  }))
}

Alternatively, you might type() the values into the input elements:

const inputs = await page.$$('[aria-describedby="VerificationErrorMessage"] input')

for (const input of inputs) {
  await input.type('123')
}
1 Like

Nice one. It’s probably better to use the type() method on reflection, as that’s likely what you want to do — type a value into one or more input fields.

But I’m not overly familiar with Pupeteer. Is there anything wrong with using page.evaluate as in my example?

1 Like

Hey @James_Hibbard, ah sry I entirely missed you having ninja’d me. :-) No I think that would indeed make more sense than first querying for the container handles in the puppeteer context.

Ah ok, cool. I was just wondering :slight_smile:

Hey @James_Hibbard @m3g4p0p,

First of all thank you for the answers, I did not have time to react before today :slight_smile:.
Anyhow thank you it is working :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.