HTML學習教程5-頭元素腳本鏈接

TML<head>元素

<head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。

可以添加在頭部區(qū)域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

HTML <title> 元素

<title> 標簽定義了不同文檔的標題。

<title> 在 HTML/XHTML 文檔中是必須的。

<title> 元素:

定義了瀏覽器工具欄的標題
當網(wǎng)頁添加到收藏夾時，顯示在收藏夾中的標題
顯示在搜索引擎結(jié)果頁面的標題

一個簡單的 HTML 文檔:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title>
</head>
 
<body>
文檔內(nèi)容......
</body>
 
</html>

HTML <base> 元素

<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <style> 元素

在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <meta> 元素

meta標簽描述了一些基本的元數(shù)據(jù)。

META 元素通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時間，作者，和其他元數(shù)據(jù)。

元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他Web服務(wù)。

<meta> 標簽- 使用實例

為搜索引擎定義關(guān)鍵詞:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

為網(wǎng)頁定義描述內(nèi)容:

<meta name="description" content="免費 Web & 編程 教程">

定義網(wǎng)頁作者:

<meta name="author" content="tom">

每30秒鐘刷新當前頁面:

<meta http-equiv="refresh" content="30">

HTML <script> 元素

JavaScript 最常用于圖片操作、表單驗證以及內(nèi)容動態(tài)更新。

下面的腳本會向瀏覽器輸出"Hello World!"：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head>
<body>
<script>
document.write("Hello World!")
</script> 
</body>
</html>

HTML<noscript> 標簽

只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 <noscript> 元素中的內(nèi)容：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title> 
</head> 
<body>

<script>
document.write("Hello World!")
document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落。</p>");
</script>
<noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的瀏覽器會使用 <noscript> 元素中定義的內(nèi)容（文本）來替代。</p>
 
</body>
</html>

JavaScript事件響應(yīng):

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title> 
</head>
<body>

<h1>我的第一個 JavaScript </h1>

<p id="demo">
JavaScript 可以觸發(fā)事件，就像按鈕點擊。</p>

<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">點我</button>

</body>
</html>

HTML 腳本標簽

標簽	描述
<script>	定義了客戶端腳本
<noscript>	定義了不支持腳本瀏覽器輸出的文本

HTML鏈接

HTML使用標簽 <a>來設(shè)置超文本鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?/span>

在標簽<a> 中使用了href屬性來描述鏈接的地址。

默認情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：

一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

注意：如果為這些超鏈接設(shè)置了 CSS 樣式，展示樣式會根據(jù) CSS 的設(shè)定而顯示。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title> 
</head>
<body>
<p><a href="//www.microsoft.com/">本文本</a> 是一個指向萬維網(wǎng)上的頁面的鏈接。</p>
</body>
</html>

HTML head 元素

標簽	描述
<head>	定義了文檔的信息
<title>	定義了文檔的標題
<base>	定義了頁面鏈接標簽的默認鏈接地址
<link>	定義了一個文檔和外部資源之間的關(guān)系
<meta>	定義了HTML文檔中的元數(shù)據(jù)
<script>	定義了客戶端的腳本文件
<style>	定義了HTML文檔的樣式文件

一種：selenium導入瀏覽器驅(qū)動，用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 這三個軟件。所以，安裝前請?zhí)崆鞍惭b Cython、lxml、selenium。

二、Splinter 的使用
這里，我給出自動登錄 126 郵箱的案例。難點是要找到頁面的賬戶、密碼、登錄的頁面元素，這里需要查看 126 郵箱登錄頁面的源碼，才能找到相關(guān)控件的 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 的目標是提供一個設(shè)計良好的面向?qū)ο蟮?API，提供了更好的支持進行 web-app 測試。

打開瀏覽器

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

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 應(yīng)用程序測試自動化工具，用來驗證程序是否如預期的那樣執(zhí)行。

webdriver.Chrome()：創(chuàng)建一個 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)方法來打開網(wǎng)頁鏈接，例如腳本中打開百度首頁

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

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

瀏覽器前進后退

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 瀏覽器打開頁面后，在瀏覽器的地址欄右側(cè)有一個圖標，點擊這個圖標后，會出現(xiàn)許多菜單項，選擇更多工具里的開發(fā)者工具，就會出現(xiàn)頁面的源碼，不同版本的瀏覽器菜單選項可能不同，但是都會在開發(fā)者工具里找到頁面的源碼

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

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

使用id定位

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

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

