<div class="container"> 
 <input class="nav1" id="li1" type="radio" name="nav"> 
 <input class="nav2" id="li2" type="radio" name="nav"> 
 <ul class='nav'> 
 <li class='active'><label for="li1">tab1</label></li> 
 <li><label for="li2">tab2</label></li> 
 </ul> 
 <div class="content"> 
 <div class="content1 default">tab1 內容:123456</div> 
 <div class="content2">tab2 內容:abcdefgkijkl</div> 
 </div> 
</div>

.container *{ 
 padding: 0; 
 margin: 0; 
} 
.container { 
 position: relative; 
 width: 400px; 
 margin: 50px auto; 
} 
.container input { 
 display: none; 
} 
.nav { 
 position: relative; 
 overflow: hidden; 
} 
.nav li { 
 width: 200px; 
 float: left; 
 text-align: center; 
 background: #ddd; 
 list-style: none; 
} 
.nav li label { 
 display: block; 
 width: 200px; 
 line-height: 36px; 
 font-size: 18px; 
 cursor: pointer; 
} 
.content { 
 position: relative; 
 overflow: hidden; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
 padding: 10px; 
} 
.content1, 
.content2 { 
 display: none; 
 width: 100%; 
 height: 100%; 
} 
.nav1:checked ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
.nav1:checked ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
.nav2:checked ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
.nav2:checked ~ .nav li:last-child { 
 background: #ff7300; 
 color: #fff; 
} 
.nav1:checked ~ .content > div { 
 display: none; 
} 
.nav1:checked ~ .content > div:first-child { 
 display: block; 
} 
.nav2:checked ~ .content > div { 
 display: none; 
} 
.nav2:checked ~ .content > div:last-child { 
 display: block; 
} 
.nav li.active { 
 background: #ff7300; 
 color: #fff; 
} 
.content .default { 
 display: block; 
}

<div class="container"> 
 <div id="content1" class="active">tab 1內容:123456</div> 
 <div id="content2">tab 2內容:abcdefgkijkl</div> 
 
 <ul class='nav'> 
 <li class="active"><a href="#content1">tab1</a></li> 
 <li><a href="#content2">tab2</a></li> 
 </ul> 
 
 <div class="wrap"></div> 
</div>

.container *{ 
 padding: 0; 
 margin: 0; 
} 
.container { 
 position: relative; 
 width: 400px; 
 margin: 50px auto; 
} 
 
.nav { 
 position: relative; 
 overflow: hidden; 
} 
 
li { 
 width: 200px; 
 float: left; 
 text-align: center; 
 background: #ddd; 
 list-style: none; 
} 
 
li a { 
 display: block; 
 width: 200px; 
 line-height: 36px; 
 font-size: 18px; 
 cursor: pointer; 
 text-decoration: none; 
 color: #000; 
} 
 
#content1, 
#content2 { 
 position: absolute; 
 overflow: hidden; 
 top: 36px; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
 padding: 10px; 
} 
 
#content1, 
#content2 { 
 display: none; 
 width: 100%; 
 background: #fff; 
} 
 
#content1:target, 
#content2:target { 
 display: block; 
} 
 
#content1.active { 
 display: block; 
} 
 
.active ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
#content1:target ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
#content1:target ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
#content2:target ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
#content2:target ~ .nav li:last-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
.wrap { 
 position: absolute; 
 overflow: hidden; 
 top: 36px; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
}

<div class="container"> 
 <div class="nav-box"> 
 <button class="nav1">tab1</button> 
 <button class="nav2">tab2</button> 
 <div class="content-box"> 
 <div class="content1"> 
 content-1 
 </div> 
 <div class="content2"> 
 content-2 
 </div> 
 </div> 
 </div> 
</div>

.container { 
 width: 300px; 
 margin: 50px auto; 
 padding: 10px; 
 boder: 1px solid #ddd; 
} 
 
.nav-box { 
 font-size: 0; 
} 
 
button { 
 width: 150px; 
 height: 40px; 
 box-sizing: border-box; 
 outline: none; 
 background: #fff; 
 border: 1px solid #ddd; 
 font-size: 18px; 
 cursor: pointer; 
} 
 
button:focus-within { 
 color: #fff; 
 background: #ff7300; 
} 
 
.content-box { 
 font-size: 24px; 
 border: 1px solid #ddd; 
 height: 100px; 
} 
.content-box div { 
 display: none; 
} 
 
.nav-box:not(:focus-within) .nav1 { 
 color: #fff; 
 background: #ff7300; 
} 
.nav-box:not(:focus-within) .content1 { 
 display: block; 
} 
 
.nav1:focus-within ~ .content-box .content1 { 
 display: block; 
} 
 
.nav2:focus-within ~ .content-box .content2 { 
 display: block; 
}

var topBtn = document.getElementById('top');
// 獲取視窗高度
var winHeight = document.documentElement.clientHeight;
window.onscroll = function () {
    // 獲取頁面向上滾動距離，chrome瀏覽器識別document.body.scrollTop，而火狐識別document.documentElement.scrollTop，這里做了兼容處理
    var toTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 如果滾動超過一屏，返回頂部按鈕出現，反之隱藏
    if(toTop>=winHeight){
        topBtn.style.display = 'block';
    }else {
        topBtn.style.display = 'none';
    }
}
topBtn.onclick=function () {
    var timer = setInterval(function () {
        var toTop = document.documentElement.scrollTop || document.body.scrollTop;
        // 判斷是否到達頂部，到達頂部停止滾動，沒到達頂部繼續滾動
        if(toTop == 0){
            clearInterval(timer);
        }else {
            // 設置滾動速度
            var speed = Math.ceil(toTop/5);
            // 頁面向上滾動
            document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
        }
    },50);
}

