Puppeteer - How can I click on a field and enter text using label text?

Other Questions Puppeteer
1

I’m working with Puppeteer and need to click on an input field and enter a password. Below is the code snippet I’m using:

<label for=“dynamic-id-1” style=“width:180px;” class=“form-label”>Current Password：
<input type=“password” id=“dynamic-id-1” class=“form-input” size=“20” maxlength=“64”></code>
<label for=“dynamic-id-2” style=“width:180px;” class=“form-label”>New Password：
<input type=“password” id=“dynamic-id-2” class=“form-input” size=“20” maxlength=“64”></code>

Since the field ids change dynamically and correspond to the label values, the label text is the only way to identify the fields. Any assistance in getting this to work would be greatly appreciated. Here’s my attempt, but it’s not functioning as intended:

await page.evaluate(() => { const labels = […document.querySelectorAll(‘label’)]; const targetLabel = labels.find(lbl => lbl.textContent === ‘Current Password：’); if (targetLabel) targetLabel.click(); });

2

While the previous answer showcases a reliable way to find and manipulate the input field using the label's for attribute, I'd like to introduce an alternative approach leveraging Puppeteer's page.waitForSelector method with XPath selectors to interact with the input fields based on the label text.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('YOUR_PAGE_URL');

  // Use XPath to find the input field by its label text
  const [inputElement] = await page.$x("//label[contains(text(), 'Current Password')]//following-sibling::input");

  if (inputElement) {
    await inputElement.focus();
    await page.keyboard.type('YourPassword');
  }

  await browser.close();
})();

Steps Explained:

  • Navigate to your desired page using page.goto().
  • Utilize XPath to select the input element that immediately follows the label with the text 'Current Password'.
  • If the input element is found, focus on it and use page.keyboard.type() to input the text.

This method provides flexibility when dealing with dynamic IDs or complex DOM structures where standard approaches might fall short. Ensure to replace 'YourPassword' with the actual text you intend to input.

3

To interact with an input field using label text in Puppeteer, try the following code utilizing querySelector and the for attribute:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('YOUR_PAGE_URL');

  await page.evaluate(() => {
    const label = Array.from(document.querySelectorAll('label')).find(lbl => lbl.textContent.trim() === 'Current Password：');
    if (label) {
      const inputId = label.getAttribute('for');
      const input = document.getElementById(inputId);
      if (input) {
        input.focus();
        input.value = 'YourPassword';
      }
    }
  });

  await browser.close();
})();

Steps:

  • Fetch the label with the text 'Current Password：'.
  • Use the for attribute to find the linked input.
  • Focus on the input and set the desired value.

Replace 'YourPassword' with your intended text.

4

To efficiently click on an input field using a label's text in Puppeteer, here's a streamlined approach that leverages Puppeteer's evaluate method and handles dynamic IDs by referencing the label's for attribute:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('YOUR_PAGE_URL');

  await page.evaluate(() => {
    const label = document.querySelector('label[for]');
    if (label && label.textContent.includes('Current Password')) {
      const input = document.getElementById(label.getAttribute('for'));
      if (input) {
        input.focus();
        input.value = 'YourPassword';
      }
    }
  });

  await browser.close();
})();

Steps:

  • Launch Puppeteer and navigate to your web page using goto().
  • Use querySelector to find the label element that includes 'Current Password'.
  • Obtain the input using the for attribute and set the desired value.

This code efficiently maps the label to the input, avoiding the pitfalls of dynamic IDs. Make sure to replace YOUR_PAGE_URL and YourPassword with your actual page URL and password, respectively.