input_search = browser.find_element_by_id("kw")

使用name定位

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

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

input_search = browser.find_element_by_name("wd")

使用className定位

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

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

input_search = browser.find_element_by_class_name("s_ipt")

使用tagName定位

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

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

input_search = browser.find_element_by_class_name("input")

使用link_text定位

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

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

新聞

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

news = browser.find_element_by_link_text("新聞")

使用partial_link_text定位

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

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

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屬性定位

可以在參數(shù)中加入元素的標簽名稱

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']")

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

使用xpath定位

XPath 是一種在 XML 文檔中定位元素的語言。因為 HTML 可以看做 XML 的一種實現(xiàn)，所以 selenium 用戶可是使用這種強大語言在 web 應(yīng)用中定位元素。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"結(jié)尾的元素

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

利用正則表達式查找元素

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

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”關(guān)鍵字，會出現(xiàn)許多搜索結(jié)果，這些搜索結(jié)果具有相同的屬性，不同的是屬性的值不同，定位這些元素時，可以使用批量定位的方法

看下面的代碼

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

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

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

第二個例子

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’, ‘a(chǎn)dd_cookie’, ‘a(chǎn)pplication_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’]

調(diào)用說明：

driver. 屬性值

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

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

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

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

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

函數(shù)說明：

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()：關(guān)閉當前窗口，或最后打開的窗口。
7.driver.quit(): 關(guān)閉所有關(guān)聯(lián)窗口，并且安全關(guān)閉 session。

8.driver.maximize_window(): 最大化瀏覽器窗口。
9.driver.set_window_size(寬，高)：設(shè)置瀏覽器窗口大小。
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(秒)：隱式等待，通過一定的時長等待頁面上某一元素加載完成。
若提前定位到元素，則繼續(xù)執(zhí)行。若超過時間未加載出，則拋出 NoSuchElementException 異常。

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

14.driver.switch_to_frame(id 或 name 屬性值)：切換到新表單 (同一窗口)。若無 id 或?qū)傩灾担上韧ㄟ^ xpath 定位到 iframe，再將值傳給 switch_to_frame()

15.driver.switch_to.parent_content(): 跳出當前一級表單。該方法默認對應(yīng)于離它最近的 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): 調(diào)用 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’]

調(diào)用說明：
driver.find_element*. 屬性值
或
element=driver.find_element*
element. 屬性值

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

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

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

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

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

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

1
2
3
4
5
6
7
8

1. 通過 id 定位元素

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

使用：find_element_by_id(“id_vaule”)

實例：find_element_by_id(“kw”)

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

郵箱帳號或手機號

2. 通過 class_name 定位元素

classname 有可能重復哦。

使用：find_element_by_class_name(“class_name_vaule”)

實例：find_element_by_class_name(“s_ipt”)

3. 通過 tag_name 定位元素

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

使用：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 文檔的表現(xiàn)。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 根據(jù)元素內(nèi)容定位元素（非常實用）

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

京公網(wǎng)安備 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 標簽下內(nèi)容包含“京公網(wǎng)”且 id 屬性為 jgwab 的元素

