します。https://www.cnblogs.com/sylvia-liu/p/4469597.htmlから転載この記事
記事のディレクトリ
特にIEで文書セレンの要素を検索するというのXPathよりも強くお勧めCSSロケータの公式サイト、CSSロケータため、より高速のXPathロケータ速度よりも、以下の(IEが独自ないのXPathパーサ(構文解析)を行います)彼は、XPathよりも効率的ですわずかな欠陥が直接のXPathないときに、より正確に簡単に書くために、ページのテキストに基づいている軟膏で飛びます。
フロントエンドの開発者は関係なく、その要素の位置を複雑な方法を、CSSセレクタの設定ページにスタイルのすべての要素を使用することであるため、彼らは、我々は確かにページ要素にCSSセレクタの非常に正確な位置決めを使用することができますに移動することができます。
CssSelector共通ポジショニング
1.はtagNameによると、
driver.findElement(By.cssSelector("input")
ID
driver.findElement(By.cssSelector("input#username"));html标签和#id
driver.findElement(By.cssSelector("#username"));只是#id
クラス名
单一class:driver.findElement(By.cssSelector(".username"));.class
复合class:driver.findElement(By.cssSelector(".username.**.***"));.classA.classB
要素のプロパティ
1.正確なマッチ:
[A] driver.findElement(By.cssSelector("input[name=username]"));属性名=属性值,id,class,等都可写成这种形式
[B] driver.findElement(By.cssSelector("img[alt]"));存在属性。例如img元素存在alt属性
[C] driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));多属性
2. :(あいまい一致、正規表現のマッチング属性)
[A] ^= driver.findElement(By.cssSelector(Input[id ^='ctrl']));匹配到id头部 如ctrl_12
[B] $= driver.findElement(By.cssSelector(Input[id $='ctrl']));匹配到id尾部 如a_ctrl
[C] *= driver.findElement(By.cssSelector(Input[id *= 'ctrl']));匹配到id中间如1_ctrl_12
原則からより多くの定期的な照合チェックCSS3セレクタ-属性セレクタ
5.クエリのサブ要素
<form id="form" class="fm" name="f">
<span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap">
<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd">
</span>
<span id="s_btn_wr" class="btn_wr s_btn_wr bg">
<input id="su" class="btn self-btn bg s_btn" type="submit" value="百度一下">
</span>
</form>
上記のコードは次のように説明するための例として、入力HTML Baiduのホームページの検索ボックスとボタン、次のとおりです。
- 子要素A> B
WebElement input= driver.findElement(By.cssSelector("form>span>input"));//搜索输入框
- 空間Bの子孫要素
WebElement input= driver.findElement(By.cssSelector("form input"));//搜索输入框
- 最初の子孫要素:第一子
WebElement span= driver.findElemet(By.cssSelector("form :first-child"));//冒号前有空格,定位到form下所有级别的第一个子元素
可定位到三个元素:<span id="s_kw_wrap".../> <input id="kw"..../> <input id="su"........./>
WebElement span= driver.findElemet(By.cssSelector("form input:first-child"));//冒号前无空格,定位到form下所有级别的第一个input元素
可定位到两个元素:<input id="kw"..../> <input id="su"........./>
WebElement span= driver.findElemet(By.cssSelector("form>span:first-child"));//冒号前无空格,定位到form直接子元素中的第一个span元素
可定位到一个元素:<span id="s_kw_wrap".../>
4)最後の子要素:最後の子[似:最初の子]
WebElement userName = driver.findEleme(By.cssSelector("form :last-child"));//冒号前有空格,定位到form下所有级别的第一个子元素
5)第2のサブ要素:n番目の子(N)同様の第一子]
WebElement userName = driver.findElemet(By.cssSelector("form#form :nth-child(2)"));//冒号前有空格,定位到form下所有级别的第二个子元素
6.クエリの兄弟
driver.findElement(By.cssSelector("form#form span+span")); 定位到a 再定位到和它相邻的b
:Cssselectorの深さの研究では、以下のアドレスでアクセスすることができhttp://www.w3.org/TR/css3-selectors/