什么时候可以做UI自动化测试

• 业务流程不频繁改动
• UI 元素不频繁改动
• 需要频繁回归的场景
• 核心场景等

Driver的下载与配置步骤

1. 下载浏览器对应的driver，谷歌浏览器和火狐浏览器选一个即可。

• 官方链接：/documentation/webdriver/getting_started/install_drivers/

2. 配置 driver 的环境变量
3. 重启命令行工具，验证是否配置成功

1. chromedriver的下载-Windows

• chromedriver的下载
  • 确定与浏览器匹配的driver版本
  • 根据使用的操作系统下载相应的 chromedriver
• 淘宝镜像：
  • CNPM Binaries Mirror

2. chromedriver 环境变量配置-Windows

• Windows详细配置步骤：
  • Selenium环境安装配置

3. 验证配置chromedriver是否成功-Windows

• 重启命令行，输入：chromedriver --version
• 出现chromedriver版本信息则配置成功

geckodriver 配置-Windows

• 下载geckodriver。
  • 没有chromedriver类似的对应关系，默认下载最新的driver版本
  • 根据使用的操作系统下载相应的 geckodriver
  • 淘宝镜像：CNPM Binaries Mirror
• 配置步骤与谷歌浏览器的相同。
• 输入geckodriver --version，验证是否配置成功。

在 python 中的使用

# 导入selenium 包
from selenium import webdriver

# 创建一个 Chromdriver 的实例。Chrome()会从环境变量中寻找浏览器驱动
driver = webdriver.Chrome()
# 打开网址
driver.get("https://www.baidu.com/")
# 关闭driver
driver.quit()

• 火狐浏览器演示

# 导入selenium 包
from selenium import webdriver

# 创建一个 Geckodriver 的实例。Firefox()会从环境变量中寻找浏览器驱动
driver = webdriver.Firefox()
# 打开网址
driver.get("https://www.baidu.com/")
# 关闭driver
driver.quit()

用例结构对比

自动化测试用例	作用

用例标题 测试包、文件、类、方法名称 用例的唯一标识
前提条件 setup、setup_class（Pytest）；
BeforeEach、BeforeAll（JUnit） 测试用例前的准备动作，比如读取数据或者driver的初始化
用例步骤 测试方法内的代码逻辑 测试用例具体的步骤行为
预期结果 assert 实际结果 = 预期结果 断言，印证用例是否执行成功
实际结果 assert 实际结果 = 预期结果 断言，印证用例是否执行成功
后置动作 teardown、teardown_class（Pytest）；
@AfterEach、@AfterAll（JUnit） 脏数据清理、关闭driver进程

脚本优化

import time
from selenium import webdriver
from selenium.webdriver.common.by import By


class TestDemo01():
    def setup_method(self, method):
        # 实例化chromedriver
        self.driver = webdriver.Chrome()
        # 添加全局隐式等待
        self.driver.implicitly_wait(5)

    def teardown_method(self, method):
        # 关闭driver
        self.driver.quit()

    def test_demo01(self):
        # 访问网站
        self.driver.get("https://www.baidu.com/")
        # 设置窗口
        self.driver.set_window_size(1330, 718)
        # 点击输入框
        self.driver.find_element(By.ID, "kw").click()
        # 输入框输入信息
        self.driver.find_element(By.ID, "kw").send_keys("霍格沃兹测试开发")
        # 点击搜索按钮
        self.driver.find_element(By.ID, "su").click()
        # 等待界面加载
        time.sleep(5)
        # 元素定位后获取文本信息
        res = self.driver.find_element(By.XPATH, "//*[@id='1']/h3/a").get_attribute("text")
        # 打印文本信息
        print(res)
        # 添加断言
        assert "霍格沃兹测试开发" in res
        # 查看界面展示
        time.sleep(5)

web 浏览器控制

浏览器控制

• 模拟功能测试中对浏览器的操作
  ||操作|使用场景|
  | — | — | — |
  |get|打开浏览器|web自动化测试第一步|
  |refresh|浏览器刷新|模拟浏览器刷新|
  |back|浏览器退回|模拟退回步骤|
  |maximize_window|最大化浏览器|模拟浏览器最大化|
  |minimize_window|最小化浏览器|模拟浏览器最小化|

打开网页

• get方法打开浏览器

from selenium import webdriver
import time

def window_start():
    # 实例化chromedriver
    driver = webdriver.Chrome()
    # 打开网站
    driver.get('http://www.ceshiren.com')
    # 等待一秒
    time.sleep(1)

if __name__ == '__main__':
    window_start()

刷新

• refresh方法刷新页面

from selenium import webdriver
import time

def window_refresh():
    # 实例化chromedriver
    driver = webdriver.Chrome()
    # 打开网站
    driver.get('http://www.ceshiren.com')
    # 等待一秒
    time.sleep(1)
    # 刷新网页
    driver.refresh()
    # 等待一秒
    time.sleep(1)

if __name__ == '__main__':
    window_refresh()

回退

from selenium import webdriver
import time
from selenium.webdriver.common.by import By

def window_back():
    # 实例化chromedriver
    driver = webdriver.Chrome()
    # 打开网站
    driver.get('http://www.ceshiren.com')
    # 等待一秒
    time.sleep(1)
    driver.find_element(By.XPATH,"//*[@id='ember35']").click()
    # 等待一秒
    time.sleep(1)
    # 返回上一个界面
    driver.back()
    # 等待一秒
    time.sleep(1)

