定位方式的優先級
- 優先級最高：ID
- 優先級其次：name
- 優先級再次：CSS selector
- 優先級再次：Xpath
針對css selector和xpath的優先級做一個簡單的說明
在項目中我們可能用的最多的是css或者xpath，那么針對這兩種，我們優先選擇css，原因在哪些？
- 原因1：css是配合html來工作，它實現的原理是匹配對象的原理，而xpath是配合xml工作的，它實現的原理是遍歷的原理，所以兩者在設計上，css性能更優秀
- 原因2：語言簡潔，明了，相對xpath
- 原因3：前段開發主要是使用css，不使用xpath，所以在技術上面，我們可以獲得幫助的機會非常多
定位元素的注意事項（划重點）
- 找到待定位元素的唯一屬性
- 如果該元素沒有唯一屬性，則先找到能被唯一定位到的父元素/子元素/相鄰元素，再使用“>”," ","+"等進行輔助定位。
- 不要使用隨機唯一屬性定位
- 最重要的是多跟研發溝通，盡量把關鍵元素加上ID或者name，並減少不合理的頁面元素，例如重復ID這樣的事情最好不要發生。
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明:
我們做 web 自動化測試，只需關注選擇器部分，幫我們找到元素
id 選擇器
id 選擇器可以選中具有特定 id 的 HTML 元素
CSS 中 id 選擇器以 "#" 來定義。
以下的樣式規則應用於元素屬性 id="para1":
#para1{text-align:center; color:red; }
class 選擇器
class 選擇器可以選中具有特定 class 屬性的 HTML 元素
在 CSS 中，class 選擇器以 "."號來定義
在以下的例子中，所有擁有 class 屬性為 center 的 HTML 元素均為居中
.center{text-align:center;}
標簽選擇器
標簽選擇器可以選中同類型的 html 標簽元素
在以下的例子中，將所有的 p 標簽設置為紅色
p.{color:red;}
另外，你可以將標簽選擇器與屬性選擇器結合起來使用
以下，會將所有 class 屬性為 re 的元素變成紅色
p.re{color:red;}
分組選擇器
分組選擇器可以選中一組 HTML 元素
在 css 中，分組選擇器以 “,” 來定義
以下實例，會將所有的 h1 標簽、h2 標簽、p 標簽的內容變成紅色
h1,h2,p{color:green; }
屬性選擇器
屬性選擇器選擇具有特定屬性的 HTML 元素
以下實例將所有包含 title 屬性的元素變為藍色
[title]{color:blue; }
你也可以為屬性指定值
以下實例將所有 title 屬性為 wa 的元素變為藍色
[title=“wa”]
{color:blue; }
你也可以為元素指定標簽
以下實例將所有title 屬性為 wa 的 p 標簽變為藍色
p[title=“wa”]
{color:blue; }
我們還支持匹配單詞邊界
以下實例將所有 title 屬性包含單詞 hello 的標簽變為藍色
p[title~=“hello”]
{color:blue; }
組合選擇符
在 CSS3 中包含了四種組合方式:
- 后代選擇器(以空格分隔)
- 子元素選擇器(以大於號分隔）
- 相鄰兄弟選擇器（以加號分隔）
- 后續兄弟選擇器（以小波浪號分隔）
后代選擇器
后代選擇器用於選取某元素的后代元素，無論層級有多深
以下實例將 <div> 元素中所有的 p 元素背景修改為黃色:
divp{background-color:yellow; }
子元素選擇器
與后代選擇器相比，子元素選擇器只能選擇其父元素的直接子元素
以下實例選擇了<div>元素中所有直接子元素 <p> ：
div>p{background-color:yellow; }
相鄰兄弟選擇器
相鄰兄弟選擇器可選擇緊接在另一元素后的元素，且二者有相同父元素
以下實例選取了所有位於 <div> 元素后的第一個 <p> 元素:
div+p{background-color:yellow; }
后續兄弟選擇器
后續兄弟選擇器選取所有指定元素之后的相鄰兄弟元素。
以下實例選取了所有 <div> 元素之后的所有相鄰兄弟元素 <p> :
div~p{background-color:yellow; }
偽類
nth-child(n) 匹配屬於其父元素的第 N 個子元素
nth-last-child(n)，如字面意思：倒數第幾個標簽
nth-of-type(n)，第 N 個指定類型的標簽
first-child,第一個標簽
last-child,最后一個標簽