Selenium(八)：其餘操做元素的方法、凍結界面、彈出對話框、開發技巧

時間 2019-11-26

標籤 selenium 其餘元素方法凍結界面彈出對話框開發技巧简体版

原文原文鏈接

1. 其餘操做元素的方法

以前咱們對web元素作的操做主要是：選擇元素，而後點擊元素或者輸入字符串。css

還有沒有其餘的操做了呢？有。html

好比：好比鼠標右鍵點擊、雙擊、移動鼠標到某個元素、鼠標拖拽等。node

這些操做，能夠經過Selenium提供的ActionChains類來實現。web

ActionChains類裏面提供了一些特殊的動做的模擬，咱們能夠經過 ActionChains 類的代碼查看到，以下所示：chrome

咱們以移動鼠標到某個元素爲例。瀏覽器

百度首頁的右上角，有個更多產品選項，以下圖所示：app

若是咱們把鼠標放在上邊，就會彈出下面的糯米、音樂、圖片等圖標。工具

使用ActionChains來模擬鼠標移動操做的代碼以下：學習

from selenium import webdriver

driver = webdriver.Chrome(r'E:\webdrivers\chromedriver.exe')
driver.implicitly_wait(5)

driver.get('https://www.baidu.com/')

from selenium.webdriver.common.action_chains import ActionChains

ac = ActionChains(driver)

# 鼠標移動到 元素上
ac.move_to_element(driver.find_element_by_css_selector('[name="tj_briicon"]')).perform()

2. 凍結界面

有些網站上面的元素，咱們鼠標放在上面，會動態彈出一些內容。測試

好比，百度首頁的右上角，有個更多產品選項，以下圖所示：

若是咱們把鼠標放在上邊，就會彈出下面的百度營銷、音樂、圖片等圖標。

若是咱們要用selenium自動化點擊音樂圖標，就須要F12查看這個元素的特徵。

可是當咱們的鼠標從音樂圖標移開，這個欄目就整個消失了，就無法查看其對應的HTML。

怎麼辦？

能夠以下圖所示：

在開發者工具欄console裏面執行以下js代碼：

setTimeout(function(){debugger}, 5000)

這句代碼什麼意思呢？

表示在 5000毫秒後，執行debugger命令

執行該命令會瀏覽器會進入debug狀態。debug狀態有個特性，界面被凍住，無論咱們怎麼點擊界面都不會觸發事件。

因此，咱們能夠在輸入上面代碼並回車執行後，當即鼠標放在界面右上角更多產品處。

這時候，就會彈出下面的百度營銷、音樂、圖片等圖標。

而後，咱們仔細等待5秒到了之後，界面就會由於執行了debugger命令而被凍住。

而後，咱們就能夠點擊開發者工具欄的查看箭頭，再去點擊百度營銷圖標，查看其屬性了。

3. 彈出對話框

有的時候，咱們常常會在操做界面的時候，出現一些彈出的對話框。

html代碼：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script>
        function appendEle(info) {
            var node = document.createElement("LI");
            var textNode = document.createTextNode(info);
            node.appendChild(textNode);
            document.getElementById("add").appendChild(node);
        }

        function clickResponse() {
            if (confirm("你肯定要和小灰灰一塊兒學Python嗎？") == true) {
                appendEle("肯定");
            } else {
                appendEle("取消操做");
            }
        }

        function clickPrompt() {
            var PythonCourse = prompt("請輸入你想學習的Python課程", "Python基礎");

            if (PythonCourse == null ) {
                appendEle("取消操做");
               } else {
                appendEle("你想學習:" + PythonCourse);
            }
        }
    </script>
    <body>
        <br>
        <br>
        <button id="b1" onclick='alert("如今開始和小灰灰一塊兒學Python!");'>alert</button>

        <br>
        <br>
        <button id="b2" onclick='clickResponse()'>confirm</button>

        <br>
        <br>
        <button id="b3" onclick='clickPrompt()'>prompt</button>

        <div id="add"></div>
    </body>
</html>

分別點擊界面的3個按鈕，你能夠發現：

彈出的對話框有三種類型，分別是 Alert（警告信息）、confirm（確認信息）和prompt（提示輸入）。

3.1 Alert

Alert 彈出框，目的就是顯示通知信息，只需用戶看完信息後，點擊 OK（肯定）就能夠了。

那麼，自動化的時候，代碼怎麼模擬用戶點擊OK按鈕呢？

selenium提供以下方法進行操做

driver.switch_to.alert.accept()

注意：若是咱們不去點擊它，頁面的其它元素是不能操做的。

若是程序要獲取彈出對話框中的信息內容，能夠經過以下代碼：

driver.switch_to.alert.text

示例代碼以下：

from selenium import webdriver
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get('http://127.0.0.1:8020/day01/index.html')

# --- alert ---
driver.find_element_by_id('b1').click()

# 打印 彈出框 提示信息
print(driver.switch_to.alert.text)

# 點擊 OK 按鈕
driver.switch_to.alert.accept()

3.2 Confirm