find_element_by_xpath(“//p[contains(text(),‘京公網(wǎng)’)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 郵件，然后發(fā)送郵件。

1 # coding=utf-8
2 '''
3 Created on 2016-7-27
4 @author: Jennifer
5 Project: 發(fā)送郵件
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，防止轉(zhuǎn)義。
14 time.sleep(3)
15 driver.switch_to.frame(‘x-URS-iframe’)
16 #調(diào)用登錄模塊
17 Login().user_login(driver)
18 time.sleep(10)
19 #發(fā)送郵件
20 #點擊發(fā)件箱
21 #_mail_component_61_61 是動態(tài) 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 表單的內(nèi)嵌頁面中
34 driver.switch_to_frame(driver.find_element_by_class_name(‘APP-editor-iframe’))
35 #在內(nèi)嵌頁面中定位郵件內(nèi)容位置
36 emailcontext=driver.find_element_by_class_name(‘nui-scroll’)
37 #填寫郵件內(nèi)容
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 #點擊發(fā)送
44 time.sleep(3)
45 #有可能存在元素不可見（查看元素是灰色的），會報 ElementNotVisibleException 錯誤
46 #包含發(fā)送二字的元素很多，所以還得再加上其他限制
47 #sendemails=driver.find_element_by_xpath(”//span[contains(text(),‘發(fā)送’)]“)
48 **sendemails=driver.find_element_by_xpath(”//span[contains(text(),‘發(fā)送’)and @class=‘nui-btn-text’]")**
49 time.sleep(3)
50
51 #校驗郵件是否發(fā)送成功
52 try:
53 assert ‘發(fā)送成功’ in driver.page_source
54 except AssertionError:
55 print ‘郵件發(fā)送成功’
56 else:
57 print ‘郵件發(fā)送失敗’
58
59 #調(diào)用退出模塊
60 Login().user_logout(driver)

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

2. 代碼 25 行，是根據(jù)元素內(nèi)容來定位的，具體用法詳看 8.4.

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

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

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

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

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

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

1.Frame/Iframe 原因定位不到元素：
　　這個是最常見的原因，首先要理解下 frame 的實質(zhì)，frame 中實際上是嵌入了另一個頁面，而 webdriver 每次只能在一個頁面識別，因此需要先定位到相應(yīng)的 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’) # 需先跳轉(zhuǎn)到 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 路徑?jīng)]錯。
?
**find_element_by_xpath(“//input[@id=‘kw’]”) **

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

4. 動態(tài) id 定位不到元素：
解決方案：
如果發(fā)現(xiàn)是動態(tài) 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 查找的登錄元素，有些是不可見的，所以加一個循環(huán)判斷，找到可見元素（is_displayed()）點擊登錄即可。

、前因

贊賞還需要前因！！！，世間熙攘皆為利嘛。咳咳，嗯，我也只是看別地方有，搬過來罷了。

二、添加頁面

對應(yīng)目錄新建 layouts\partials\reward.html 文件。

甩入以下代碼：

<div class="post-reward" data-html2canvas-ignore>
  <input type="checkbox" name="reward" id="reward" hidden />
  <label class="reward-button" for="reward">贊賞支持</label>
  <div class="qr-code">
    {{ if .Site.Params.Reward.wechat }}
    <label class="qr-code-image" for="reward">
      <img class="image" src="{{ .Site.Params.Reward.wechat }}">
      <span>微信打賞</span>
    </label>
    {{ end }}
    {{ if .Site.Params.Reward.alipay }}
    <label class="qr-code-image" for="reward">
      <img class="image" src="{{ .Site.Params.Reward.alipay }}">
      <span>支付寶打賞</span>
    </label>
    {{ end }}
    {{ if .Site.Params.Reward.paypal }}
    <label class="qr-code-image" for="reward">
      <img class="image" src="{{ .Site.Params.Reward.paypal }}">
      <span>PayPal打賞</span>
    </label>
    {{ end }}
  </div>
</div>

看著來，要加qq錢包啥的隨便加。

文章對應(yīng)位置引入頁面，一般在single.html中。

{{ if .Site.Params.Reward.enable }}
    {{ partial "reward.html" . }}
{{ end }}

三、添加樣式

custom.css中添加樣式：

/* 打賞 */
.post-reward {
  margin-top: 20px;
  padding-top: 10px;
  text-align: center;
  border-top: 1px dashed #e6e6e6
}

.post-reward .reward-button {
  margin: 15px 0;
  padding: 3px 7px;
  display: inline-block;
  color: #c05b4d;
  border: 1px solid #c05b4d;
  border-radius: 5px;
  cursor: pointer
}

.post-reward .reward-button:hover {
  color: #fefefe;
  background-color: #c05b4d;
  transition: .5s
}

.post-reward #reward:checked~.qr-code {
  display: block
}

.post-reward #reward:checked~.reward-button {
  display: none
}

.post-reward .qr-code {
  display: none
}

.post-reward .qr-code .qr-code-image {
  display: inline-block;
  min-width: 200px;
  width: 40%;
  margin-top: 15px
}

.post-reward .qr-code .qr-code-image span {
  display: inline-block;
  width: 100%;
  margin: 8px 0
}

.post-reward .qr-code .image {
  width: 200px;
  height: 200px;
  background-color: transparent;
}

四、增加配置

config.toml中加入：

[params.reward]
	enable = true  # 是否啟用
	wechat = "xxxx.png"  # 微信
	alipay = ""          # 支付寶
	paypal = ""          # paypal

為空不會顯示。

五、效果

六、總結(jié)

聊勝于無。

收工！

在線咨詢

上一篇：3分鐘，用CSS寫一個暗黑極簡風格的小鍵盤～#html
下一篇：Bootstrap 開源 SVG 圖標庫 Bootstrap Icons

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML學習教程5-頭元素 腳本 鏈接