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&amp;authuser=0&amp;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&amp;utm_source=google-&amp=referral&amp;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&amp;authuser=0&amp;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 官方文档 ，