HTML學(xué)習(xí)教程5-頭元素腳本鏈接

TML<head>元素

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

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

HTML <title> 元素

<title> 標(biāo)簽定義了不同文檔的標(biāo)題。

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

<title> 元素:

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

一個(gè)簡(jiǎn)單的 HTML 文檔:

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

HTML <base> 元素

<base> 標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo)，該標(biāo)簽作為HTML文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接:

<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標(biāo)簽描述了一些基本的元數(shù)據(jù)。

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

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

<meta> 標(biāo)簽- 使用實(shí)例

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

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

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

<meta name="description" content="免費(fèi) Web & 編程 教程">

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

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

每30秒鐘刷新當(dāng)前頁面:

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

HTML <script> 元素

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

下面的腳本會(huì)向?yàn)g覽器輸出"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> 標(biāo)簽

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

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

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

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

JavaScript事件響應(yīng):

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

<h1>我的第一個(gè) JavaScript </h1>

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

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

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

</body>
</html>

HTML 腳本標(biāo)簽

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

HTML鏈接

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

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

當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?/span>

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

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

一個(gè)未訪問過的鏈接顯示為藍(lán)色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點(diǎn)擊鏈接時(shí)，鏈接顯示為紅色并帶有下劃線。

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

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

HTML head 元素

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

一種：selenium導(dǎo)入瀏覽器驅(qū)動(dòng)，用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/')

第二種：通過導(dǎo)入python的標(biāo)準(zhǔn)庫(kù)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:窗口自動(dòng)增長(zhǎng)
 # web.open_new_tab(‘http://www.baidu.com’)
 web.open_new(‘http://www.baidu.com’)

第三種：使用Splinter模塊模塊

一、Splinter 的安裝
Splinter 的使用必修依靠 Cython、lxml、selenium 這三個(gè)軟件。所以，安裝前請(qǐng)?zhí)崆鞍惭b Cython、lxml、selenium。

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

例如: 輸入密碼，密碼的文本控件 id 是 pwdInput. 可以使用browser.find_by_id() 方法定位到密碼的文本框，接著使用fill() 方法，填寫密碼。至于模擬點(diǎn)擊按鈕，也是要先找到按鈕控件的 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簡(jiǎn)介

selenium 從 2.0 開始集成了 webdriver 的 API，提供了更簡(jiǎn)單，更簡(jiǎn)潔的編程接口。selenium webdriver 的目標(biāo)是提供一個(gè)設(shè)計(jì)良好的面向?qū)ο蟮?API，提供了更好的支持進(jìn)行 web-app 測(cè)試。

打開瀏覽器

