本文详解如何使用 xpath 精确筛选 `class` 属性值**不包含特定子字符串**（如 `'mobilewrapper'`）的元素，避免误选无 `class` 属性的节点，并给出可直接用于自动化测试的可靠路径写法。
在 Web 自动化（如 Selenium、Playwright）或 XML 解析中，常需基于动态生成的 CSS 类名进行定位。例如，框架（如 Styled Components）会生成形如 styled__MobileWrapper-sc-mljlp8-0 的类名，其中仅 MobileWrapper 是稳定可识别的标识符，其余部分随机变化。此时若想仅选取 不位于 MobileWrapper 容器内的目标元素（如 div[data-testid="product-container"]），需谨慎构造 XPath 条件。
常见误区是使用：
//div[not(contains(@class, 'MobileWrapper'))]/div[@data-testid='product-container']
该表达式看似合理，实则存在逻辑漏洞：not(contains(@class, 'MobileWrapper')) 在 @class 属性不存在时返回 true（因为 contains(null, '...') 为 false，取反后为 true）。因此，它会错误地匹配所有无 class 属性的 div（如顶层
✅ 正确做法是先确保 @class 属性存在，再对其值做子字符串判断。推荐写法如下：
//div[@class and not(contains(@class, 'MobileWrapper'))]/div[@data-testid='product-container']
该表达式含义清晰：
- @class：要求元素必须具有 class 属性（排除无 class 的 div）；
- not(contains(@class, 'MobileWrapper'))：在其 class 值中不包含 'MobileWrapper' 子串；
- 后续 /div[@data-testid='product-container']：精准定位符合条件的子元素。
? 验证效果（基于示例 HTML）：
- ✅ 匹配最外层三个 product-container（父 div 无 class → 被 @class 条件排除？等等——注意：此处父 div 确实无 class，但我们的目标是 这些 product-container 的直接父级是否含 MobileWrapper。更准确的目标路径应为：
//div[not(descendant-or-self::*[@class and contains(@class, 'MobileWrapper')])]/div[@data-testid='product-container']
但实际场景中，更简洁且符合需求的是 “父元素不是 MobileWrapper 容器”，即：
//div[@data-testid='product-container'][not(ancestor::div[@class and contains(@class, 'MobileWrapper')])]
此写法直接作用于目标 product-container 元素，检查其任意祖先 div 是否为含 MobileWrapper 的容器，语义更直观、鲁棒性更强。
⚠️ 注意事项：
- contains(@class, 'MobileWrapper') 依赖 class 值为纯文本匹配，若类名含空格（如 class="wrapper MobileWrapper"），仍能正确匹配；
- 若需完全精确匹配单词边界（避免 NonMobileWrapper 误匹配），需结合 concat(' ', @class, ' ') 或使用正则（XPath 2.0+），但多数测试环境（如 Selenium 默认 XPath 1.0）不支持 matches()，故子串匹配是兼容性最佳方案；
- 始终优先使用 @class and contains(...) 组合，而非单独 not(contains(...))，以防属性缺失导致逻辑偏差。
总结：XPath 中对动态类名的条件筛选，核心在于显式声明属性存在性。牢记 @attr and not(contains(@attr, 'substr')) 是安全排除的黄金模式，再结合 ancestor:: 或层级关系精确定位目标节点，即可稳定应对现代前端框架的类名生成策略。
