如何在Selenium中查找正确class name完成页面元素定位？

问题1：报错信息中selector开头的点号来源 #

Selenium的find_element_by_class_name方法底层默认会将传入的参数转换为CSS类选择器，CSS类选择器的语法规则就是在类名前拼接.表示匹配对应类的元素。
你传入了带空格的flex flex-column，方法会直接在整个传入字符串前拼接.，最终生成错误的选择器.flex flex-column，该选择器的语义是「查找class为flex的元素下的<flex-column>标签」，自然无法匹配到目标元素。

问题2：正确类名的确认方式 #

元素的class属性中，空格分隔的每一段都是独立的单个类名，比如class="flex flex-column"对应两个独立类名flex和flex-column，使用find_element_by_class_name方法时只能传入单个独立类名。
你可以用Firefox审查工具的控制台提前验证类名有效性：

• 输入document.getElementsByClassName('目标类名')，查看返回的元素列表是否符合预期
• 输入document.querySelectorAll('.类名1.类名2')可以验证多类名组合的匹配结果

问题3：多类名元素的定位方法 #

有两种常用的稳定定位方案：

方案1：CSS选择器定位（推荐） #

将需要匹配的多个类名前都加.，直接拼接即可，不需要写全所有类名，挑几个辨识度高、不会重复的类名组合即可，比如你给出的span元素可以这么写：

from selenium.webdriver.common.by import By
# 仅挑两个唯一类名组合即可
element = browser.find_element(By.CSS_SELECTOR, '.marker-wrapper.bg-gray-6')
# 如果需要全匹配所有类名，注意带冒号的类名要加反斜杠转义
element = browser.find_element(By.CSS_SELECTOR, '.absolute.w-20.h-20.rounded.flex.justify-center.items-center.transition.marker-wrapper.border.border-gray-3.group-hover\:border-primary-4.bg-gray-6')

方案2：XPath精确匹配 #

如果你确定元素的整个class属性内容不会发生变化，可以直接精确匹配整个class属性：

from selenium.webdriver.common.by import By
element = browser.find_element(By.XPATH, '//span[@class="absolute w-20 h-20 rounded flex justify-center items-center transition marker-wrapper border border-gray-3 group-hover:border-primary-4 bg-gray-6"]')

注意：Selenium 4及以上版本已经废弃了find_element_by_class_name这类写法，推荐统一使用By类指定定位方式的写法，兼容性更好。

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