if __name__ == '__main__':
    window_back()

最大化

• maximize_window方法使窗口最大化

def max_window():
    # 实例化chromedriver
    driver = webdriver.Chrome()
    # 打开网站
    driver.get('http://www.ceshiren.com')
    # 等待一秒
    time.sleep(1)
    # 屏幕最大化
    driver.maximize_window()
    # 等待一秒
    time.sleep(1)

if __name__ == '__main__':
    max_window()

最小化

• minimize_window方法使窗口最小化

from selenium import webdriver
import time

def min_window():
    # 实例化chromedriver
    driver = webdriver.Chrome()
    # 打开网站
    driver.get('http://www.ceshiren.com')
    # 等待一秒
    time.sleep(1)
    # 屏幕最小化
    driver.minimize_window()
    # 等待一秒
    time.sleep(1)

if __name__ == '__main__':
    min_window()

常见控件定位方法

HTML铺垫

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试人论坛</title>
</head>
<body>
<a href="https://ceshiren.com/" class="link">链接</a>
</body>
</html>

• 标签：<a>
• 属性：href
• 类属性: class

Selenium定位方式

Selenium提供了八种定位方式：Locator strategies | Selenium

selenium 常用定位方式

# 示例，两种方式作用一模一样
# 官方建议使用下面的方式
driver.find_element_by_id("su")
driver.find_element(By.ID, "su") 

通过 id 定位

• 格式： driver.find_element(By.ID, "ID属性对应的值")

from selenium import webdriver
import time
from selenium.webdriver.common.by import By

def id_position_method():

    # 实例化chromedriver
    driver = webdriver.Chrome()
    # 打开网站
    driver.get('http://www.ceshiren.com')
    # 等待一秒
    time.sleep(1)
    # 点击“精华帖”
    driver.find_element(By.ID,"ember35").click()
    # 等待两秒
    time.sleep(2)

if __name__ == '__main__':
    id_position_method()

name 定位

• 格式： driver.find_element(By.NAME, "Name属性对应的值")

from selenium import webdriver
import time
from selenium.webdriver.common.by import By

def name_position_method():

    # 实例化chromedriver
    driver = webdriver.Chrome()
    # 打开网站
    driver.get('http://www.baidu.com')
    # 等待一秒
    time.sleep(1)
    # 点击更多
    driver.find_element(By.NAME,"tj_briicon").click()
    # 等待两秒
    time.sleep(2)

if __name__ == '__main__':
    name_position_method()

css selector 定位

• 格式： driver.find_element(By.CSS_SELECTOR, "css表达式")
• 复制绝对定位
• 编写 css selector 表达式（后面章节详细讲解）

xpath 定位

• 格式： driver.find_element(By.XPATH, "xpath表达式")
• 复制绝对定位
• 编写 xpath 表达式（后面章节详细讲解）

link 定位

• 格式：
  • driver.find_element(By.LINK_TEXT,"文本信息")

强制等待与隐式等待

为什么要添加等待

• 避免页面未渲染完成后操作，导致的报错

from selenium import webdriver
from selenium.webdriver.common.by import By

def wait_sleep():
    """
    如果直接执行，不添加任何等待，可能会报错
    """
    driver = webdriver.Chrome()
    driver.get("https://vip.ceshiren.com/")
    # 不加等待，可能会因为网速等原因产生报错
    driver.find_element(By.XPATH, "//*[text()='个人中心']")

if __name__ == '__main__':
    wait_sleep()

直接等待

• 解决方案：在报错的元素操作之前添加等待
• 原理：强制等待，线程休眠一定时间
• 演练环境：https://vip.ceshiren.com/
• time.sleep(3)

隐式等待

• 问题：难以确定元素加载的具体等待时间。
• 解决方案：针对于寻找元素的这个动作，使用隐式等待添加配置。
• 演练环境：https://vip.ceshiren.com/
• 原理：设置一个等待时间，轮询查找（默认0.5秒）元素是否出现，如果没出现就抛出异常

#设置一个等待时间，轮询查找（默认0.5秒）元素是否出现，如果没出现就抛出异常
driver.implicitly_wait(3)

隐式等待无法解决的问题

元素可以找到，使用点击等操作，出现报错
原因：
页面元素加载是异步加载过程，通常html会先加载完成，js、css其后
元素存在与否是由HTML决定，元素的交互是由css或者js决定
隐式等待只关注元素能不能找到，不关注元素能否点击或者进行其他的交互
解决方案：使用显式等待

显式等待基本使用(初级)

• 示例： WebDriverWait(driver实例, 最长等待时间, 轮询时间).until(结束条件)
• 原理：在最长等待时间内，轮询，是否满足结束条件
• 演练环境： 霍格沃兹测试开发
• 注意：在初级时期，先关注使用

def wait_until():
    driver = webdriver.Chrome()
    driver.get("https://vip.ceshiren.com/#/ui_study")
    WebDriverWait(driver, 10).until(
        expected_conditions.element_to_be_clickable(
            (By.CSS_SELECTOR, '#success_btn')))
    driver.find_element(By.CSS_SELECTOR, "#success_btn").click()

总结

常见控件交互方法

点击，输入，清空