Confirm彈出框，主要是讓用戶確認是否要進行某個操做。

好比：當管理員在網站上選擇刪除某個帳號時，就可能會彈出Confirm彈出框，要求確認是否肯定要刪除。

Confirm彈出框有兩個選擇供用戶選擇，分別是OK和Cancel，分別表明肯定和取消操做。

那麼，自動化的時候，代碼怎麼模擬用戶點擊OK或者Cancel按鈕呢？

selenium提供以下方法進行操做：

若是咱們想點擊OK按鈕，仍是用剛纔的accept方法，以下：

driver.switch_to.alert.accept()

若是咱們想點擊Cancel按鈕，能夠用dismiss方法，以下：

driver.switch_to.alert.dismiss()

示例代碼以下：

from selenium import webdriver
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get('http://127.0.0.1:8020/day01/index.html')

# --- confirm ---
driver.find_element_by_id('b2').click()

# 打印 彈出框 提示信息
print(driver.switch_to.alert.text)

# 點擊 OK 按鈕
driver.switch_to.alert.accept()

driver.find_element_by_id('b2').click()

# 點擊 取消 按鈕
driver.switch_to.alert.dismiss()

3.3 Prompt

出現 Prompt 彈出框是須要用戶輸入一些信息，提交上去。

好比：當管理員在網站上選擇給某個帳號延期時，就可能會彈出Prompt彈出框，要求輸入延期多長時間。

能夠調用以下方法：

driver.switch_to.alert.send_keys()

示例代碼以下：

from selenium import webdriver
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get('http://127.0.0.1:8020/day01/index.html')

# --- prompt ---
driver.find_element_by_id('b3').click()

# 獲取 alert 對象
alert = driver.switch_to.alert

# 打印 彈出框 提示信息
print(alert.text)

# 輸入信息，而且點擊 OK 按鈕 提交
alert.send_keys('web自動化 - selenium')
alert.accept()

# 點擊 Cancel 按鈕 取消
driver.find_element_by_id('b3').click()
alert = driver.switch_to.alert
alert.dismiss()

注意：有些彈窗並不是瀏覽器的alert窗口，而是html元素，這種對話框，只須要經過以前介紹的選擇器選中並進行相應的操做就能夠了。

4. 開發技巧

下面是一些其餘的Selenium自動化技巧：

4.1 窗口大小

有時候咱們須要獲取窗口的屬性和相應的信息，並對窗口進行控制。

(1) 獲取窗口大小

driver.get_window_size()

(2) 改變窗口大小

driver.set_window_size(x, y)

4.2 獲取當前窗口標題

瀏覽網頁的時候，咱們的窗口標題是不斷變化的，能夠使用WebDriver的title屬性來獲取當前窗口的標題欄字符串。

driver.title

4.3 獲取當前窗口URL地址

driver.current_url

例如，訪問博客園的官方網站，並獲取當前窗口的標題。

from selenium import webdriver

driver = webdriver.Chrome()
driver.implicitly_wait(5)

# 打開網站
driver.get('https://www.cnblogs.com/')

# 獲取網站標題欄文本
print(driver.title)

# 獲取網站地址欄文本
print(driver.current_url)

4.4 截屏

有的時候，咱們須要把瀏覽器屏幕內容保存爲圖片文件。

好比，作自動化測試時，一個測試用例檢查點發現錯誤，咱們能夠截屏爲文件，以便測試結束時進行人工覈查。

能夠使用WebDriver的get_screenshot_as_file方法來截屏並保存爲圖片。

from selenium import webdriver

driver = webdriver.Chrome()
driver.implicitly_wait(5)

# 打開網站
driver.get('https://www.baidu.com/')

# 截屏保存爲圖片文件
driver.get_screenshot_as_file('E:\\1.png')

程序運行結束後，進入E盤，就能夠找到1.jpg文件了。

4.5 手機模式

咱們能夠經過desired_capabilities參數，指定以手機模式打開chrome瀏覽器。

參考代碼，以下：

from selenium import webdriver

mobile_emulation = { "deviceName": "Nexus 5" }

chrome_options = webdriver.ChromeOptions()

chrome_options.add_experimental_option("mobileEmulation", mobile_emulation)

driver = webdriver.Chrome( desired_capabilities = chrome_options.to_capabilities())

driver.get('http://www.baidu.com')

input()

4.6 上傳文件

有時候，網站操做須要上傳文件。

好比，著名的在線圖片壓縮網站：https://tinypng.com/

一般，上傳圖片，是經過type屬性爲file的input元素實現的。

以下所示：

<input type="file" multiple="multiple">

咱們只須要定位到該元素，而後直接經過send_keys傳入要上傳的文件路徑便可。

以下所示：

ele = wd.find_element_by_css_selector('input[type=file]')
ele.send_keys(r'E:\1.png')

若是須要上傳多個文件，能夠屢次調用send_keys，以下：

files = ["E:\1.png", "h:\2.png"]
ele = wd.find_element_by_css_selector('input[type=file]')
for file in files:
    ele.send_keys(file)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。