Puppeteer：基于文本设置下拉选项选中状态的外部函数问题

Hey there! Let's break down why your custom dropdown selection function isn't working and what that weird {"0":{"0":{},"1":{},"2":{},"3":{}}} output means.

What's That Strange Output? #

That output is the serialized version of a Puppeteer ElementHandle collection. ElementHandles are proxy objects that bridge Node.js and the browser's DOM—they aren't regular JavaScript objects, so printing them directly gives you that nested empty object structure instead of the actual option data you expected. You're probably logging the raw ElementHandles returned by a method like page.$$() instead of extracting the text/values from the elements.

Common Reasons Your Custom Function Isn't Working #

• You're trying to manipulate DOM elements in the Node.js context instead of the browser's context (Puppeteer requires evaluate() to run code directly in the browser).
• Your function isn't properly waiting for the dropdown/options to load before attempting selection, leading to empty ElementHandles.
• You forgot to trigger a change event after setting the selected option—many frontend frameworks rely on this event to recognize state changes.
• You're returning the ElementHandle collection instead of the actual selected option data, leading to the confusing log output.

The Fix: Properly Select by Text in Puppeteer #

Here's a reliable custom function that works entirely within the browser context, handles loading, and verifies the selection:

async function selectDropdownOptionByText(page, dropdownSelector, targetText) {
  // Wait for the dropdown to be fully loaded
  await page.waitForSelector(dropdownSelector);

  // Run DOM manipulation directly in the browser
  await page.evaluate((selector, text) => {
    const dropdown = document.querySelector(selector);
    if (!dropdown) return;

    // Convert options to an array and find the matching one
    const options = Array.from(dropdown.options);
    const matchingOption = options.find(opt => opt.textContent.trim() === text.trim());

    if (matchingOption) {
      matchingOption.selected = true;
      // Trigger change event to update any framework-bound state
      dropdown.dispatchEvent(new Event('change', { bubbles: true }));
    }
  }, dropdownSelector, targetText);

  // Verify and return the actual selected text (for debugging/confirmation)
  const selectedText = await page.$eval(dropdownSelector, el => {
    return el.options[el.selectedIndex].textContent.trim();
  });

  console.log('Successfully selected option:', selectedText);
  return selectedText;
}

How to Use This Function #

Call it with your page instance, dropdown selector, and the text you want to select:

await selectDropdownOptionByText(page, '#my-dropdown', 'Option Text I Want');

Debugging Tips #

• Never log raw ElementHandles: Instead, use page.$$eval() to extract actual data from options:

  const allOptionTexts = await page.$$eval('#my-dropdown option', opts => opts.map(opt => opt.textContent.trim()));
  console.log('All options:', allOptionTexts);
  

• Always wait for elements to load with page.waitForSelector() before interacting.
• If the dropdown is dynamically populated (e.g., via AJAX), wait for the options to appear using page.waitForFunction():

  await page.waitForFunction((selector) => {
    return document.querySelectorAll(`${selector} option`).length > 0;
  }, {}, '#my-dropdown');
  

内容的提问来源于stack exchange，提问作者Pipo