一種：selenium導入瀏覽器驅動，用get方法打開瀏覽器，例如：

import time
from selenium import webdriver

def mac():
 # browser = webdriver.Chrome()
 # browser = webdriver.Firefox()
 browser = webdriver.Ie()
 browser.implicitly_wait(5)
 browser.get('http://www.baidu.com/')

第二種：通過導入python的標準庫webbrowser打開瀏覽器，例如：

import webbrowser

def mac():
 # web.open(‘http://www.baidu.com’,new=0,autoraise=True) # new:0/1/2 0：同一瀏覽器窗口打開 1：打開瀏覽器新的窗口，2：打開瀏覽器窗口新的tab; autoraise=True:窗口自動增長
 # web.open_new_tab(‘http://www.baidu.com’)
 web.open_new(‘http://www.baidu.com’)

第三種：使用Splinter模塊模塊

一、Splinter 的安裝
Splinter 的使用必修依靠 Cython、lxml、selenium 這三個軟件。所以，安裝前請提前安裝 Cython、lxml、selenium。

二、Splinter 的使用
這里，我給出自動登錄 126 郵箱的案例。難點是要找到頁面的賬戶、密碼、登錄的頁面元素，這里需要查看 126 郵箱登錄頁面的源碼，才能找到相關控件的 id.

例如: 輸入密碼，密碼的文本控件 id 是 pwdInput. 可以使用browser.find_by_id() 方法定位到密碼的文本框，接著使用fill() 方法，填寫密碼。至于模擬點擊按鈕，也是要先找到按鈕控件的 id, 然后使用 click() 方法。

# coding=utf-8
import time 
from splinter import Browser

def splinter(url):
 browser = Browser()
 # login 126 email websize
 browser.visit(url)
 # wait web element loading
 time.sleep(5)
 # fill in account and password
 browser.find_by_id('idInput').fill('xxxxxx')
 browser.find_by_id('pwdInput').fill('xxxxx')
 # click the button of login
 browser.find_by_id('loginBtn').click()
 time.sleep(8)
 # close the window of brower
 browser.quit()
	
if __name__ == '__main__': 
 websize3 ='http://www.126.com' 
 splinter(websize3) 

WebDriver簡介

selenium 從 2.0 開始集成了 webdriver 的 API，提供了更簡單，更簡潔的編程接口。selenium webdriver 的目標是提供一個設計良好的面向對象的 API，提供了更好的支持進行 web-app 測試。

打開瀏覽器

在 selenium+python 自動化測試（一）–環境搭建中，運行了一個測試腳本，腳本內容如下：

from selenium import webdriver
import time

browser = webdriver.Chrome()
browser.get("http://www.baidu.com")
print(browser.title)
browser.find_element_by_id("kw").send_keys("selenium")
browser.find_element_by_id("su").click()
time.sleep(3)
browser.close() 

webdriver 是一個 Web 應用程序測試自動化工具，用來驗證程序是否如預期的那樣執行。

webdriver.Chrome()：創建一個 Chrome 瀏覽器的 webdriver 實例

browser.get(“http://www.baidu.com“)：打開”http://www.baidu.com”頁面

browser.find_element_by_id(“kw”).send_keys(“selenium”)：
找到 id 為“kw”的元素，在這個頁面上為百度首頁的搜索框，在其中輸入“selenium”

browser.find_element_by_id(“su”).click()：找到 id 為“su”的元素并點擊，在這個頁面上為百度首頁的“百度一下”按鈕

browser.close()：退出瀏覽器

運行腳本的第一步是打開瀏覽器，使用 webdriver.Chrome() 打開谷歌瀏覽器，如果要指定其他瀏覽器，比如要使用 Firefox 或者 IE 瀏覽器，更換瀏覽器名稱就可以了

browser = webdriver.Chrome() // 打開 Chrome 瀏覽器

browser = webdriver.Firefox() // 打開 Firefox 瀏覽器

browser = webdriver.Ie() // 打開 IE 瀏覽器

第二步操作是打開頁面，使用browser.get(url)方法來打開網頁鏈接，例如腳本中打開百度首頁

browser.get("http://www.baidu.com")

接下來是 **print(browser.title)**，使用browser.title獲取當前頁面的title，title就是在瀏覽器 tab 上顯示的內容，例如百度首頁的標題是“百度一下，你就知道”

瀏覽器前進后退

在當前頁面打開一個新的鏈接后，如果想回退到前一個頁面，使用如下browser.back()，相當于點擊了瀏覽器的后退按鈕

和 back 操作對應的是瀏覽器前進操作browser.forward()，相當于點擊了瀏覽器的前進按鈕

browser.back() // 回到上一個頁面

browser.forward() // 切換到下一個頁面

瀏覽器運行后，如果頁面沒有最大化，可以調用browser.maximize_window()將瀏覽器最大化，相當于點擊了頁面右上角的最大化按鈕

browser.maximize_window() // 瀏覽器窗口最大化

browser.set_window_size(800, 720) // 設置窗口大小為 800*720

瀏覽器截屏操作，參數是截屏的圖片保存路徑：

browser.get_screenshot_as_file("D:/data/test.png") 屏幕截圖保存為***

browser.refresh() // 重新加載頁面, 頁面刷新

在測試腳本運行完后，一般會在最后關閉瀏覽器，有兩種方法關閉瀏覽器，close()方法用于關閉當前頁面，quit()方法關閉所有和當前測試有關的瀏覽器窗口

browser.close() // 關閉當前頁面

browser.quit() // 關閉所有由當前測試腳本打開的頁面

<h1 class="csdn_top" line-height:38px;color:#2c3033;padding:0px="" 29px;white-space:normal;"="" style="word-wrap: break-word; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; margin-top: 0px; margin-bottom: 0px; font-size: 24px;"> 頁面元素定位

要定位頁面元素，需要找到頁面的源碼。

IE 瀏覽器中，打開頁面后，在頁面上點擊鼠標右鍵，會有“查看源代碼”的選項，點擊后就會進入頁面源碼頁面，在這里就可以找到頁面的所有元素

使用 Chrome 瀏覽器打開頁面后，在瀏覽器的地址欄右側有一個圖標，點擊這個圖標后，會出現許多菜單項，選擇更多工具里的開發者工具，就會出現頁面的源碼，不同版本的瀏覽器菜單選項可能不同，但是都會在開發者工具里找到頁面的源碼

Firefox 瀏覽器打開頁面后，在右鍵菜單里也可以找到“查看頁面源代碼”的選項。在 Firefox 中，可以使用瀏覽器自帶的插件查看定位元素，在 Firefox 的附加組件里搜索 firebug 進行下載，安裝 firebug 組件后會在瀏覽器的工具欄中多出一個小蟲子的圖標，點擊這個圖標就可以打開組件查看頁面源碼，打開后如下圖所示

以百度首頁搜索頁面為例，看一下 webdriver 定位元素的八種方式

使用id定位

在頁面源碼中找到搜索輸入框的元素定義

可以看到輸入框有一個有一個 id 的屬性，調用find_element_by_id()根據 id 屬性來找到元素，參數為屬性的值

input_search = browser.find_element_by_id("kw")

使用name定位

使用find_element_by_name()根據 name 屬性找到元素，參數為 name 屬性的值

搜索框有一個 name=”wd”的屬性，使用 name 查找搜索輸入框元素

input_search = browser.find_element_by_name("wd")

使用className定位

使用find_element_by_class_name()根據 className 屬性找到元素，參數為 className 屬性的值

搜索框有一個 class=”s_ipt”的屬性，使用 className 查找元素

input_search = browser.find_element_by_class_name("s_ipt")

使用tagName定位

使用find_element_by_tag_name()根據 tagName 屬性找到元素，參數為元素標簽的名稱

每個頁面的元素都有一個 tag，搜索框的標簽為 input，有時候一個頁面里有許多相同的標簽，所以用這種方法找到的元素一般都不準確，除非這個元素使用的標簽在這個頁面里是唯一的。一般不會使用這種方式來定位元素

input_search = browser.find_element_by_class_name("input")

使用link_text定位

頁面上都會有一些文本鏈接，點擊鏈接后會打開一個新的頁面，這些可以點擊的鏈接可以使用find_element_by_link_text來定位，百度首頁上方有如下幾個元素

例如要定位“新聞”，找到元素的代碼，有一個 href 的屬性，這是點擊后打開的頁面

新聞

使用 link_text 查找元素，參數為元素的文本信息

news = browser.find_element_by_link_text("新聞")

使用partial_link_text定位

這種方式類似于 link_text 的定位方式，如果一個元素的文本過長，不需要使用文本的所有信息，可以使用其中的部分文本就可以定位

使用 partial_link_text 查找百度首頁的“新聞”元素，參數為文本信息，可以使用全部的文本，也可以使用部分文本

news = browser.find_element_by_link_text("新聞") // 使用全部文本

news = browser.find_element_by_link_text("新") // 使用部分文本

使用css selector定位

使用 css 屬性定位元素有多種方法，可以使用元素的 id、name、className，也可以使用元素的其他屬性，如果一個元素沒有上述的幾種屬性或者定位不到時，可以使用 css 來定位

還是使用百度搜索框的實例來說明 css 定位的用法

css使用元素的id定位

css 屬性使用 id 定位時，使用 #號表示元素的 id

input_search = browser.find_element_by_css_selector("#kw") // 使用元素的 id 定位

css使用元素的class定位

css 屬性使用 class 定位時，使用. 號表示元素的 class

input_search = browser.find_element_by_css_selector(".s_ipt") // 使用元素的 class 定位

css使用元素的tag定位

css 屬性使用 tagName 定位時，直接使用元素的標簽

input_search = browser.find_element_by_css_selector("input") // 使用元素的 tagName 定位

css 使用元素的其他屬性

除了上述 3 種屬性，css 屬性可以使用元素的其他屬性定位，格式如下

input_search = browser.find_element_by_css_selector("[maxlength='255']")

使用元素的maxlength屬性定位

input_search = browser.find_element_by_css_selector("[autocomplete='off']")

使用元素的autocomplete屬性定位

可以在參數中加入元素的標簽名稱

input_search = browser.find_element_by_css_selector("input#kw") // 使用元素的 id 定位

input_search = browser.find_element_by_css_selector("input.s_ipt") // 使用元素的 class 定位

input_search = browser.find_element_by_css_selector("input[maxlength='255']") // 使用元素的 maxlength 屬性定位

input_search = browser.find_element_by_css_selector("input[autocomplete='off']") // 使用元素的 autocomplete 屬性定位

css 的層級定位

當一個元素使用自身的屬性不容易定位時，可以通過它的父元素來找到它，如果父元素也不好定位，可以再通過上元素來定位，以此類推，一直找到容易定位的父元素為止，通過層級定位到需要查找的元素

通過 Firefox 的 firebug 組件查看百度首頁的源碼

通過層級來定位搜索框

input_search = browser.find_element_by_css_selector("form#form>span:nth-child(1)>input")

input_search = browser.find_element_by_css_selector("form.fm>span:nth-child(1)>input")

搜索框的父元素為 span 標簽，span 的父元素為 form，form 有 id 和 class 屬性，可以通過這兩個屬性來定位，找到 form 元素后，form 下有多個 span 標簽，所以要使用 span:nth-child(1)，表示 form 下的第一個 span 標簽，這種用法很容易理解，表示第幾個孩子，最后是 span 下的 input 標簽，span 下只有一個 input，所以就可以定位到搜索框

css邏輯運算

用一個屬性來定位元素時，如果有其他元素的屬性和此元素重復，可以組合多個屬性來功共同定位

組合多個屬性定位元素定位百度搜索框

input_search = browser.find_element_by_css_selector("input[id='kw'][name='wd']")

在元素內定義的屬性，都可以使用 css 來定位，使用其他幾種方式無法定位到元素時，可以使用 css，夠強大！

使用xpath定位

XPath 是一種在 XML 文檔中定位元素的語言。因為 HTML 可以看做 XML 的一種實現，所以 selenium 用戶可是使用這種強大語言在 web 應用中定位元素。xpath 也可以通過元素的各種屬性定位到元素

使用元素屬性定位

input_search = browser.find_element_by_xpath("//*[@id='kw']") // 通過元素 id 查找元素

input_search = browser.find_element_by_xpath("//*[@name='wd']") // 通過元素 name 查找元素

input_search = browser.find_element_by_xpath("//*[@class='s_ipt']") // 通過元素 class 查找元素

input_search = browser.find_element_by_xpath("//*[@maxlength='255']") // 通過其他屬性查找元素

input_search = browser.find_element_by_xpath("//*[@autocomplete='off']") // 通過其他屬性查找元素

前面的 * 號表示查找所有的標簽元素，可以替換為標簽名稱，更準確的定位元素

input_search = browser.find_element_by_xpath("//input[@id='kw']") // 通過元素 id 查找元素

input_search = browser.find_element_by_xpath("//input[@name='wd']") // 通過元素 name 查找元素

input_search = browser.find_element_by_xpath("//input[@class='s_ipt']") // 通過元素 class 查找元素

input_search = browser.find_element_by_xpath("//input[@maxlength='255']") // 通過其他屬性查找元素

input_search = browser.find_element_by_xpath("//input[@autocomplete='off']") // 通過其他屬性查找元素

xpath也可以通過層級來定位，定位方式

input_search = browser.find_element_by_xpath("//input[@id='form']//span[1]//input")

browser.find_element_by_xpath("//input[@class='fm']//span[1]//input")查找效果和通過 css 的層級定位是相同的，意思是 form 元素下面的第一個 span 元素的 input 標簽子元素xpath的邏輯元素通過and運算符來組合元素屬性

input_search = browser.find_element_by_xpath("//input[@id='kw' and name='wd']")

屬性匹配
xpath 中還有一種更強大的定位方式，通過模糊匹配元素的屬性

news = browser.find_element_by_xpath("//a[contains(text(), '新聞')]")

查找text中包含"新聞"的元素

input_search = browser.find_element_by_xpath("//input[contains(@id, 'kw']")

查找id中包含"kw"的元素

input_search = browser.find_element_by_xpath("//input[starts-with(@id, 'k']")

查找id以"k"開頭的元素

input_search = browser.find_element_by_xpath("//input[ends-with(@id, 'w']")

查找id以"w"結尾的元素

input_search = browser.find_element_by_xpath("//input[matchs(@id, 'k*']")

利用正則表達式查找元素

上面介紹了查找頁面元素的八種方法，通過這些方式找到的都是單個元素，如果需要批量查找元素，還有和上面方式對應的八種復數形式

find_elements_by_id

find_elements_by_name

find_elements_by_class_name

find_elements_by_tag_name

find_elements_by_link_text

find_elements_by_partial_link_text

find_elements_by_css_selector

find_elements_by_xpath

這8種方法查找到的是一組元素，返回的是list，可以通過索引來操作元素

例如頁面上的復選框和單選框，或者頁面上有多個屬相相同的輸入框，這些屬性相同的一組元素，可以批量獲取，然后過濾出需要操作的元素，選擇其中的一個或者多個進行操作

通過百度首頁搜索“selenium”關鍵字，會出現許多搜索結果，這些搜索結果具有相同的屬性，不同的是屬性的值不同，定位這些元素時，可以使用批量定位的方法

看下面的代碼

這是搜索 selenium 關鍵字后的頁面結果，每一個搜索結果都是可點擊的鏈接，定位這些元素的方法：

search_results = browser.find_elements_by_css_selector("h.t>a")

search_results[3].click() // 通過索引點擊第 4 條搜索結果

第二個例子

checkbox
checkbox1
checkbox2
checkbox3

這個頁面上有 3 個復選框，打開后如下圖所示：

操作復選框

// 查找所有的復選框并點擊
checkboxs = browser.find_element_by_xpath('input[@type="checkbox"]')

返回一個 list

for checkbox in checkboxs:
checkbox.click()
// 點擊最后一個復選框

checkboxs[2].click()

from selenium import webdriver

browser=webdriver.Firefox()

browser.get(r’http://www.baidu.com/’)

print(‘browser attributes:’)

print(dir(browser))

elem=browser.find_element_by_id(‘kw’)

print(‘WebElement attributes:’)

print(dir(elem))

瀏覽器屬性：

driver attributes:

[‘NATIVE_EVENTS_ALLOWED’, ‘class’, ‘delattr’, ‘dict’, ‘doc’, ‘format’, ‘getattribute’, ‘hash’, ‘init’, ‘module’, ‘new’, ‘reduce’, ‘reduce_ex’, ‘repr’, ‘setattr’, ‘sizeof’, ‘str’, ‘subclasshook’, ‘weakref’, ‘_file_detector’, ‘_is_remote’, ‘_mobile’, ‘_switch_to’, ‘_unwrap_value’, ‘_wrap_value’, ‘add_cookie’, ‘application_cache’, ‘back’, ‘binary’, ‘capabilities’, ‘close’, ‘command_executor’, ‘create_web_element’, ‘current_url’, ‘current_window_handle’, ‘delete_all_cookies’, ‘delete_cookie’, ‘desired_capabilities’, ‘error_handler’, ‘execute’, ‘execute_async_script’, ‘execute_script’, ‘file_detector’, ‘find_element’, ‘find_element_by_class_name’, ‘find_element_by_css_selector’, ‘find_element_by_id’, ‘find_element_by_link_text’, ‘find_element_by_name’, ‘find_element_by_partial_link_text’, ‘find_element_by_tag_name’, ‘find_element_by_xpath’, ‘find_elements’, ‘find_elements_by_class_name’, ‘find_elements_by_css_selector’, ‘find_elements_by_id’, ‘find_elements_by_link_text’, ‘find_elements_by_name’, ‘find_elements_by_partial_link_text’, ‘find_elements_by_tag_name’, ‘find_elements_by_xpath’, ‘firefox_profile’, ‘forward’, ‘get’, ‘get_cookie’, ‘get_cookies’, ‘get_log’, ‘get_screenshot_as_base64’, ‘get_screenshot_as_file’, ‘get_screenshot_as_png’, ‘get_window_position’, ‘get_window_size’, ‘implicitly_wait’, ‘log_types’, ‘maximize_window’, ‘mobile’, ‘name’, ‘orientation’, ‘page_source’, ‘profile’, ‘quit’, ‘refresh’, ‘save_screenshot’, ‘session_id’, ‘set_page_load_timeout’, ‘set_script_timeout’, ‘set_window_position’, ‘set_window_size’, ‘start_client’, ‘start_session’, ‘stop_client’, ‘switch_to’, ‘switch_to_active_element’, ‘switch_to_alert’, ‘switch_to_default_content’, ‘switch_to_frame’, ‘switch_to_window’, ‘title’, ‘w3c’, ‘window_handles’]

調用說明：

driver. 屬性值

變量說明：
1.driver.current_url：用于獲得當前頁面的 URL

2.driver.title：用于獲取當前頁面的標題

3.driver.page_source: 用于獲取頁面 html 源代碼

4.driver.current_window_handle: 用于獲取當前窗口句柄

5.driver.window_handles: 用于獲取所有窗口句柄

函數說明：

1.driver.find_element*(): 定位元素，
2.driver.get(url): 瀏覽器加載 url。
實例：driver.get(“http//:www.baidu.com”)
3.driver.forward()：瀏覽器向前（點擊向前按鈕）。
4.driver.back()：瀏覽器向后（點擊向后按鈕）。
5.driver.refresh()：瀏覽器刷新（點擊刷新按鈕）。
6.driver.close()：關閉當前窗口，或最后打開的窗口。
7.driver.quit(): 關閉所有關聯窗口，并且安全關閉 session。

8.driver.maximize_window(): 最大化瀏覽器窗口。
9.driver.set_window_size(寬，高)：設置瀏覽器窗口大小。
10.driver.get_window_size()：獲取當前窗口的長和寬。
11.driver.get_window_position()：獲取當前窗口坐標。
12.driver.get_screenshot_as_file(filename): 截取當前窗口。

實例：driver.get_screenshot_as_file(‘D:/selenium/image/baidu.jpg’)

13.driver.implicitly_wait(秒)：隱式等待，通過一定的時長等待頁面上某一元素加載完成。
若提前定位到元素，則繼續執行。若超過時間未加載出，則拋出 NoSuchElementException 異常。

實例：driver.implicitly_wait(10) #等待 10 秒

14.driver.switch_to_frame(id 或 name 屬性值)：切換到新表單 (同一窗口)。若無 id 或屬性值，可先通過 xpath 定位到 iframe，再將值傳給 switch_to_frame()

15.driver.switch_to.parent_content(): 跳出當前一級表單。該方法默認對應于離它最近的 switch_to.frame() 方法。

16.driver.switch_to.default_content(): 跳回最外層的頁面。
17.driver.switch_to_window(窗口句柄)：切換到新窗口。
18.driver.switch_to.window(窗口句柄): 切換到新窗口。
19.driver.switch_to_alert(): 警告框處理。處理 JavaScript 所生成的 alert,confirm,prompt.

20.driver.switch_to.alert(): 警告框處理。
21.driver.execute_script(js): 調用 js。

22.driver.get_cookies(): 獲取當前會話所有 cookie 信息。

23.driver.get_cookie(cookie_name)：返回字典的 key 為“cookie_name”的 cookie 信息。

實例：driver.get_cookie(“NET_SessionId”)

24.driver.add_cookie(cookie_dict): 添加 cookie。“cookie_dict”指字典對象，必須有 name 和 value 值。
25.driver.delete_cookie(name,optionsString): 刪除 cookie 信息。

26.driver.delete_all_cookies(): 刪除所有 cookie 信息。

頁面元素屬性：

WebElement attributes:

[‘class’, ‘delattr’, ‘dict’, ‘doc’, ‘eq’, ‘format’, ‘getattribute’, ‘hash’, ‘init’, ‘module’, ‘ne’, ‘new’, ‘reduce’, ‘reduce_ex’, ‘repr’, ‘setattr’, ‘sizeof’, ‘str’, ‘subclasshook’, ‘weakref’, ‘_execute’, ‘_id’, ‘_parent’, ‘_upload’, ‘_w3c’, ‘clear’, ‘click’, ‘find_element’, ‘find_element_by_class_name’, ‘find_element_by_css_selector’, ‘find_element_by_id’, ‘find_element_by_link_text’, ‘find_element_by_name’, ‘find_element_by_partial_link_text’, ‘find_element_by_tag_name’, ‘find_element_by_xpath’, ‘find_elements’, ‘find_elements_by_class_name’, ‘find_elements_by_css_selector’, ‘find_elements_by_id’, ‘find_elements_by_link_text’, ‘find_elements_by_name’, ‘find_elements_by_partial_link_text’, ‘find_elements_by_tag_name’, ‘find_elements_by_xpath’, ‘get_attribute’, ‘id’, ‘is_displayed’, ‘is_enabled’, ‘is_selected’, ‘location’, ‘location_once_scrolled_into_view’, ‘parent’, ‘rect’, ‘screenshot’, ‘screenshot_as_base64’, ‘screenshot_as_png’, ‘send_keys’, ‘size’, ‘submit’, ‘tag_name’, ‘text’, ‘value_of_css_property’]

調用說明：
driver.find_element*. 屬性值
或
element=driver.find_element*
element. 屬性值

變量說明：
1.element.size: 獲取元素的尺寸。
2.element.text：獲取元素的文本。
3.element.tag_name: 獲取標簽名稱。

函數說明：
1.element.clear(): 清除文本。
2.element.send_keys(value): 輸入文字或鍵盤按鍵（需導入 Keys 模塊）。
3.element.click()：單擊元素。
4.element.get_attribute(name): 獲得屬性值
5.element.is_displayed(): 返回元素結果是否可見（True 或 False）
6.element.is_selected(): 返回元素結果是否被選中（True 或 False）
7.element.find_element*(): 定位元素，用于二次定位。

網頁自動化最基本的要求就是要定位到各個元素，然后才能對該元素進行各種操作（輸入，點擊，清除，提交等）。

以百度搜索輸入框為例，具體說明各個定位方式的用法：

（通過 chrome 瀏覽器查看元素或者搜狐瀏覽器的 firebug 查看，即可看到 html 源碼）

注意點：第三行的元素是灰色的，該元素是不可定位到的，下方會說明。

1
2
3
4
5
6
7
8

1. 通過 id 定位元素

如果 id 不是動態的，一個頁面的 id 是唯一的。最簡單的定位方式。

使用：find_element_by_id(“id_vaule”)

實例：find_element_by_id(“kw”)

注意點：有些 id 值是動態變化的，則不能使用該方法定位。如下：id 就是動態的，每次進入頁面，該 id 都會改變

郵箱帳號或手機號

2. 通過 class_name 定位元素

classname 有可能重復哦。

使用：find_element_by_class_name(“class_name_vaule”)

實例：find_element_by_class_name(“s_ipt”)

3. 通過 tag_name 定位元素

標簽名字最容易重復，不過，當定位一組數據時，可使用。

使用：find_element_by_tag_name(“tag_name_vaule”)

實例：find_element_by_tag_name(“input”)

注意點：當定位一組元素時：可勾選一組復選框。如下：

find_element_by_tag_name(“input”)

checkbox
checkbox1
checkbox2
checkbox3

4. 通過 name 定位元素

name 有可能會重復哦。

使用：find_element_by_name(“name_vaule”)

實例：find_element_by_name(“wd”)

5. 通過 link 文字精確定位元素

登錄

使用：find_element_by_link_text(“text_vaule”)

實例：find_element_by_link_text(“登錄”)

6. 通過 link 文字模糊定位元素

使用：find_element_by_partial_link_text(“部分 text_vaule”)

實例：find_element_by_partial_link_text(“登”)

7. 通過 CSS 定位元素

CSS（Cascading Style Sheets）是一種語言，它用來描述 HTML 和 XML 文檔的表現。CSS 可以較為靈活的選擇控件的任意屬性，一般情況下會比 XPath 快。且語法也比較簡潔。

使用：find_element_by_css_selector(“CSS”)

實例：

7.1 通過 id 屬性定位元素

#號表示通過 id 屬性來定位元素

find_element_by_css_selector(“#kw”)

7.2 通過 class 屬性定位元素

. 號表示通過 class 屬性來定位元素

find_element_by_css_selector(“.s_ipt”)

7.3 通過標簽名定位元素

find_element_by_css_selector(“input”)

7.4 通過屬性定位元素（挺常用的）

find_element_by_css_selector(“[name=‘wd’]”)

find_element_by_css_selector(“[maxlength=‘255’]”)

屬性值包含某個值

屬性值包含 wd：適用于由空格分隔的屬性值。

find_element_by_css_selector(“[name~=‘wd’]”)

7.5 父子定位元素

查找有父親元素的標簽名為 span，它的所有標簽名叫 input 的子元素

**find_element_by_css_selector(“span>input”) **

7.6 組合定位元素

標簽名 #id 屬性值：指的是該 input 標簽下 id 屬性為 kw 的元素

find_element_by_css_selector(“input#kw”)

標簽名.class 屬性值：指的是該 input 標簽下 class 屬性為 s_ipt 的元素

find_element_by_css_selector(“input.s_ipt”)

標簽名 [屬性 =’屬性值‘]：指的是該 input 標簽下 name 屬性為 wd 的元素

find_element_by_css_selector(“input[name=‘wd’]”)

父元素標簽名 > 標簽名.class 屬性值：指的是 span 下的 input 標簽下 class 屬性為 s_ipt 的元素

find_element_by_css_selector(“span>input.s_ipt”)

多個屬性組合定位元素（挺常用的）

指的是 input 標簽下 id 屬性為 kw 且 name 屬性為 wd 的元素

find_element_by_css_selector(“input.s_ipt[name=‘wd’]”)

指的是 input 標簽下 name 屬性為 wd 且 maxlength 為 255 的元素

find_element_by_css_selector(“input[name=‘wd’][maxlength='255']”)

8. 通過 XPath 定位元素

XPath 是一種 XML 文檔中定位元素的語言。該定位方式也是比較常用的定位方式。

使用：find_element_by_xpath(“XPath”)

8.1 通過屬性定位元素

find_element_by_xpath(“// 標簽名 [@屬性 =‘屬性值’]”)

id 屬性：find_element_by_xpath(“//input[@id=‘kw’]”)
?
class 屬性：find_element_by_xpath(“//input[@class=‘s_ipt’]”)

name 屬性：find_element_by_xpath(“//input[@name=‘wd’]”)

maxlength 屬性：find_element_by_xpath(“//input[@maxlength=‘255’]”)

8.2 通過標簽名定位元素

指所有 input 標簽元素 find_element_by_xpath(“//input”)

8.3 父子定位元素

查找有父親元素的標簽名為 span，它的所有標簽名叫 input 的子元素

find_element_by_xpath(“//span/input”)

8.4 根據元素內容定位元素（非常實用）

find_element_by_xpath(“//p[contains(text(),‘京公網’)]”)

京公網安備 11000002000001 號

注：contains 的另一種用法

//**input[contains(@class,‘s’)] **說明 class 屬性包含 s 的元素。

8.5 組合定位元素

// 父元素標簽名 / 標簽名的屬性值：指的是 span 下的 input 標簽下 class 屬性為 s_ipt 的元素

find_element_by_xpath(“//span/input[@class=‘s_ipt’]”)

多個屬性組合定位（挺常用的）

指的是 input 標簽下 id 屬性為 kw 且 name 屬性為 wd 的元素

find_element_by_xpath(“//input[@class=‘s_ipt’ and @name=‘wd’]”)

指的是 p 標簽下內容包含“京公網”且 id 屬性為 jgwab 的元素

find_element_by_xpath(“//p[contains(text(),‘京公網’)and @id=‘jgwab’]”)

比較懶惰的方法：

使用搜狐瀏覽器的 firebug 工具，復制 XPath 路徑，不過這種方式對層級要求高，到時候自己再修改下。

9. 通過 By 定位元素

使用：find_element(定位的類型，具體定位方式)

定位的類型包括 By.ID,By.NAME,By.CLASS_NAME,By.TAG_NAME,By.LINK_TEXT,By.PARTIAL_LINK_TEXT,By.XPATH,By.CSS_SELECTOR

具體定位方式參考上方 1-8 的說明。

實例：find_element(By.ID,‘kw’)

注意：使用 By 定位方式，需先導入 By 類。

from selenium.webdriver.common.by import By

10. 具體實例說明

下方例子是登陸 126 郵件，然后發送郵件。

1 # coding=utf-8
2 '''
3 Created on 2016-7-27
4 @author: Jennifer
5 Project: 發送郵件
6 '''
7 from selenium import webdriver
8 import time
9
10 from test_5_2_public import Login # 由于公共模塊文件命名為 test_5_2_public
11 driver=webdriver.Firefox()
12 driver.implicitly_wait(30)
13 driver.get(r’http://www.126.com/‘) # 字符串加 r，防止轉義。
14 time.sleep(3)
15 driver.switch_to.frame(‘x-URS-iframe’)
16 #調用登錄模塊
17 Login().user_login(driver)
18 time.sleep(10)
19 #發送郵件
20 #點擊發件箱
21 #_mail_component_61_61 是動態 id，所以不能用于定位
22 #driver.find_element_by_css_selector(’#_mail_component_61_61>span.oz0’).click()
23 #不能加 u"//span[contains(text(),u’寫 信’)]“，否則定位不到。
24 #以下定位是查找 span 標簽有個文本（text）包含（contains）‘寫 信’ 的元素，該定位方法重要
25 **driver.find_element_by_xpath(”//span[contains(text(),‘寫 信’)]“).click()**
26 #填寫收件人
27 #driver.find_element_by_class_name(‘nui-editableAddr-ipt’).send_keys(r’xxx@doov.com.cn’)
28 driver.find_element_by_class_name(‘nui-editableAddr-ipt’).send_keys(r’xxx@163.com’)
29 #填寫主題
30 #通過 and 連接更多的屬性來唯一地標志一個元素
31 **driver.find_element_by_xpath(”//input[@class=‘nui-ipt-input’ and @maxlength=‘256’]“).send_keys(u’自動化測試’)**
32 #填寫正文
33 #通過 switch_to_frame() 將當前定位切換到 frame/iframe 表單的內嵌頁面中
34 driver.switch_to_frame(driver.find_element_by_class_name(‘APP-editor-iframe’))
35 #在內嵌頁面中定位郵件內容位置
36 emailcontext=driver.find_element_by_class_name(‘nui-scroll’)
37 #填寫郵件內容
38** emailcontext.send_keys(u’這是第一封自動化測試郵件’)**
39 #通過 switch_to().default_content() 跳回最外層的頁面
40 #注：不要寫成 switch_to().default_content(), 否則報 AttributeError: SwitchTo instance has no call method
41 driver.switch_to.default_content()
42 #driver.switch_to.parent_frame()
43 #點擊發送
44 time.sleep(3)
45 #有可能存在元素不可見（查看元素是灰色的），會報 ElementNotVisibleException 錯誤
46 #包含發送二字的元素很多，所以還得再加上其他限制
47 #sendemails=driver.find_element_by_xpath(”//span[contains(text(),‘發送’)]“)
48 **sendemails=driver.find_element_by_xpath(”//span[contains(text(),‘發送’)and @class=‘nui-btn-text’]")**
49 time.sleep(3)
50
51 #校驗郵件是否發送成功
52 try:
53 assert ‘發送成功’ in driver.page_source
54 except AssertionError:
55 print ‘郵件發送成功’
56 else:
57 print ‘郵件發送失敗’
58
59 #調用退出模塊
60 Login().user_logout(driver)

元素定位說明：
1. 代碼 22 行，定位不到是因為 id 是動態的，所以需采取其他方式定位元素。

2. 代碼 25 行，是根據元素內容來定位的，具體用法詳看 8.4.

3. 代碼 28 行，是根據 class 名來定位元素的，由于該值在該頁面上是唯一的，所以可以用它來定位。

4. 代碼 31 行，是使用邏輯運算符 and 連接更多的屬性從而唯一的標志一個元素，具體用法詳看 8.5.

5. 代碼 34 行，由于使用內嵌的 iframe 框架，所以需要先使用 switch_to_frame() 移到該表單上，才能定位該表單上的元素，非常重要，否則無論怎么定位都會報“NoSuchElementException”，找不到該元素。

6. 代碼 41 行，跳出 iframe 框架，當框架內的動作操作完畢后，需要使用 switch_to.default_content 跳出 iframe 框架, 非常重要。

7. 代碼 47 行，由于內容包括“發送”的元素中包含不可見元素（html 查看元素可以看到此行是灰色的），這樣有可能定位到不可見元素，會報“ElementNotVisibleException”。

8. 代碼 48 行，是使用邏輯運算符 and 連接更多的屬性從而唯一的標志一個元素，具體用法詳看 8.5. 這樣可以排除掉那個不可見元素。

1.Frame/Iframe 原因定位不到元素：
　　這個是最常見的原因，首先要理解下 frame 的實質，frame 中實際上是嵌入了另一個頁面，而 webdriver 每次只能在一個頁面識別，因此需要先定位到相應的 frame，對那個頁面里的元素進行定位。
?
解決方案：
?
如果 iframe 有 name 或 id 的話，直接使用 switch_to_frame(“name 值”) 或 switch_to_frame(“id 值”)。
?
?如下：
driver=webdriver.Firefox()
driver.get(r’http://www.126.com/’)
driver.switch_to_frame(‘x-URS-iframe’) # 需先跳轉到 iframe 框架
username=driver.find_element_by_name(‘email’)
username.clear()

如果 iframe 沒有 name 或 id 的話，則可以通過下面的方式定位：
#先定位到 iframe
elementi= driver.find_element_by_class_name(‘APP-editor-iframe’)
#再將定位對象傳給 switch_to_frame() 方法
driver.switch_to_frame(elementi)

如果完成操作后，
?可以通過 switch_to.parent_content()方法跳出當前 iframe，或者還可以通過 switch_to.default_content() 方法跳回最外層的頁面。
?

2.Xpath 描述錯誤原因：
?
由于 Xpath 層級太復雜，容易犯錯。但是該定位方式能夠有效定位絕大部分的元素，建議掌握。
解決方案：
?
2.1 可以使用 Firefox 的 firePath，復制 xpath 路徑。該方式容易因為層級改變而需要重新編寫過 xpath 路徑，不建議使用，初學者可以先復制路徑，然后嘗試去修改它。
?
2.2 提高下寫 xpath 的水平。

如何檢驗編寫的 Xpath 是否正確？編寫好 Xpath 路徑，可以直接復制到搜狐瀏覽器的 firebug 查看 html 源碼，通過 Xpath 搜索：如下紅色框，若無報錯，則說明編寫的 Xpath 路徑沒錯。
?
**find_element_by_xpath(“//input[@id=‘kw’]”) **

?

?

?3. 頁面還沒有加載出來，就對頁面上的元素進行的操作：
這種情況一般說來，可以設置等待，等待頁面顯示之后再操作，這與人手工操作的原理一樣：
3.1 設置等待時間；缺點是需要設置較長的等待時間，案例多了測試就很慢；
3.2 設置等待頁面的某個元素出現，比如一個文本、一個輸入框都可以，一旦指定的元素出現，就可以做操作。
3.3 在調試的過程中可以把頁面的 html 代碼打印出來，以便分析。
?
解決方案：
導入時間模塊。
import time
time.sleep(3)

4. 動態 id 定位不到元素：
解決方案：
如果發現是動態 id，直接用 xpath 定位或其他方式定位。

?

??

5. 二次定位，如彈出框登錄
?
如百度登錄彈出框登錄百度賬號，需先定位到百度彈出框，然后再定位到用戶名密碼登錄。

#coding=utf-8
'''
Created on 2016-7-20
@author: Jennifer
Project: 登錄百度賬號
'''
from selenium import webdriver
import time

driver = webdriver.Firefox()
driver.get(“http://www.baidu.com/”)

time.sleep(3)

#點擊登錄：有些 name 為 tj_login 的元素為不可見的，點擊可見的那個登錄按鈕即可。
#否則會報：ElementNotVisibleException
element0=driver.find_elements_by_name(“tj_login”)
for ele0 in element0:
if ele0.is_displayed():
ele0.click()

#在登錄彈出框，需先定位到登錄彈出框
#否則會報：NoSuchElementException
element1=driver.find_element_by_class_name(“tang-content”)
element11=element1.find_element_by_id(“TANGRAM__PSP_8__userName”)
element11.clear()
element11.send_keys(“登錄名”)

element2=element1.find_element_by_id(“TANGRAM__PSP_8__password”)
element2.clear()
element2.send_keys(“密碼”)

element3=element1.find_element_by_id(“TANGRAM__PSP_8__submit”)
element3.click()
element3.submit()

try:
assert “登錄名” in driver.page_source
except AssertionError:
print “登錄失敗”
else:
print “登錄成功”
time.sleep(3)
finally:
print “測試記錄：已測試”
driver.close()

6. 不可見元素定位

如上百度登錄代碼，通過名稱為 tj_login 查找的登錄元素，有些是不可見的，所以加一個循環判斷，找到可見元素（is_displayed()）點擊登錄即可。