• 点击百度搜索框
• 输入”霍格沃兹测试开发”
• 清空搜索框中信息
• 演练地址： https://www.baidu.com/

# 点击百度搜索框
driver.find_element(By.ID,"kw").click()
# 输入"霍格沃兹测试开发"
driver.find_element(By.ID,"kw").send_keys("霍格沃兹测试开发")
# 清空搜索框中信息
driver.find_element(By.ID,"kw").clear()

获取元素属性信息

• 原因：
  • 定位到元素后，获取元素的文本信息，属性信息等
• 目的：
  • 根据这些信息进行断言或者调试
• 演练地址： 霍格沃兹测试开发

获取元素属性信息的方法

• 获取元素文本
• 获取元素的属性（html的属性值）

获取元素文本

driver.find_element(By.ID, “id”).text

获取这个元素的name属性的值

driver.find_element(By.ID, “id”).get_attribute(“name”)

自动化测试定位策略

• 不知道应该使用哪种定位方式？
• 元素定位不到无法解决？

选择定位器通用原则

1. 与研发约定的属性优先(class属性： [name='locate'])

2. 身份属性 id，name(web 定位)

3. 复杂场景使用组合定位：

• xpath，css
• 属性动态变化（id，text）
• 重复元素属性（id，text，class）
• 父子定位（子定位父）

4. js定位

Web 弹框定位

• 场景
  • web 页面 alert 弹框
• 解决：
  • web 需要使用 driver.switchTo().alert() 处理

下拉框/日期控件定位

• 场景：
  • <input>标签组合的下拉框无法定位
  • <input>标签组合的日期控件无法定位
• 解决：
  • 面对这些元素，我们可以引入 JS 注入技术来解决问题。

文件上传定位

• 场景：
  • input 标签文件上传
• 解决：
  • input 标签直接使用 send_keys()方法

高级定位-css

css 定位场景

• 支持web产品
• 支持app端的webview

css 相对定位的优点

• 可维护性更强
• 语法更加简洁
• 解决各种复杂的定位场景

# 绝对定位
$("#ember63 > td.main-link.clearfix.topic-list-data > span > span > a")
# 相对定位
$("#ember63 [title='新话题']")

css 定位的调试方法

• 进入浏览器的console
• 输入:
  • $("css表达式")
  • 或者$("css表达式")

css基础语法

//在console中的写法
// https://www.baidu.com/
//标签名
$('input')
//.类属性值
$('.s_ipt')
//#id属性值
$('#kw')
//[属性名='属性值']
$('[name="wd"]')

css关系定位

//在console中的写法
//元素,元素
$('.bg,.s_ipt_wr,.new-pmd,.quickdelete-wrap')
//元素>元素
$('#s_kw_wrap>input')
//元素 元素
$('#form input')
//元素+元素，了解即可
$('.soutu-btn+input')
//元素1~元素2，了解即可
$('.soutu-btn~i')

css 顺序关系

//:nth-child(n)
$('#form>input:nth-child(2)')
//:nth-of-type(n)
$('#form>input:nth-of-type(1)')

高级定位-xpath

xpath 定位场景

• web自动化测试
• app自动化测试

xpath 相对定位的优点

• 可维护性更强
• 语法更加简洁
• 相比于css可以支持更多的方式

# 复制的绝对定位
$x('//*[@id="ember75"]/td[1]/span/a')
# 编写的相对行为
$x("//*[text()='技术分享 | SeleniumIDE用例录制']")

xpath 定位的调试方法

• 浏览器-console
  • $x("xpath表达式")
• 浏览器-elements
  • ctrl+f 输入xpath或者css

xpath 基础语法（包含关系）

整个页面

$x(“/”)

页面中的所有的子元素

