通过XPath定位嵌套Div/Class下的商品加减按钮问题求助

Got it, switching from CSS selectors to XPath for those +/- buttons next to the "Amount" fields? Let's cover a few options—starting with a direct replacement for your existing CSS, then some more robust approaches that won't break as easily if the UI structure changes.

1. Direct Positional XPath (Mirroring Your CSS) #

If you want an XPath that works exactly like your current CSS selector (which targets elements by their position in the DOM hierarchy), here's the equivalent:

For the "+" increase button:

//div[contains(@class, 'product-ingredient-list')]/div[2]/div[YOUR_INDEX]/button[text()='+']

For the "-" decrease button:

//div[contains(@class, 'product-ingredient-list')]/div[2]/div[YOUR_INDEX]/button[text()='-']

Just replace YOUR_INDEX with the actual child index from your truncated CSS selector (the part that ended with nth-chil...).

2. More Robust XPath (Tied to the "Amount" Field) #

Positional selectors are fragile—if someone adds a new element to the UI, your index might break. Instead, target the buttons relative to the "Amount" label/field itself. For example:

If the "Amount" text is in a sibling element right before the buttons:

//span[text()='Amount']/following-sibling::div/button[text()='+']

Or if the Amount value and buttons are inside a shared container:

//div[contains(@class, 'amount-controls') and .//span[contains(text(), 'Amount')]]/button[text()='-']

3. Target by Specific Ingredient (If Needed) #

If you need to adjust the quantity for a specific product ingredient, you can first select that ingredient's container, then grab the buttons inside:

//div[contains(@class, 'product-ingredient') and .//span[text()='Milk']]/button[text()='+']

Replace "Milk" with the actual ingredient name you're targeting.

Pro Tips for Testing XPath: #

• Use your browser's dev tools (F12) to validate: right-click an element > Copy > Copy XPath, or run $x("your-xpath-string") in the console to see which elements match.
• When targeting classes, use contains(@class, 'class-name') instead of exact matches (in case the element has multiple classes like product-ingredient active).
• Avoid deep nested positional paths whenever possible—they're the first thing to break when the UI is updated.

Content of the question来源于stack exchange，提问作者Ixi11