前言
对于使用Selenium来做Web自动化的人来说,元素定位是最基本也是最重要的部分了。只有定位到元素,才有对于元素的一系列操作。Selenium对页面元素的定位有两种方式:CSS Selector和XPath。本篇分享涉及如何在Selenium里面定位元素,并且奉上关于CSS Selector和XPath的详细解读。
CSS Selector与XPATH的区别
- XPATH 相对于CSS Selector在定位元素方面功能更强大,更具有灵活性,对于以下页面元素:
<h1>Welcome to My Homepage</h1>
CSS Selector “h1” 和XPATH"//*[contains(text(), ‘Welcome’)]"都可以定位到, 如果页面变了h1->h2,CSS Selector此时就定位不到这个元素了,但是XPATH仍然可以定位到。
- CSS Selector在性能方面要比XPATH好
- 并不是所有的浏览器都对XPATH提供原生支持引擎,比如说IE就没有XPATH引擎,Selenium在驱动IE是会插入自己的引擎以便与Selenium兼容
- CSS Selector在可读性方面要比XPATH好
- CSS Selector只能向前遍历,而XPATH既可以向前也可以向后遍历
元素定位实践
有以下页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p>My name is Donald <span id="Lastname">Duck.</span></p>
<p id="my-Address">I live in Duckburg</p>
<p>I have many friends:</p>
</div>
<ul id="Listfriends>
<li>Goofy</li>
<li>Mickey</li>
<li>Daisy</li>
<li>Pluto</li>
</ul>
<p class="myquote">All my friends are great!<br>
But I really like Daisy!!</p>
<p lang="it" title="Hello beautiful">Ciao bella</p>
<h3>We are all animals!</h3>
<p><b>My latest discoveries have led me to believe that we are all animals:</b></p>
<div class="helpTable" style="width:220px;">
<span class="markup"><table></span>
<ul style="display:none;"></ul>
<table cellpadding="2" cellspacing="2">
<tbody><tr>
<th style="background-color:#f1f1f1;">Name</th>
<th style="background-color:#f1f1f1;">Type of Animal</th>
</tr>
<tr>
<td style="background-color:#f1f1f1;">Mickey</td>
<td style="background-color:#f1f1f1;">Mouse</td>
</tr>
<tr>
<td style="background-color:#f1f1f1;">Goofey</td>
<td style="background-color:#f1f1f1;">Dog</td>
</tr>
<tr>
<td style="background-color:#f1f1f1;">Daisy</td>
<td style="background-color:#f1f1f1;">Duck</td>
</tr>
<tr>
<td style="background-color:#f1f1f1;">Pluto</td>
<td style="background-color:#f1f1f1;">Dog</td>
</tr>
</tbody></table>
<span class="markup"></table></span>
</div>
<div class="noSel newsletter" style="background-color:#99D6FF;border:1px solid #0099FF;padding:10px;">
<form>
<h4>Subscribe to my newsletter:</h4>
<div style="overflow:auto;">
<div style="width:100px;float:left;">Name:</div><div style="width:180px;float:left;"><input type="text" style="width:150px" class="markup"></div>
</div>
<div style="overflow:auto;">
<div style="width:100px;float:left;">E-mail:</div><div style="width:180px;float:left;"><input type="email" style="width:150px" class="markup" onchange="changeEmail(this)"></div>
</div>
<div class="noSel" style="margin-top:10px;">
Female: <input name="rr" type="radio" id="rr1" checked="checked" style="outline:2px solid transparent">
Male: <input name="rr" type="radio" id="rr2" style="outline:2px solid transparent">
Other: <input name="rr" type="radio" id="rr3" disabled="disabled" style="outline:2px solid transparent">
</div>
<h4>Newscategories:</h4>
<div style="overflow:auto;">
<div style="width:60px;float:left;">Ducks:</div><div style="width:20px;float:left;"><input id="cc1" type="checkbox" checked="checked" style="outline:2px solid transparent"></div>
</div>
<div style="overflow:auto;">
<div style="width:60px;float:left;">Dogs:</div><div style="width:20px;float:left;"><input id="cc2" type="checkbox" style="outline:2px solid transparent"></div>
</div>
<div style="overflow:auto;">
<div style="width:60px;float:left;">Humans:</div><div style="width:20px;float:left;"><input id="cc3" type="checkbox" style="outline:2px solid transparent"></div>
</div>
<div class="noSel" style="clear:both;"></div>
<p class="noSel">Your lucky number (between 1 and 10): <input type="number" min="1" max="10" value="7" onchange="changeLuckyNumber(this)"></p>
</form>
</div>
</body>
</html>
- 定位id为“my Address”的p元素
<p id="my-Address">I live in Duckburg</p>
- XPATH://p[@id=‘my-Address’]
- CSS Selector: #my-Address