Puppeteer技术问询：兄弟元素获取与上下文内文本元素定位

Hey there! Let's tackle your two Puppeteer questions one by one, based on the scenario you described where you have sections with duplicate field labels.

1. Getting sibling elements without using nextElementSibling in evaluate() #

Instead of manually traversing siblings inside page.evaluate(), you can use XPath selectors directly with Puppeteer's $x() or waitForXPath() methods. XPath has built-in axes for selecting sibling elements, which lets you avoid writing DOM traversal code in the browser context.

For example, if you want to get the sibling element right after the section label (like "Business Address"), you can use the following-sibling axis:

// First, get the section label element's handle
const sectionLabelHandle = await page.waitForXPath("//div[contains(text(), 'Business Address')]");

// Now get its immediate sibling element using XPath
const siblingHandle = await page.waitForXPath("//div[contains(text(), 'Business Address')]/following-sibling::div[1]");

If you prefer to work from the section label handle instead of repeating the XPath, use a relative XPath with elementHandle.$x():

// Relative XPath starts with . to reference the current element's context
const siblingHandles = await sectionLabelHandle.$x("./following-sibling::div[1]");
const siblingHandle = siblingHandles[0]; // Take the first matching sibling

Another alternative is to use elementHandle.evaluateHandle() with a different DOM traversal method (still avoiding nextElementSibling):

const siblingHandle = await sectionLabelHandle.evaluateHandle(el => el.parentNode.children[1]);

2. Finding elements with specific text within a parent element's context #

The circular JSON error you're seeing happens because ElementHandle instances can't be serialized to JSON, which breaks when passing them directly to waitForFunction(). Here are three solid fixes:

Option 1: Use elementHandle.evaluateHandle() #

Run a function directly in the parent element's context to find the target element, and return its handle:

// Assuming siblingHandle is your parent element handle
const labelHandle = await siblingHandle.evaluateHandle((parent, targetText) => {
  return Array.from(parent.querySelectorAll('.label')).find(el => 
    el.textContent.includes(targetText)
  );
}, "Country"); // Pass the target text as an argument

Option 2: Use relative XPath with elementHandle.$x() #

XPath is perfect for text-based selection within a parent context. Use a relative path to search only inside the parent element:

// Search for .label elements containing "Country" inside siblingHandle
const labelHandles = await siblingHandle.$x(".//div[contains(@class, 'label') and contains(text(), 'Country')]");
const labelHandle = labelHandles[0];

Option 3: Fix waitForFunction() usage #

If you still want to use waitForFunction(), pass the parent element as an argument—Puppeteer automatically converts the ElementHandle to a DOM element inside the function:

const labelHandle = await page.waitForFunction(
  (parentEl, targetText) => {
    return Array.from(parentEl.querySelectorAll('.label')).find(el => 
      el.textContent.includes(targetText)
    );
  },
  { timeout: 5000 }, // Optional: add timeout settings
  siblingHandle, "Country" // Pass parent element handle and target text as args
);

Once you have the labelHandle, you can grab its sibling input field using similar methods (like XPath's following-sibling axis or evaluateHandle() for direct traversal).

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