如何在 Java Selenium 中正确通过多类名定位 div 元素

.selenium 的 `by.classname()` 不支持复合类名，`by.cssselector()` 也不能直接传入空格分隔的类名字符串；需改用 css 选择器（以点连接多个类）或 xpath（使用 `contains(@class, …)` 模糊匹配）来精准定位含 tailwind 风格多类名的 div 元素。

在使用 java + Selenium 进行 Web 自动化测试时，遇到类似 Tailwind CSS 生成的多类名（如 flex h-10 w-10 items-center justify-center…）非常常见。但初学者常误将整个 class 属性值当作单个类名传给 By.className()，导致 InvalidSelectorException: Compound class names are not permitted —— 因为该方法仅接受单一、不带空格的类名（如 “flex”），不支持空格分隔的多个类。

同样，若直接将空格分隔的类名字符串传给 By.cssSelector()（如 “flex h-10 w-10…”），会触发 invalid selector 错误，因为 CSS 选择器中空格表示后代关系，而非“同时拥有这些类”。

✅ 正确做法如下：

✅ 方案一：CSS 选择器（推荐，性能更优）

将每个类名前加 .，用 . 连接（表示“同时具备所有这些类”）：

立即学习“Java免费学习笔记（深入）”；

WebElement btn = driver.findElement(By.cssSelector(     "div.flex.h-10.w-10.items-center.justify-center.rounded-full.border-4.border-white.font-SFProBold.text-base.sm\:h-16.sm\:w-16.sm\:text-xl" ));

⚠️ 注意：Tailwind 中的响应式类（如 sm:h-16）含冒号 :，在 CSS 选择器中需转义为 sm\:h-16（Java 字符串中写两个反斜杠）。

✅ 方案二：XPath（语义清晰，容错性高）

利用 contains(@class, …) 进行子字符串匹配（注意：此方式不区分单词边界，慎用于类名易重叠场景）：

WebElement btn = driver.findElement(By.xpath(     "//div[contains(@class, 'flex h-10 w-10 items-center justify-center rounded-full border-4 border-white font-SFProBold text-base sm:h-16 sm:w-16 sm:text-xl')]" ));

✅ 方案三（进阶）：组合唯一特征提升稳定性

上述长类名易随前端重构变动。更健壮的做法是结合语义属性与部分类名，例如：

// 利用内部文本 + 关键布局类 WebElement btn = driver.findElement(By.xpath("//div[contains(@class, 'flex') and contains(@class, 'rounded-full') and text()='Yes']"));  // 或结合父容器结构（更可靠） WebElement btn = driver.findElement(By.cssSelector(     "div.fixed.bottom-5.right-5 > div.flex.rounded-full" ));

? 关键总结：

• ❌ By.className(“flex h-10 …”) → 错误：只允许单类名；
• ❌ By.cssSelector(“flex h-10 …”) → 错误：这不是合法 CSS 选择器；
• ✅ By.cssSelector(“div.flex.h-10.w-10…”) → 正确：. 表示“具有该类”，连续写表示“同时具有”；
• ✅ By.xpath(“//*[contains(@class, ‘flex h-10 …’)]”) → 正确：基于 class 属性值的模糊匹配；
• ? 建议优先使用 CSS 选择器（执行快、语法简洁），并在类名过长或动态时，转向结构化定位（如父子关系 + 文本内容）以增强脚本鲁棒性。