如何用page.click基于value属性定位元素？原选择器易失效

Absolutely! Using the stable value attribute for targeting is way more reliable than fragile structural selectors—great call switching to this approach. Let me walk you through two easy ways to do this, including the XPath method you asked about, plus a simpler CSS selector option that might save you a bit of code.

1. Using XPath with page.$x() #

The XPath expression to target an <input> with value="Accept" is straightforward:

// Wait for the element to be available first (always a good practice!)
const acceptButtons = await page.$x('//input[@value="Accept"]');

// Check if we found the element, then click it
if (acceptButtons.length > 0) {
  await acceptButtons[0].click();
}

Breakdown of the XPath: #

• //input: Looks for all <input> elements anywhere in the DOM
• [@value="Accept"]: Filters those elements to only the one where the value attribute exactly matches "Accept"

2. Simpler Option: CSS Selector Directly in page.click() #

You don't even need XPath for this! Puppeteer's page.click() accepts CSS selectors that target attributes directly. Here's the one-liner:

await page.click('input[value="Accept"]');

This works because CSS allows attribute matching with [attribute="value"] syntax. Puppeteer will automatically wait for the element to be actionable (by default) before clicking, so this is super clean.

Why this is better than your original selector #

Your original structural selector (body > div.api-container > div > div.clearAll > form > input[type="submit"]:nth-child(3)) depends entirely on the exact nesting of elements in the DOM. If any parent element's class, position, or structure changes, the selector breaks. Using the value attribute keeps your code resilient as long as the button's text/value stays the same.

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