$x(“/*”)

整个页面中的所有元素

$x(“//*”)

查找页面上面所有的div标签节点

$x(“//div”)

查找id属性为site-logo的节点

$x(‘//*[@id=“site-logo”]’)

查找节点的父节点

$x(‘//*[@id=“site-logo”]/…’)

xpath 顺序关系（索引）

• xpath通过索引直接获取对应元素

获取此节点下的所有的li元素

$x(“//*[@id=‘ember21’]//li”)

获取此节点下【所有的节点的】第一个li元素

$x(“//*[@id=‘ember21’]//li[1]”)

xpath 高级用法

• [last()]: 选取最后一个
• [@属性名='属性值' and @属性名='属性值']: 与关系
• [@属性名='属性值' or @属性名='属性值']: 或关系
• [text()='文本信息']: 根据文本信息定位
• [contains(text(),'文本信息')]: 根据文本信息包含定位
• 注意：所有的表达式需要和[]结合

# 选取最后一个input标签
//input[last()]
# 选取属性name的值为passward并且属性pwd的值为123456的input标签
//input[@name='passward' and @pwd='123456']
# 选取属性name的值为passward或属性pwd的值为123456的input标签
//input[@name='passward' or @pwd='123456']
# 选取所有文本信息为'霍格沃兹测试开发'的元素
//*[text()='霍格沃兹测试开发']
# 选取所有文本信息包'霍格沃兹'的元素
//*[contains(text(),'霍格沃兹')]

显式等待高级使用

显示等待原理

• 在代码中定义等待一定条件发生后再进一步执行代码
• 在最长等待时间内循环执行结束条件的函数
• WebDriverWait(driver 实例, 最长等待时间, 轮询时间).until(结束条件函数)

显示等待-expected_conditions

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.support.wait import WebDriverWait


def wait_until():
    driver = webdriver.Chrome()
    driver.get("https://vip.ceshiren.com/#/ui_study")
    WebDriverWait(driver, 10).until(
        expected_conditions.element_to_be_clickable(
            (By.CSS_SELECTOR, '#success_btn')))
    driver.find_element(By.CSS_SELECTOR, "#success_btn").click()

常见 expected_conditions

显式等待-封装等待条件

• 官方的 excepted_conditions 不可能覆盖所有场景
• 定制封装条件会更加灵活、可控

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.remote.webdriver import WebDriver
from selenium.webdriver.support.wait import WebDriverWait


class TestWebdriverWait:

    driver = webdriver.Chrome()

    driver.maximize_window()
    driver.implicitly_wait(5)
    driver.get("https://vip.ceshiren.com/#/ui_study")
    def teardown(self):
        self.driver.quit()
    def test_webdriver_wait(self):
        # 解决的问题：有的按钮点击一次没有反应，可能要点击多次，比如企业微信的添加成员
        # 解决的方案：一直点击按钮，直到下个页面出现，封装成显式等待的一个条件
        def muliti_click(button_element,until_ele):
            # 函数封装
            def inner(driver):
                # 封装点击方法
                driver.find_element(By.XPATH,button_element).click()
                return driver.find_element(By.XPATH,until_ele)
            return inner
        time.sleep(5)
        # 在限制时间内会一直点击按钮，直到展示弹框
        WebDriverWait(self.driver,10).until(muliti_click("//*[text()='点击两次响应']","//*[text()='该弹框点击两次后才会弹出']"))
        time.sleep(5)

高级控件交互方法

使用场景

ActionChains解析

• 实例化类ActionChains，参数为driver实例。
• 中间可以有多个操作。
• .perform()代表确定执行。

ActionChains(self.driver).操作.perform()

键盘事件

• 按下、释放键盘键位
• 结合send_keys回车

键盘事件-使用shift实现大写

• ActionChains(self.driver): 实例化ActionChains类
• key_down(Keys.SHIFT, ele): 按下shift键实现大写
• send_keys("selenium"): 输入大写的selenium
• perform(): 确认执行

class TestKeyBoardDemo:

    def setup_class(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(3)

    def teardown_class(self):
        self.driver.quit()

    def test_key_down_up(self):
        # 演练环境
        self.driver.get("https://ceshiren.com/")
        self.driver.find_element(By.ID, "search-button").click()
        ele = self.driver.find_element(By.ID, "search-term")
        ActionChains(self.driver).key_down(Keys.SHIFT, ele).\
        send_keys("selenium").perform()

键盘事件-输入后回车

• 直接输入回车: 元素.send_keys(Keys.ENTER)
• 使用ActionChains: key_down(Keys.ENTER)

class TestKeyBoardDemo:

    def setup_class(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(3)

    def teardown_class(self):
        self.driver.quit()

    def test_enter(self):
        # 演练环境
        self.driver.get("https://www.sogou.com/")
        ele = self.driver.find_element(By.ID, "query")
        ele.send_keys("selenium")
        # 第一种方式
        ele.send_keys(Keys.ENTER)
        # 第二种方式
        # ActionChains(self.driver).\
        #     key_down(Keys.ENTER).\
        #     perform()
        time.sleep(3)

键盘事件-复制粘贴

• 多系统兼容
  • mac 的复制按钮为 COMMAND
  • windows 的复制按钮为 CONTROL
• 左箭头：Keys.ARROW_LEFT
• 按下COMMAND或者CONTROL: key_down(cmd_ctrl)
• 按下剪切与粘贴按钮: send_keys("xvvvvv")

class TestKeyBoardDemo:
    # driver 初始化
    def setup_class(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(3)
    # 关闭driver进程
    def teardown_class(self):
        self.driver.quit()
    # 复制粘贴逻辑
    def test_copy_and_paste(self):
        # 演练环境
        self.driver.get("https://ceshiren.com/")
        cmd_ctrl = Keys.COMMAND if sys.platform == 'darwin' else Keys.CONTROL
        self.driver.find_element(By.ID, "search-button").click()
        ele = self.driver.find_element(By.ID, "search-term")
        # 打开搜索，选择搜索框，输入selenium，剪切后复制，几个v就代表复制几次
        ActionChains(self.driver)\
            .key_down(Keys.SHIFT, ele)\
            .send_keys("Selenium!")\
            .send_keys(Keys.ARROW_LEFT)\
            .key_down(cmd_ctrl)\
            .send_keys("xvvvvv")\
            .key_up(cmd_ctrl)\
            .perform()
        time.sleep(5)

鼠标事件

• 双击
• 拖动元素
• 指定位置（悬浮）

鼠标事件-双击

• double_click(元素对象): 双击元素

class TestMouseDemo:

    def setup_class(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(3)

    def teardown_class(self):
        self.driver.quit()

    def test_double_click(self):
        # 演练环境
        self.driver.get("https://vip.ceshiren.com/#/ui_study")
        ele = self.driver.find_element(By.ID, "primary_btn")
        ActionChains(self.driver).double_click(ele).perform()
        time.sleep(2)

鼠标事件-拖动元素

• drag_and_drop(起始元素对象, 结束元素对象): 拖动并放开元素

class TestMouseDemo:

    def setup_class(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(3)

    def teardown_class(self):
        self.driver.quit()

    def test_drag_and_drop(self):
        # 演练环境
        self.driver.get("https://vip.ceshiren.com/#/ui_study/action_chains")
        item_left = self.driver.find_element(By.CSS_SELECTOR,'#item1')
        item_right = self.driver.find_element(By.CSS_SELECTOR,'#item3')
        ActionChains(self.driver).drag_and_drop(item_left, item_right).perform()
        time.sleep(5)

鼠标事件-悬浮

• move_to_element(元素对象): 移动到某个元素

class TestMouseDemo:

    def setup_class(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(3)

    def teardown_class(self):
        self.driver.quit()

    def test_hover(self):
        # 演练环境
        self.driver.get("https://vip.ceshiren.com/#/ui_study/action_chains2")
        time.sleep(2)
        title = self.driver.find_element(By.CSS_SELECTOR, '.title')
        ActionChains(self.driver).move_to_element(title).perform()
        options = self.driver.find_element(By.CSS_SELECTOR,'.options>div:nth-child(1)')
        ActionChains(self.driver).click(options).perform()
        time.sleep(5)

滚轮/滚动操作

• 滚动到元素
• 根据坐标滚动
• 注意： selenium 版本需要在 4.2 之后

滚轮/滚动操作-滚动到元素

• scroll_to_element(WebElement对象):滚动到某个元素

class TestScrollDemo:

    def setup_class(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(3)

    def teardown_class(self):
        self.driver.quit()
    
    def test_scoll_to_element(self):
        # 演练环境  
        self.driver.get("https://ceshiren.com/")
        # 4.2 之后才提供这个方法
        ele = self.driver.find_element\
        (By.XPATH, "//*[text()='怎么写高可用集群部署的测试方案？']")
        ActionChains(self.driver).scroll_to_element(ele).perform()
        time.sleep(5)

滚轮/滚动操作-根据坐标滚动

• scroll_by_amount(横坐标, 纵坐标)

class TestScrollDemo:

    def setup_class(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(3)

    def teardown_class(self):
        self.driver.quit()

    def test_scroll_to_amount(self):
        # 演练环境
        self.driver.get("https://ceshiren.com/")
        # 4.2 之后才提供这个方法
        ActionChains(self.driver).scroll_by_amount(0, 10000).perform()
        time.sleep(5)

#多窗⼜处理与⽹页frame

自动化关键数据记录

什么是关键数据

• 代码的执行日志
• 代码执行的截图
• page source（页面源代码）

记录关键数据的作用

2. 可以作为bug依据|
   |截图|1. 断言失败或成功截图
   2.异常截图达到丰富报告的作用
3. 可以作为bug依据|
   |page source|1. 协助排查报错时元素当时是否存在页面上|

行为日志记录

• 日志配置
• 脚本日志级别
  • debug记录步骤信息
  • info记录关键信息，比如断言等

行为日志记录

# 日志配置
import logging
# 创建logger实例
logger = logging.getLogger('simple_example')
# 设置日志级别
logger.setLevel(logging.DEBUG)
# 流处理器
ch = logging.StreamHandler()
ch.setLevel(logging.DEBUG)
# 日志打印格式
formatter = logging.Formatter\
('%(asctime)s - %(name)s - %(levelname)s - %(message)s')
# 添加格式配置
ch.setFormatter(formatter)
# 添加日志配置
logger.addHandler(ch)

# 日志与脚本结合
class TestDataRecord:
    def setup_class(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(3)
    
    def teardown_class(self):
        self.driver.quit()

    def test_log_data_record(self):
        # 实例化self.driver
        search_content = "霍格沃兹测试开发"
        # 打开百度首页
        self.driver.get("https://www.sogou.com/")
        logger.debug("打开搜狗首页")
        # 输入霍格沃兹测试学院
        self.driver.find_element(By.CSS_SELECTOR, "#query").\
        send_keys(search_content)
        logger.debug(f"搜索的内容为{search_content}")
        # 点击搜索
        self.driver.find_element(By.CSS_SELECTOR, "#stb").click()
        # 搜索结果
        search_res = self.driver.find_element(By.CSS_SELECTOR, "em")
        logger.info(f"搜索结果为{search_res.text}")
        assert search_res.text == search_content

步骤截图记录

• save_screenshot(截图路径+名称)
• 记录关键页面
  • 断言页面
  • 重要的业务场景页面
  • 容易出错的页面

# 调用save方法截图并保存保存在当前路径下的images文件夹下
driver.save_screenshot('./images/search1.png')

page_source记录

• 使用page_source属性获取页面源码
• 在调试过程中，如果有找不到元素的错误可以保存当时的page_source调试代码

# 在报错行前面添加保存page_source的操作
with open("record.html", "w", encoding="u8") as f:
    f.write(self.driver.page_source)

Web自动化测试之复用浏览器

复用浏览器简介

为什么要学习复用浏览器

• 自动化测试过程中，存在人为介入场景
• 提高调试UI自动化测试脚本效率

复用已有浏览器-配置步骤

1. 需要退出当前所有的谷歌浏览器（特别注意）
2. 输入启动命令，通过命令启动谷歌浏览器
3. 找到 chrome 的启动路径（下一页 ppt）
4. 配置环境变量（下一页 ppt）
5. 验证是否启动成功

• windows：chrome –remote-debugging-port=9222
• mac：Google Chrome –remote-debugging-port=9222

windows 环境变量配置：1. 获取启动路径

windows 环境变量配置：2. 配置环境变量

windows 环境变量配置：3. 重启命令行

windows关闭谷歌浏览器进程

复用已有浏览器-代码设置（Python）

from selenium.webdriver.chrome.options import Options
option = Options()
option.debugger_address = "localhost:9222"
self._driver = webdriver.Chrome(options=option)
self._driver.get("https://work.weixin.qq.com/wework_admin/frame")

复用浏览器实战演示1

• 问题1：企业微信登录无法通过输入用户名密码的方式解决登录问题，后面所有的脚本都无法执行。
• 解决方案： 通过remote复用浏览器人工登录企业微信。后面的脚本自动执行

复用浏览器实战演示2

• 问题2：编写自动化测试脚本过程中，用例的某一步骤出现问题。调试时需要将此步骤前面所有的步骤执行完成之后再复现调试。
• 解决方案：使用复用浏览器的方式跳过前面的自动化执行步骤，轻松复现出问题的场景，只对问题行代码进行调试。

Web自动化测试之Cookie登录

cookie 是什么

• Cookie 是一些认证数据信息,存储在电脑的浏览器上
• 当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息

为什么要使用Cookie自动化登录

• 复用浏览器仍然在每次用例开始都需要人为介入
• 若用例需要经常执行，复用浏览器则不是一个好的选择
• 大部分cookie的时效性都很长，扫一次可以使用多次

思路

常见问题

1. 企业微信cookie有互踢机制。在获取cookie成功之后。不要再进行扫码操作！！！！
2. 获取cookie的时候，即执行代码获取cookie时，一定要确保已经登录
3. 植入cookie之后需要进入登录页面，刷新验证是否自动登录成功。

代码（Python）

• 获取 cookie driver.get_cookies()
• 添加 cookie driver.add_cookie(cookie)

class TestCookieLogin:
    def setup_class(self):
        self.drvier = webdriver.Chrome()

    def test_get_cookies(self):
        # 1. 访问企业微信主页/登录页面
        self.drvier.get("https://work.weixin.qq.com/wework_admin/frame#contacts")
        # 2. 等待20s，人工扫码操作
        time.sleep(20)
        # 3. 等成功登陆之后，再去获取cookie信息
        cookie = self.drvier.get_cookies()
        # 4. 将cookie存入一个可持久存储的地方，文件
        # 打开文件的时候添加写入权限
        with open("cookie.yaml", "w") as f:
            # 第一个参数是要写入的数据
            yaml.safe_dump(cookie, f)

    def test_add_cookie(self):
        # 1. 访问企业微信主页面
        self.drvier.get("https://work.weixin.qq.com/wework_admin/frame#contacts")
        # 2. 定义cookie，cookie信息从已经写入的cookie文件中获取
        cookie = yaml.safe_load(open("cookie.yaml"))
        # 3. 植入cookie
        for c in cookie:
            self.drvier.add_cookie(c)
        time.sleep(3)
        # 4.再次访问企业微信页面，发现无需扫码自动登录，而且可以多次使用
        self.drvier.get("https://work.weixin.qq.com/wework_admin/frame#contacts")

yaml相关依赖

<properties>
  <!--对应解析-->
  <jackson.version>2.13.1</jackson.version>
</properties>

<dependencies>
  <!--        yaml文件解析-->
  <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>${jackson.version}</version>
  </dependency>
  <dependency>
      <groupId>com.fasterxml.jackson.dataformat</groupId>
      <artifactId>jackson-dataformat-yaml</artifactId>
      <version>${jackson.version}</version>
  </dependency>
</dependencies>

selenium 多浏览器处理

多浏览器测试概述

• 是跨不同浏览器组合验证网站或 web 应用程序功能的过程
• 是兼容性测试的一个分支，用于保持功能和质量的一致性
• 适用于面向客户的网站和组织内部使用的站点

多浏览器的实现方案

pytest hook 函数

• pytest_addoption 添加命令行参数组/命令行参数
• pytest_configure 解析命令行选项，每个插件都会用到这个hook函数

pytest_addoption 与 pytest_configure

• pytest_addoption：
  1. parser.getgroup 创建/获取组名
  2. addoption 添加一个命令行选项
• pytest_configure:
  1. 通过config 对象的getoption()方法获取命令行参数
  2. 将命令行获取到的内容赋值给变量

pytest_addoption 与 pytest_configure代码示例

def pytest_addoption(parser):
    # group 将下面所有的 option都展示在这个group下。
    mygroup = parser.getgroup("hogwarts")  
    # 注册一个命令行选项
    mygroup.addoption("--browser",
     # 参数的默认值  
    default='Chrome',
    # 存储的变量 
    dest='browser',  
    # 参数的描述信息
    help='set your browser, \
    such as：Chrome, Firefox, Headless...'  
     )

def pytest_configure(config):
    browser = config.getoption("--browser", default='Chrome')
    tmp = {"browser": browser}
    global_env.append(tmp)

命令行参数处理

1. 通过 pytest_addoption hook 函数，配置命令行参数
2. 通过 pytest_configure 函数，接收命令行参数信息
3. 将参数保存到变量中

global_env = {}
def pytest_addoption(parser):
    # group 将下面所有的 option都展示在这个group下。
    mygroup = parser.getgroup("hogwarts")
    # 注册一个命令行选项
    mygroup.addoption("--browser",
     # 参数的默认值
    default='Chrome',
    # 存储的变量
    dest='browser',
    # 参数的描述信息
    help='set your browser, \
    such as：Chrome, Firefox, Headless...'
     )

def pytest_configure(config):
    browser = config.getoption("browser", default='Chrome')
    browser_conf = {"browser": browser}
    global_env.update(browser_conf)

测试代码

• 通过命令行执行测试用例： pytest 测试用例文件.py --browser="浏览器名称"
• 后续结合 jenkins 实现切换浏览器+持续集成

# test_args.py
from selenium import webdriver
from conftest import global_env
class TestArgs():
    def setup(self):
        self.browser = global_env.get("browser")
        print(self.browser)
        if self.browser == 'Firefox':
            self.driver = webdriver.Firefox(executable_path="/path/to/geckodriver")
        elif self.browser == 'Remote':
            executor_url = "https://selenium-node.hogwarts.ceshiren.com/wd/hub"
            capabilities = {"browserName": "chrome", "browserVersion": "99.0"}
            self.driver = webdriver.Remote(command_executor=executor_url, desired_capabilities=capabilities)
        else:
            self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(5)
        self.driver.maximize_window()

    def test_option(self):
        print("用例")

执行JavaScript脚本

自动化测试中使用JavaScript脚本

使用场景：部分场景使用selenium原生方法无法解决

• 修改时间控件
• 滚动到某个元素
• 其他场景

JavaScript 使用思路

1. 页面调试 js 脚本
2. Selenium执行js

JavaScript调试方法

1. 进入 console 调试
2. js 脚本如果有返回值则会在浏览器返回

JS 脚本-元素操作

• 通过 css 查找元素
  • 点击元素（对应click）
  • input标签对应的值(对应send_keys)
  • 元素的类属性
  • 元素的文本属性

// 百度首页：https://www.baidu.com/
// 修改属性值
document.querySelector("#kw").value = "霍格沃兹测试学院"
// 点击操作
document.querySelector("#su").click()
// 淘宝首页： https://www.taobao.com/ 
// 修改元素的类属性
document.querySelector("#J_SiteNavMytaobao").className\
="site-nav-menu site-nav-mytaobao site-nav-multi-menu J_MultiMenu site-nav-menu-hover"
// 测试人首页：https://ceshiren.com/
// 获取元素内的文本信息
document.querySelector("#ember63").innerText

JS脚本滚动操作

• 页面滚动到底部
• 指定到滚动的位置

document.documentElement.scrollTop=10000
document.querySelector(‘css表达式’).scrollIntoView();

Selenium执行js

• Selenium执行js
  • 调用执行js方法
  • 在 js 语句中添加 return：代码可以获取js的执行结果
  • 结合 find_element 方法

示例代码

直接执行

execute_script(“js脚本”)

获取js执行结果

execute_script(“return js脚本”)

js处理-案例1-展示下拉框

• 案例一：通过属性修改展示下拉框
  • 打开淘宝首页https://www.taobao.com/
  • 修改下拉框属性
  • 点击悬浮框内的选项

def test_select_down():
    driver = webdriver.Chrome()
    driver.implicitly_wait(3)    # 打开网址
    driver.get("https://www.taobao.com/")
    # 修改下拉框属性
    sleep(1)
    driver.execute_script('document.querySelector("#J_SiteNavMytaobao").'
                                'className="site-nav-menu site-nav-mytaobao '
                                'site-nav-multi-menu J_MultiMenu '
                                'site-nav-menu-hover"')
    driver.find_element(By.XPATH, "//*[text()='已买到的宝贝']").click()
    sleep(5)
    driver.quit()

js处理-案例2-时间控件

• 案例二：通过属性修改时间控件的值
  • 打开12306网站
  • 修改时间控件值
  • 打印出发日期

示例代码-Python

def test_data_time():
    # 打开网址
    driver = webdriver.Chrome()
    driver.implicitly_wait(3)
    driver.get("https://www.12306.cn/index/")
    sleep(1)
    # 修改出发日期
    driver.execute_script('document.querySelector("#train_date").value="2022-12-22"')
    sleep(1)
    # 打印出发日期， 返回值的使用
    train_data = driver.execute_script('return document.querySelector("#train_date").value')
    print(train_data)
    sleep(3)

selenium option 常用操作

headless无头浏览器使用

Options概述

• 是一个配置浏览器启动的选项类，用于自定义和配置Driver会话
• 常见使用场景：
  • 设置无头模式:不会显示调用浏览器，避免人为干扰的问题。
  • 设置调试模式:调试自动化测试代码（浏览器复用）

添加启动配置(arguments)-Python版本

• 无头模式： --headless
• 窗体最大化 start-maximized
• 指定浏览器分辨率 window-size=1920x3000

from selenium import webdriver
from selenium.webdriver.common.by import By
def test_chrome_pref():
    options = webdriver.ChromeOptions()
    # 无头模式
    options.add_argument('--headless')
    # 窗体最大化
    options.add_argument('start-maximized')
    # 指定浏览器分辨率
    options.add_argument('window-size=1920x3000')
    driver = webdriver.Chrome(chrome_options=options)
    # 打开测试人页面
    driver.get("https://ceshiren.com/")
    # 点击登录
    login_button_text = driver.find_element(By.CSS_SELECTOR, ".login-button").text
    print(login_button_text)  #打印：登录
    driver.quit()

capability 配置参数解析与分布式运行

capability概述

• Capabilities是WebDriver支持的标准命令之外的扩展命令(配置信息)
• 配置web驱动的属性，如浏览器名称、浏览器平台等。
• 结合Selenium Grid完成分布式、兼容性等测试
• 官网地址： https://www.selenium.dev/zh-cn/documentation/webdriver/capabilities/shared/

capability 使用示例-Python

import time
from selenium import webdriver
from selenium.webdriver.common.by import By


def test_ceshiren():
    # 切换成 windows 就会报错
    capabilities = {"browserName":"chrome","platformName":"mac"}
    # 通过 desired_capabilities 添加配置信息
    driver = webdriver.Chrome(desired_capabilities=capabilities)
    driver.implicitly_wait(5)
    driver.get("https://ceshiren.com/")
    text = driver.find_element(By.CSS_SELECTOR, ".login-button").text
    print(text) #打印：登录
    time.sleep(30)
    driver.quit()

Selenium Grid

• elenium Grid 允许我们在多台机器上并行运行测试，并集中管理不同的浏览器版本和浏览器配置（而不是在每个单独的测试中）。
• 官网地址：Grid | Selenium

演示环境

• 学院搭建的演示环境：Selenium Grid
• （搭建教程会在 docker 章节讲解）

1. 保证本地可以正常调通
2. 实例化Remote()类并添加相应的配置

• 远程地址
• 设备配置

代码示例-Python

def test_ceshiren2():
    hogwarts_grid_url = "https://selenium-node.hogwarts.ceshiren.com/wd/hub"
    capabilities = {"browserName":"chrome","browserVersion":"101.0"}
    # 配置信息
    # 实例化Remote，获取可以远程控制的driver实例对象
    # 通过 command_executor 配置selenium hub地址
    # 通过 desired_capabilities 添加配置信息
    driver = webdriver.Remote(
        command_executor=hogwarts_grid_url,
        desired_capabilities=capabilities)
    driver.implicitly_wait(5)
    driver.get("https://ceshiren.com/")
    text = driver.find_element(By.CSS_SELECTOR, ".login-button").text
    print(text)
    time.sleep(3)
    driver.quit()

Playwright 自动化测试框架

Playwright 简介

• Web 自动化测试框架。
• 跨平台多语言支持。
• 支持 Chromium、Firefox、WebKit 等主流浏览器自动化操作。

Playwright 的优点

• 支持所有流行的浏览器。
• 速度更快，更可靠的执行。
• 更强大的自动化测试配置。
• 强大的工具库：Codegen、Playwright inspector、Trace Viewer。

Playwright 与 selenium 对比

Playwright 核心工具

• Codegen：通过记录你的操作来生成测试。 将它们保存为任何语言。
• Playwright inspector： 检查页面、生成选择器、逐步执行测试、查看点击点、探索执行日志。
• Trace Viewer：捕获所有信息以调查测试失败。 Playwright 跟踪包含测试执行截屏、实时 DOM 快照、动作资源管理器、测试源等等。

Playwright 环境安装

• 安装 playwright 插件
  • pip install pytest-playwright
• 安装所需的浏览器
  • playwright install

Codegen

设定展示窗口大小

playwright codegen --viewport-size=800,600 地址

指定设备

playwright codegen --device=“iPhone 11” 地址

Codegen-保存登录状态

• 场景：单点登录、验证码问题

保存登录状态

playwright codegen --save-storage=auth.json

加载认证信息

playwright codegen --load-storage=auth.json 地址

Playwright 常用API

Playwright 使用实例

from playwright.sync_api import sync_playwright, expect
def test_playwright():
    # 实例化playwright
    playwright = sync_playwright().start()
    # 打开chrome浏览器,headless默认是True,无头模式,这里设置为False方便查看效果
    browser = playwright.chromium.launch(headless=False)
    # 打开一个窗口页面
    page = browser.new_page()
    # 在当前窗口页面打开测试人网站
    page.goto("https://ceshiren.com/")
    # 定位搜索按钮并点击
    page.locator("#search-button").click()
    # 定位搜索框并输入web自动化
    page.locator("#search-term").fill("web自动化")
    # 使用keyboard.down模拟键盘的enter事件
    page.keyboard.down("Enter")
    # 断言搜索结果
    result = page.locator(".list>li:nth-child(1) .topic-title>span")
    expect(result).to_contain_text("自动化测试")
    # 截图
    page.screenshot(path='screenshot.png')
    # 用例完成后先关闭浏览器
    browser.close()
    # 然后关闭playwright服务
    playwright.stop()

Trace Viewer 简介

Trace Viewer 使用

# trace 在代码中的配置
browser = chromium.launch()
# 实例化一个新的context
context = browser.new_context()
# 设置trace的参数信息
context.tracing.start(screenshots=True, snapshots=True, sources=True)
# 使用context生成的page实例进行对应的操作
page = context.new_page()
# 结束追踪
context.tracing.stop(path = "trace.zip")

打开trace

playwright show-trace trace.zip