在 selenium+python 自動(dòng)化測(cè)試（一）–環(huán)境搭建中，運(yùn)行了一個(gè)測(cè)試腳本，腳本內(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 是一個(gè) Web 應(yīng)用程序測(cè)試自動(dòng)化工具，用來驗(yàn)證程序是否如預(yù)期的那樣執(zhí)行。

webdriver.Chrome()：創(chuàng)建一個(gè) Chrome 瀏覽器的 webdriver 實(shí)例

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

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

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

browser.close()：退出瀏覽器

運(yùn)行腳本的第一步是打開瀏覽器，使用 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獲取當(dāng)前頁面的title，title就是在瀏覽器 tab 上顯示的內(nèi)容，例如百度首頁的標(biāo)題是“百度一下，你就知道”

瀏覽器前進(jìn)后退

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

和 back 操作對(duì)應(yīng)的是瀏覽器前進(jìn)操作browser.forward()，相當(dāng)于點(diǎn)擊了瀏覽器的前進(jìn)按鈕

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

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

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

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

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

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

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

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

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

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

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

<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 瀏覽器中，打開頁面后，在頁面上點(diǎn)擊鼠標(biāo)右鍵，會(huì)有“查看源代碼”的選項(xiàng)，點(diǎn)擊后就會(huì)進(jìn)入頁面源碼頁面，在這里就可以找到頁面的所有元素

使用 Chrome 瀏覽器打開頁面后，在瀏覽器的地址欄右側(cè)有一個(gè)圖標(biāo)，點(diǎn)擊這個(gè)圖標(biāo)后，會(huì)出現(xiàn)許多菜單項(xiàng)，選擇更多工具里的開發(fā)者工具，就會(huì)出現(xiàn)頁面的源碼，不同版本的瀏覽器菜單選項(xiàng)可能不同，但是都會(huì)在開發(fā)者工具里找到頁面的源碼

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

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

使用id定位

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

可以看到輸入框有一個(gè)有一個(gè) 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 屬性的值

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

input_search = browser.find_element_by_name("wd")

使用className定位

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

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

input_search = browser.find_element_by_class_name("s_ipt")

使用tagName定位

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

每個(gè)頁面的元素都有一個(gè) tag，搜索框的標(biāo)簽為 input，有時(shí)候一個(gè)頁面里有許多相同的標(biāo)簽，所以用這種方法找到的元素一般都不準(zhǔn)確，除非這個(gè)元素使用的標(biāo)簽在這個(gè)頁面里是唯一的。一般不會(huì)使用這種方式來定位元素

input_search = browser.find_element_by_class_name("input")

使用link_text定位

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

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

新聞

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

news = browser.find_element_by_link_text("新聞")

使用partial_link_text定位

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

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

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

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

使用css selector定位

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

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

css使用元素的id定位

css 屬性使用 id 定位時(shí)，使用 #號(hào)表示元素的 id

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

css使用元素的class定位

css 屬性使用 class 定位時(shí)，使用. 號(hào)表示元素的 class

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

css使用元素的tag定位

css 屬性使用 tagName 定位時(shí)，直接使用元素的標(biāo)簽

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ù)中加入元素的標(biāo)簽名稱

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 的層級(jí)定位

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

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

通過層級(jí)來定位搜索框

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

css邏輯運(yùn)算

用一個(gè)屬性來定位元素時(shí)，如果有其他元素的屬性和此元素重復(fù)，可以組合多個(gè)屬性來功共同定位

組合多個(gè)屬性定位元素定位百度搜索框

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

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

使用xpath定位

XPath 是一種在 XML 文檔中定位元素的語言。因?yàn)?HTML 可以看做 XML 的一種實(shí)現(xiàn)，所以 selenium 用戶可是使用這種強(qiáng)大語言在 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']") // 通過其他屬性查找元素

前面的 * 號(hào)表示查找所有的標(biāo)簽元素，可以替換為標(biāo)簽名稱，更準(zhǔn)確的定位元素

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也可以通過層級(jí)來定位，定位方式

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 的層級(jí)定位是相同的，意思是 form 元素下面的第一個(gè) span 元素的 input 標(biāo)簽子元素xpath的邏輯元素通過and運(yùn)算符來組合元素屬性

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

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

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

利用正則表達(dá)式查找元素

上面介紹了查找頁面元素的八種方法，通過這些方式找到的都是單個(gè)元素，如果需要批量查找元素，還有和上面方式對(duì)應(yīng)的八種復(fù)數(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，可以通過索引來操作元素

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

通過百度首頁搜索“selenium”關(guān)鍵字，會(huì)出現(xiàn)許多搜索結(jié)果，這些搜索結(jié)果具有相同的屬性，不同的是屬性的值不同，定位這些元素時(shí)，可以使用批量定位的方法

看下面的代碼

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

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

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

第二個(gè)例子

checkbox
checkbox1
checkbox2
checkbox3

這個(gè)頁面上有 3 個(gè)復(fù)選框，打開后如下圖所示：

操作復(fù)選框

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

返回一個(gè) list

for checkbox in checkboxs:
checkbox.click()
// 點(diǎn)擊最后一個(gè)復(fù)選框

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：用于獲得當(dāng)前頁面的 URL

2.driver.title：用于獲取當(dāng)前頁面的標(biāo)題

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

4.driver.current_window_handle: 用于獲取當(dāng)前窗口句柄

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

函數(shù)說明：

1.driver.find_element*(): 定位元素，
2.driver.get(url): 瀏覽器加載 url。
實(shí)例：driver.get(“http//:www.baidu.com”)
3.driver.forward()：瀏覽器向前（點(diǎn)擊向前按鈕）。
4.driver.back()：瀏覽器向后（點(diǎn)擊向后按鈕）。
5.driver.refresh()：瀏覽器刷新（點(diǎn)擊刷新按鈕）。
6.driver.close()：關(guān)閉當(dāng)前窗口，或最后打開的窗口。
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()：獲取當(dāng)前窗口的長(zhǎng)和寬。
11.driver.get_window_position()：獲取當(dāng)前窗口坐標(biāo)。
12.driver.get_screenshot_as_file(filename): 截取當(dāng)前窗口。

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

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

實(shí)例：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(): 跳出當(dāng)前一級(jí)表單。該方法默認(rèn)對(duì)應(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(): 獲取當(dāng)前會(huì)話所有 cookie 信息。

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

實(shí)例：driver.get_cookie(“NET_SessionId”)

24.driver.add_cookie(cookie_dict): 添加 cookie。“cookie_dict”指字典對(duì)象，必須有 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: 獲取標(biāo)簽名稱。

函數(shù)說明：
1.element.clear(): 清除文本。
2.element.send_keys(value): 輸入文字或鍵盤按鍵（需導(dǎo)入 Keys 模塊）。
3.element.click()：?jiǎn)螕粼亍?br>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)頁自動(dòng)化最基本的要求就是要定位到各個(gè)元素，然后才能對(duì)該元素進(jìn)行各種操作（輸入，點(diǎn)擊，清除，提交等）。

以百度搜索輸入框?yàn)槔唧w說明各個(gè)定位方式的用法：

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

