Selenium定位class包含空格的元素-復合class節點

在HTML中, 節點有三種常見屬性, 分別是id, name和class, 其中class是一個特殊的屬性, 支持多個類名, 以空格隔開, 如下圖所示:

你是否注意到, 為什么selenium中的find_element_by_class_name, 是by_class_name而不是, by_class呢?
首先我們要區分class屬性和class_name的區別, 節點的class屬性可以包含多個class_name, 每個以空格隔開, 如上圖, 該按鈕實際上是一個鏈接, class屬性值為"btn btn-primary my-2", 其中包含三個class_name, 分別為"btn", "btn-primary", "my-2", 通過在開發者工具中按Ctrl+F搜索,我們可以發現"btn-primary"這個class_name是唯一的. 我們可以使用它來定位.

定位方式有3種:

• 通過某個獨特的class_name定位: dr.find_element_by_class_name('btn-primary')
• 使用xpath通過完整的class屬性定位: dr.find_element_by_xpath('//a[@class="btn btn-primary my-2"]')
• 使用css selector, 通過某個屬性或屬性組合定位(推薦):
  dr.find_element_by_css_selector('.btn-primary') 或 dr.find_element_by_css_selector('.btn-primary.my-2')

示例代碼如下:

from selenium import webdriver

dr = webdriver.Chrome()
dr.get('http://qaschool.cn/')

# dr.find_element_by_class_name('btn-primary').click()  # 通過某個class_name定位
# dr.find_element_by_xpath('//a[@class="btn btn-primary my-2"]').click()  # 通過xpath結合完整的class屬性定位

# dr.find_element_by_css_selector('.btn-primary').click()  # 通過css selector結合某個class_name定位
dr.find_element_by_css_selector('.btn-primary.my-2').click()  # 通過css selector結合多個class_name定位