如何在Chrome Dev Tools中基于元素类编写适配动态列表的XPath？

没问题，我来帮你搞定这个动态卡片的XPath定位需求！

因为页面里的卡片数量不固定，依赖固定索引[11]的XPath肯定会失效，咱们直接基于highlight这个唯一标识类来写适配动态场景的XPath就好，给你几个实用的方案：

方案1：精准定位高亮卡片+目标元素 #

如果highlight是高亮卡片的专属类（或者是类名的一部分），可以直接筛选出带这个类的rdo-nav-card-asset卡片，再定位里面的数值元素：

//rdo-nav-card-asset[contains(@class, 'highlight')]/div/div[1]/div/i

• 解释：contains(@class, 'highlight')会匹配所有包含highlight类的卡片，不管它在列表里的位置是第几个，完美适配动态数量的场景。
• 如果highlight是卡片的唯一类（没有其他类名），可以把条件改成@class='highlight'，匹配更精确。

方案2：从父容器出发简化路径 #

如果想让XPath更简洁，也可以从固定的父容器#rental-asset开始，向下筛选高亮卡片再找目标元素：

//*[@id="rental-asset"]//rdo-nav-card-asset[contains(@class, 'highlight')]//i

这里的//表示向下找所有后代元素，不用写全层级路径，只要确保i标签是数值所在的元素就行。

验证方法 #

写好XPath后，你可以在Chrome开发者工具的Elements面板里按Ctrl+F，输入这个XPath，看看是不是能精准定位到高亮卡片里的数值元素——不管卡片列表怎么变化，它都能找到对应的目标。

如果页面里有多个带highlight类的卡片，想要获取第一个就加[1]，比如//rdo-nav-card-asset[contains(@class, 'highlight')][1]/div/div[1]/div/i；要获取所有的话，直接用不带索引的XPath，后续遍历提取数值即可。

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