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)