一、以下截圖為用FireBug定位的用火狐(Firefox)瀏覽器打開的百度首頁,下面所講述的八種定位方法,就是以該截圖中的百度輸入框為例子。
①、FireBug是Firefox瀏覽器下的開發類插件,通過該插件可以查看HTML、CSS、Javascript控制台、網絡狀況監視器、Cookies,具體內容如下面截圖中的工具欄。
通過它可以方便的查看頁面上的元素,根據元素路徑或是標簽或是屬性進行定位。
FireBug安裝方式:Firefox瀏覽器的菜單欄中選中tools(工具)-->add-ons Manager(添加組件),搜索FireBug;進行安裝重啟,然后在工具欄中看到Firebug的按鈕。
②、FirePath是FireBug插件擴展的一個工具,用來編輯、檢查和生成的XPath表達式、CSS選擇器。通過XPath和CSS可快速定位頁面上的元素。如下圖所示:
二、首先,我們一起來分析一下 下面的這幾行代碼
<input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd">
①其標簽(tag)名為input;
②里面有多個屬性,包括id、class、name、value
<a class="mnav" href="http://news.baidu.com">新聞</a>
③標簽對<a></a>之間有文本(text)數據
三、WebDriver的八種元素定位方法:
1、通過id屬性定位百度的輸入框 find_element_by_id("kw")
id在HTML文檔中必須是唯一的,可以想象成學生在學校的學號,公民的身份證號。
2、通過name屬性定位百度的輸入框 find_element_by_name("wd")
3、通過class屬性定位百度的輸入框 find_element_by_class("s_ipt")
4、通過tag屬性定位 find_element_by_tag_name("input")
5、通過link定位(既通過標簽對之間的文本信息進行定位) find_element_by_link_text("新聞")
6、通過partial link定位,它是對link定位的一種補充
例,代碼如下:<a class="mnav" href="http://news.baidu.com">這是今天的當日新聞</a>
find_element_by_link_text("當日新聞")
7、通過XPath定位
①絕對路徑定位(很不推薦該種定位方法,若頁面樣式稍微有點變化,元素就很容易找不到)
通過該種方法定位百度輸入框 find_element_by_xpath(“/html/body/div/div/div/div/div/form/span/input”)
②通過標簽(tag)名字和元素屬性值定位
定位百度輸入框 find_element_by_xpath(“//input[@id='kw']”) 或是 find_element_by_xpath("//*[id='kw']")
8、CSS定位
①通過class屬性來定位百度輸入框 find_element_by_css_selector(".s_ipt") 注:"."表示class屬性
②通過id屬性來定位百度輸入框 find_element_by_css_selector("#kw") 注:"#"表示id屬性
③通過標簽名(tag)來定位 find_element_by_css_selector("input") 注:用標簽名(tag)定位元素不需要任何符號標識
標簽名重復的概率很大,通過該種方式很難直接找到想要的元素
④通過父子關系定位 父親元素的標簽名為form,查找它的所有標簽名為input的子元素:
find_element_by_css_selector("form>input") 注:">"代表父子關系
⑤通過屬性定位 find_element_by_css_selector("[type='submit']")
⑥通過組合定位 定位百度輸入框 find_element_by_css_selector("form.fm>span>input.s_ipt")
或是find_element_by_css_selector("form#form>span>input#kw")
若文中內容有誤,希望大家指正,謝謝。