注意點(diǎn)：第三行的元素是灰色的，該元素是不可定位到的，下方會(huì)說明。

1
2
3
4
5
6
7
8

1. 通過 id 定位元素

如果 id 不是動(dòng)態(tài)的，一個(gè)頁面的 id 是唯一的。最簡(jiǎn)單的定位方式。

使用：find_element_by_id(“id_vaule”)

實(shí)例：find_element_by_id(“kw”)

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

郵箱帳號(hào)或手機(jī)號(hào)

2. 通過 class_name 定位元素

classname 有可能重復(fù)哦。

使用：find_element_by_class_name(“class_name_vaule”)

實(shí)例：find_element_by_class_name(“s_ipt”)

3. 通過 tag_name 定位元素

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

使用：find_element_by_tag_name(“tag_name_vaule”)

實(shí)例：find_element_by_tag_name(“input”)

注意點(diǎn)：當(dāng)定位一組元素時(shí)：可勾選一組復(fù)選框。如下：

find_element_by_tag_name(“input”)

checkbox
checkbox1
checkbox2
checkbox3

4. 通過 name 定位元素

name 有可能會(huì)重復(fù)哦。

使用：find_element_by_name(“name_vaule”)

實(shí)例：find_element_by_name(“wd”)

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

登錄

使用：find_element_by_link_text(“text_vaule”)

實(shí)例：find_element_by_link_text(“登錄”)

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

使用：find_element_by_partial_link_text(“部分 text_vaule”)

實(shí)例：find_element_by_partial_link_text(“登”)

7. 通過 CSS 定位元素

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

使用：find_element_by_css_selector(“CSS”)

實(shí)例：

7.1 通過 id 屬性定位元素

#號(hào)表示通過 id 屬性來定位元素

