selenium 定位元素 8 大方法
准确的定位元素是实现 web 自动化的一个关键, 下面简单介绍定位元素的 8 大方法 (id, name, linktext, partiallinktext, classname , tagname, Xpath, css selector)以及使用过程中遇到的一些问题
首先定义一个 driver = webdriver.Chrome("webdriver/chromedriver.exe"),後面舉例中會需要用到, 其他環境準備請看
用 ID 定位
当查找的元素的 id 属性是唯一的时,可以使用 id 定位,但不建议用动态 id (就是 id 中带有数字的,这种 id 不固定常常会变化, 如果不介意常换也是可以的)
例如: <input type="text" class="x-form-text x-form" id="login_username" name="username" maxlength="256" aria-label="使用者帳號">
这个 input 标签可以用 ID 定位
elem_user = driver.find_element_by_id('login_username')
用 Name 定位
当元素的 name 属性是唯一的时,可以使用 name 定位
例如: 上面的 input 标签也可以用 name 定位
elem_user = driver.find_element_by_name('username')
用 LinkText 定位
用 linktext 可以定位 a 标签的页面元素 ,当页面上 a 标签的 linktext 唯一时,可以用 linktext 来定位
例如: Google 首页 Gmail 连接, 它是 a 标签且 linktext 在这个页面上是唯一的
<a class="gb_g" data-pid="23" href="https://mail.google.com/mail/?tab=rm&authuser=0&ogbl" target="_top">Gmail</a>
elem_gmail = driver.find_element_by_link_text('Gmail')
用 PartialLinkText 定位
PartiaLinkText 定位与 linktext是相似的,都是定位 a 标签的页面元素,唯一不同的时 partialLinktext 只取 a 标签中部分的 linktext
例如: https://www.google.com/ 页面上的 a 标签 “ Google 大全 ”, 这里的 Google 是该页面上唯一的 linktext,所以可以用 partialLinktext 来定位
<a href="https://about.google/?fg=1&utm_source=google-&=referral&utmam...QkNQCCAM" xpath="1">Google 大全</a>
elem_google = driver.find_element_by_partial_link_text('Google')
用 ClassName 定位
通过元素的 class name 来定位,可以定位到该页面上 class name 唯一的元素。
例如: <a class="gb_g" data-pid="23" href="https://mail.google.com/mail/?tab=rm&authuser=0&ogbl" target="_top">Gmail</a>
elem_gm = driver.find_element_by_class_name('gb_g')
用 TagName 定位
使用网页上的 tag name 来定位,如 div ,a ,li, input 等标签,通常一个网页上不太可能某种 tag 只有唯一一个,所以基本上此方法用不上。
ele = driver.find_element_by_tag_name('a')
当无法使用上述单一属性的定位方式定位元素时,可以考虑用下面两种多个属性组合出来的定位方式
用 CSS Selector 高级定位
一、 基本语法: tag[attribute = 'value'] , 当属性是 id 时可以用 ' # ' 代替 ,當屬性是 class 時可以用 ' . ' 代替
例如: <input type = " text " id= " search_id " class= " search-ct " >
a. 以 id 定位可以写 : input[id= " search_id "] OR #search_id OR input#search_id
b. 以 class 定位可以写: input[ class= " search-ct "] OR .search-ct OR input.search-ct
elem_input = driver.find_element_by_css_selector('input#search_id')
二、当一个元素有多层 class 时, 可用 .class1.class2.class3 来定位
例如:<button type="button" id="ext-gen322" aria-label="撰寫" class=" x-btn-text x-btn compose" aria-level="1" css="1">撰寫</button>
这个元素中的 class 有三个分别为 x-btn-text, x-btn, compose >> 按上面语法可以写成 .x-btn-text.x-btn.compose
elem_compose = driver.find_element_by_css_selector('.x-btn-text.x-btn.compose')
三、使用通配符 :‘ ^ ’ 表示以什么文本开头,' $ ' 表示以什么文本结尾, ' * ' 表示包含什么文本
例如:<button type="button" id="ext-gen322" aria-label="撰寫" class=" x-btn-text x-btn compose" aria-level="1" css="1">撰寫</button>
a. input[class^="x-btn-text"] >> 表示以 x-btn-text 开头的 class
b. input[class$="compose"] >> 表示以 compose 结尾的 class
c. input[class*="text"] >> 表示包含 text 的 class
elem_compose = driver.find_element_by_css_selector('button[class$=" compose"]')
四、定位子节点, 使用 tag > tag
section>nav>a, 可搭配上述一、二、三的方式一起使用,如: section>nav>a[title="即時"]
elem_title = driver.find_element_by_css_selector('section>nav>a[title="即時"]')
更多的 CSS Selector 语法请戳
用 Xpath 高级定位
一、 首先了解一下 " 绝对路径 " 和 " 相对路径 ":
a. 绝对路径 : 指从网页的首端 html 开始一层一层往下,直到遇到要找的元素,中间以单右斜线 “/ ” 隔开,不能跳级 , 例如: /html[1]/body[1]/div[11]/div[2]/div[3]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[1]/div[1]/div >> 通常这种方式都一定能找到唯一的元素,但找到的元素路径都很长很长,但不太建议用这种方式
b. 相對路徑: 指從某個元素開始,以雙右斜線 " // " 開头, 搭配 xpath 語法來實現查找唯一的元素,例如: //div[@id='navbar']/div[1]
二、常用語法:
假设有这样一个元素 :<button type="button" id="ext-gen354" aria-label="撰寫" class=" x-btn-text compose" aria-level="1" xpath="1">撰寫</button>
a. 用基本语法 //tag[@attribute='value'] 定位上述元素为 //button[@class=" x-btn-text compose"]
b. 用 text 文本定位語法 //tag[text()='value'] 定位上述元素為 //button[text()="撰寫"]
c. 用 contains 关键字定位可以不用寫完整的屬性值,語法 //tag[contains(@attribute,'value')] 或 //tag[contains(text(),'value')] 定位上述元素可以是 //button[contains(@class,"compose")] 或 //button[contains(text(),"撰")]
elem_compose = driver.find_element_by_xpath('//button[contains(text(),"撰")]')
d. 用starts-with关键字去查找元素:
语法: //tag[starts-with(@attribute,‘value’)]
e. Parent 找到某元素的父標籤
语法: xpath-to-some-element//parent::<tag>
f. Preceding Sibling 找到元素的前一個標籤
语法: xpath-to-some-element//preceding-sibling::<tag>
g. Following Sibling 找到元素的下一個標籤
语法: xpath-to-some-element//following-sibling::<tag>
當然通常不能透過簡單的一個語法就能定位到唯一的元素,大多數時候都是需要多個組合才能準確的定位到唯一的元素, 這個時候就需要聯合" // " 或 " / "一起來完成
更多 xpath 語法請戳
定位元素集合
将上述 8 大方法中的 find_element 换成 find_elements, 定位多个元素,返回一个 list
当定位的元素在页面上不是唯一的时,可能会找到该页面上第一个符合的元素,也可能找不到元素会抛出异常.
常用的方法: id (最快) > xpath, css selector, 其他方法用的相对少;基本上 css selector 與 xpath 學會一種,基本上的元素就都能被唯一的定位到.
参考: selenium 官方文档 ,