find_element_by_css_selector(“#kw”)

7.2 通過 class 屬性定位元素

. 號(hào)表示通過 class 屬性來定位元素

find_element_by_css_selector(“.s_ipt”)

7.3 通過標(biāo)簽名定位元素

find_element_by_css_selector(“input”)

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

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

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

屬性值包含某個(gè)值

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

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

7.5 父子定位元素

查找有父親元素的標(biāo)簽名為 span，它的所有標(biāo)簽名叫 input 的子元素

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

7.6 組合定位元素

標(biāo)簽名 #id 屬性值：指的是該 input 標(biāo)簽下 id 屬性為 kw 的元素

find_element_by_css_selector(“input#kw”)

標(biāo)簽名.class 屬性值：指的是該 input 標(biāo)簽下 class 屬性為 s_ipt 的元素

find_element_by_css_selector(“input.s_ipt”)

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

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

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

find_element_by_css_selector(“span>input.s_ipt”)

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

指的是 input 標(biāo)簽下 id 屬性為 kw 且 name 屬性為 wd 的元素

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

指的是 input 標(biāo)簽下 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(“// 標(biāo)簽名 [@屬性 =‘屬性值’]”)

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 通過標(biāo)簽名定位元素

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

8.3 父子定位元素

查找有父親元素的標(biāo)簽名為 span，它的所有標(biāo)簽名叫 input 的子元素

find_element_by_xpath(“//span/input”)

8.4 根據(jù)元素內(nèi)容定位元素（非常實(shí)用）

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

京公網(wǎng)安備 11000002000001 號(hào)

注：contains 的另一種用法

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

8.5 組合定位元素

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

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

多個(gè)屬性組合定位（挺常用的）

指的是 input 標(biāo)簽下 id 屬性為 kw 且 name 屬性為 wd 的元素

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

指的是 p 標(biāo)簽下內(nèi)容包含“京公網(wǎng)”且 id 屬性為 jgwab 的元素

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

比較懶惰的方法：

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

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 的說明。

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

注意：使用 By 定位方式，需先導(dǎo)入 By 類。

from selenium.webdriver.common.by import By

10. 具體實(shí)例說明

下方例子是登陸 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 #點(diǎn)擊發(fā)件箱
21 #_mail_component_61_61 是動(dòng)態(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 標(biāo)簽有個(gè)文本（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 連接更多的屬性來唯一地標(biāo)志一個(gè)元素
31 **driver.find_element_by_xpath(”//input[@class=‘nui-ipt-input’ and @maxlength=‘256’]“).send_keys(u’自動(dòng)化測(cè)試’)**
32 #填寫正文
33 #通過 switch_to_frame() 將當(dāng)前定位切換到 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’這是第一封自動(dòng)化測(cè)試郵件’)**
39 #通過 switch_to().default_content() 跳回最外層的頁面
40 #注：不要寫成 switch_to().default_content(), 否則報(bào) AttributeError: SwitchTo instance has no call method
41 driver.switch_to.default_content()
42 #driver.switch_to.parent_frame()
43 #點(diǎn)擊發(fā)送
44 time.sleep(3)
45 #有可能存在元素不可見（查看元素是灰色的），會(huì)報(bào) ElementNotVisibleException 錯(cuò)誤
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 #校驗(yàn)郵件是否發(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 行，定位不到是因?yàn)?id 是動(dòng)態(tài)的，所以需采取其他方式定位元素。

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

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

4. 代碼 31 行，是使用邏輯運(yùn)算符 and 連接更多的屬性從而唯一的標(biāo)志一個(gè)元素，具體用法詳看 8.5.

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

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

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

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

1.Frame/Iframe 原因定位不到元素：
　　這個(gè)是最常見的原因，首先要理解下 frame 的實(shí)質(zhì)，frame 中實(shí)際上是嵌入了另一個(gè)頁面，而 webdriver 每次只能在一個(gè)頁面識(shí)別，因此需要先定位到相應(yīng)的 frame，對(duì)那個(gè)頁面里的元素進(jìn)行定位。
?
解決方案：
?
如果 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’)
#再將定位對(duì)象傳給 switch_to_frame() 方法
driver.switch_to_frame(elementi)

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

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

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

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

4. 動(dòng)態(tài) id 定位不到元素：
解決方案：
如果發(fā)現(xiàn)是動(dòng)態(tài) id，直接用 xpath 定位或其他方式定位。

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

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

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

time.sleep(3)

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

#在登錄彈出框，需先定位到登錄彈出框
#否則會(huì)報(bào)：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 “測(cè)試記錄：已測(cè)試”
driver.close()

6. 不可見元素定位

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

、前因

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

二、添加頁面

對(duì)應(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錢包啥的隨便加。

文章對(duì)應(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

為空不會(huì)顯示。

五、效果

六、總結(jié)

聊勝于無。

收工！

在線咨詢

上一篇：3分鐘，用CSS寫一個(gè)暗黑極簡(jiǎn)風(fēng)格的小鍵盤～#html
下一篇：Bootstrap 開源 SVG 圖標(biāo)庫(kù) Bootstrap Icons

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商

HTML學(xué)習(xí)教程5-頭元素 腳本 鏈接