用户端Web自动化测试_L4

目录：

  1. selenium多浏览器处理
  2. 执行 javascript 脚本
  3. headless无头浏览器使用
  4. capability配置参数解析
  5. 企业微信实战
  6. cypress测试框架介绍
  7. Playwright测试框架介绍

1.selenium多浏览器处理

多浏览器测试背景

  • 用户使用的浏览器(firefox,chrome,IE 等)
  • web 应用应该能在任何浏览器上正常的工作，这样能吸引更多的用户来使用

 

多浏览器测试概述

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

 多浏览器的实现方案

PlantUML diagram

pytest hook 函数

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

 pytest_addoption 与 pytest_configure

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

代码示例：

def pytest_addoption(parser: Parser):hdc = parser.getgroup("hdc")hdc.addoption("--browser")

 运行结果：

 

代码示例：

conftest.py

from _pytest.config.argparsing import Parserdef pytest_collection_modifyitems(session, config, items: list):print(items)for item in items:item.name = item.name.encode('utf-8').decode('unicode-escape')item._nodeid = item.nodeid.encode('utf-8').decode('unicode-escape')def pytest_addoption(parser:Parser):# group 将下面所有的 option都展示在这个group下。mygroup = parser.getgroup("hdc")# 注册一个命令行选项mygroup.addoption("--browser",# 参数的默认值default='Chrome',# 存储的变量(起别名)dest='wo_shi_bie_ming',# 参数的描述信息help='set your browser,such as：Chrome, Firefox, Headless...')global_env = {}def pytest_configure(config):#使用别名browser = config.getoption("wo_shi_bie_ming", default='Chrome')# browser = config.getoption("--browser", default='Chrome')print(f"通过命令行获取的浏览器为{browser}")tmp = {"browser": browser}global_env.update(tmp)

 test_demo.py

import time
from selenium import webdriver
from web_automation_testing.test_multi_brower.conftest import global_envclass TestSearch:def setup_class(self):self.browser = global_env.get("browser")if self.browser == 'firefox':self.driver = webdriver.Firefox()else:self.driver = webdriver.Chrome()self.driver.maximize_window()self.driver.implicitly_wait(3)def teardown_class(self):self.driver.quit()def test_get(self):self.driver.get("https://www.baidu.com/")time.sleep(2)assert True

运行结果：

  

2.执行 javascript 脚本

JavaScript简介

  • JavaScript 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言
  • 可以嵌入到HTML页面对浏览器事件做出响应
  • 也可以基于Node.js技术进行服务器端编程

自动化测试中使用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 方法

 代码示例：

from time import sleep
from selenium import webdriver
from selenium.webdriver.common.by import Bydef test_select_down():driver = webdriver.Chrome()driver.implicitly_wait(3)driver.maximize_window()# 打开网址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()def test_data_time():# 打开网址driver = webdriver.Chrome()driver.implicitly_wait(3)driver.maximize_window()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)

3.headless无头浏览器使用

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

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

  • 无头模式： --headless
  • 窗体最大化 start-maximized
  • 指定浏览器分辨率 window-size=1920x3000
from selenium import webdriver
from selenium.webdriver.common.by import Bydef 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").textprint(login_button_text)driver.quit()

4.capability配置参数解析

capability概述

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

Selenium Grid

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

  • 官网地址：https://www.selenium.dev/documentation/grid/

PlantUML diagram

 演示环境：https://selenium-node.hogwarts.ceshiren.com/ui#

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

 代码示例：

import time
from selenium import webdriver
from selenium.webdriver.common.by import Bydef test_capabilitie1():# 切换成 windows 就会报错capabilities = {"browserName":"chrome","platformName":"windows"}# 通过 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").textprint(text)time.sleep(30)driver.quit()def test_capabilitie2():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").textprint(text)time.sleep(3)driver.quit()

5.企业微信实战

6.cypress测试框架介绍

cypress简介

  • 基于 JavaScript 的前端测试工具
  • 可以对浏览器中运行的任何内容进行快速、简单、可靠的测试
  • 对每一步操作都支持回看
  • 覆盖了测试金字塔模型的所有测试类型【界面测试，集成测试，单元测试】
  • 底层协议不采用 WebDriver > Cypress官网：https://www.cypress.io/

cypress与selenium对比

项目CypressSelenium
支持语言JavascriptJava, Python, Javascript, Ruby, C#等
支持浏览器Chrome、Electron各种主流浏览器
主要使用者前端开发人员QA
使用的测试框架Mocha无限制
是否需要浏览器驱动器否需要
测试速度快略慢
录制测试视频、快照支持支持，但需要写代码
社区支持略显薄弱强大

 cypress环境部署

  • 安装node.js 官网地址：https://nodejs.org/zh-cn/
  • 安装cypress
    • 初始化项目：npm init
    • 配置淘宝镜像：npm config set registry http://registry.npm.taobao.org
    • 安装cypress：npm install cypress --save-dev
  • 打开cypress
    • npx cypress open

cypress基本用法

  • describe 声明一个测试用例集合
  • beforeEach 测试用例前置操作，相当于setup
  • it 声明一个测试用例
  • cy.get 定位元素，用css定位
  • type 输入文本
  • click 点击操作
  • should 断言

使用vscode装一下插件： 

 

 

npm init

npm install cypress –-save-dev

7.Playwright测试框架介绍

Playwright 简介

  • Playwright 官网：https://playwright.dev/python/docs/intro
  • Web 自动化测试框架。
  • 跨平台多语言支持。
  • 支持 Chromium、Firefox、WebKit 等主流浏览器自动化操作。

 Playwright 的优点

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

Playwright 原理

 

Playwright 与 selenium 对比

项目PlaywrightSelenium
是否需要驱动否需要对应浏览器 webdriver
支持语言Java, Python, JavascriptJava, Python, Javascript, Ruby, C#等
支持浏览器Chrome、Firefox 等Chrome、Firefox 等
通讯方式websocket 双向通讯协议http 单向通讯协议
使用的测试框架无限制(pytest,unittest)无限制(pytest,unittest)
测试速度快慢
录制测试视频、快照支持支持
社区支持微软thoughtworks 公司

 Playwright 核心工具

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

Playwright 环境安装

  • 安装 playwright 插件
    • pip install pytest-playwright
  • 安装所需的浏览器
    • playwright install
  •  官网介绍：https://playwright.dev/python/docs/intro

 Codegen

# 设定展示窗口大小
playwright codegen --viewport-size=800,600 地址
# 指定设备
playwright codegen --device="iPhone 11" 地址
  • 其他参数：https://playwright.dev/python/docs/codegen

  

 Codegen-保存登录状态

  • 场景：单点登录、验证码问题
# 保存登录状态
playwright codegen --save-storage=auth.json
# 加载认证信息
playwright codegen --load-storage=auth.json 地址

 Playwright 常用API  Actions | Playwright Python

常用API含义
start()实例化playwright
chromium().launch()打开chrome浏览器
new_page()打开一个窗口页面
page.goto()跳转到某个地址
page.locator(““)定位某个元素
click()点击元素
fill()输入内容
keyboard().down()键盘事件
screenshot()截图操作

Playwright 使用实例

from playwright.sync_api import sync_playwright, expectdef test_playwright():# 实例化playwrightplaywright = 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='./datas/screenshot/screenshot.png')# 用例完成后先关闭浏览器browser.close()# 然后关闭playwright服务playwright.stop()

Trace Viewer 简介 Trace viewer | Playwright Python

Trace Viewer 使用

from playwright.sync_api import sync_playwright, expectdef test_playwirght_trace():# 实例化一个playwright对象playwright = sync_playwright().start()# 启动谷歌浏览器，模式使用无头模式browser = playwright.chromium.launch(headless=False)# =========== trace 的配置# 1. 生成 一个 context 实例context = browser.new_context()# 2. 添加 trace 的配置信息context.tracing.start(screenshots=True, snapshots=True, sources=True)# 3. 使用填加了trace 配置的 context 实例，去实例化一个page对象page = context.new_page()# 跳转到ceshiren页面page.goto("https://ceshiren.com/")# 点击搜索按钮， 输入css定位page.locator("#search-button").click()# 输入搜索的内容， 输入css定位page.locator("#search-term").fill("appium")# 按下回车键page.keyboard.down("Enter")# time.sleep(3)result = page.locator(".results .item:nth-child(1) .topic-title")expect(result).to_contain_text("appium")# 4. 在关闭浏览器之前，一定要结束tracecontext.tracing.stop(path="./datas/playwirght_trace.zip")browser.close()
  •  # 打开trace  playwright show-trace trace.zip

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/53860.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于黏菌算法优化的BP神经网络（预测应用） - 附代码

基于黏菌算法优化的BP神经网络（预测应用） - 附代码

基于黏菌算法优化的BP神经网络（预测应用） - 附代码 文章目录 基于黏菌算法优化的BP神经网络（预测应用） - 附代码1.数据介绍2.黏菌优化BP神经网络2.1 BP神经网络参数设置2.2 黏菌算法应用 4.测试结果：5.Matlab代码 摘要…
阅读更多...
【算法系列篇】前缀和

【算法系列篇】前缀和

文章目录 前言什么是前缀和算法1.【模板】前缀和1.1 题目要求1.2 做题思路1.3 Java代码实现 2. 【模板】二维前缀和2.1 题目要求2.2 做题思路2.3 Java代码实现 3. 寻找数组的中心下标3.1 题目要求3.2 做题思路3.3 Java代码实现 4. 除自身以外的数组的乘积4.1 题目要求4.2 做题思…
阅读更多...
Android Jetpack Compose中使用字段验证的方法

Android Jetpack Compose中使用字段验证的方法

Android Jetpack Compose中使用字段验证的方法 数据验证是创建健壮且用户友好的Android应用程序的关键部分。随着现代UI工具包Jetpack Compose的引入，处理字段验证变得更加高效和直观。在这篇文章中，我们将探讨如何在Android应用中使用Jetpack Compose进…
阅读更多...
Nacos配置管理服务

Nacos配置管理服务

统一配置管理 功能：对配置文件相同的微服务进行配置文件的统一管理。 统一配置管理是解决场景：普通情况下，多个相同功能的微服务实例，更改配置的话得一个一个更改后重启的情况。 核心配置放在配置管理服务中，启动时…
阅读更多...
MathType7MAC中文版数学公式编辑器下载安装教程

MathType7MAC中文版数学公式编辑器下载安装教程

如今许多之前需要手写的内容都可以在计算机中完成了。以前我们可以通过word输入一些简单的数学公式，但现在通过数学公式编辑器便可以完成几乎所有数学公式的写作。许多简单的数学公式，我们可以使用输入法一个个找到特殊符号并输入，但是对于高…
阅读更多...
JavaScript——为什么静态方法不能调用非静态方法

JavaScript——为什么静态方法不能调用非静态方法

个人简介 👀个人主页： 前端杂货铺 🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展 📃个人状态： 研发工程师，现效力于中国工业软件事业 🚀人生格言： 积跬步…
阅读更多...
【Java并发】聊聊对象内存布局和syn锁升级过程

【Java并发】聊聊对象内存布局和syn锁升级过程

对象存储解析：一个空Object对象到底占据多少内存？ 对象内存布局 Mark Word占用8字节，类型指针占用8个字节，对象头占用16个字节。 好了，我们来看一下一个Object对占用多少空间， 因为java默认是开启压缩…
阅读更多...
C语言：指针和数组(看完拿捏指针和数组)

C语言：指针和数组(看完拿捏指针和数组)

目录 数组名的理解： 一维数组： 解析： 字符数组： 解析： 解析： 字符串数组： 解析： 解析： 一级指针： 解析： 解析： 二维数组&a…
阅读更多...
学习ts（七）泛型

学习ts（七）泛型

定义 泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型，在实例化时作为参数指明这些类型。在ts中，定义函数、接口或类的时候，不预先定义好具体的类型，而在使用的时候在指定类型的一种特性。 例子&#xff…
阅读更多...
MinDoc:针对IT团队的文档、笔记系统

MinDoc:针对IT团队的文档、笔记系统

作为一名IT从业者，无论是在公司团队中，还是在平时自己写一些笔记、博客等文档，我都习惯使用markdown来进行书写。在使用过许多支持markdown语法的系统或软件（如Typora、未知、我来、思源、觅道等）后，我总觉…
阅读更多...
Adobe After Effects软件安装包分享（附安装教程）

Adobe After Effects软件安装包分享（附安装教程）

目录 一、软件简介 二、软件下载 一、软件简介 Adobe After Effects是一款由Adobe公司开发的数字视觉效果和动态影像处理软件，它被广泛应用于电影、电视、广告、游戏等领域。After Effects可以与其他Adobe软件如Photoshop、Illustrator、Premiere等无缝结合&#…
阅读更多...
neo4jd3拓扑节点显示为节点标签（自定义节点显示）

neo4jd3拓扑节点显示为节点标签（自定义节点显示）

需求描述：如下图所示，我的拓扑图中有需要不同类型的标签节点，我希望每个节点中显示的是节点的标签 在官方示例中，我们可以看到，节点里面是可以显示图标的，现在我们想将下面的图标换成我们自定义的内容 那…
阅读更多...
什么是NetDevOps

什么是NetDevOps

NetDevOps 是一种新兴的方法，它结合了 NetOps 和 DevOps 的流程，即将网络自动化集成到开发过程中。NetDevOps 的目标是将虚拟化、自动化和 API 集成到网络基础架构中，并实现开发和运营团队之间的无缝协作。 开发运营（DevOps&…
阅读更多...
SpringCloud教程 | 第六篇: 分布式配置中心(Spring Cloud Config)

SpringCloud教程 | 第六篇: 分布式配置中心(Spring Cloud Config)

在上一篇文章讲述zuul的时候，已经提到过，使用配置服务来保存各个服务的配置文件。它就是Spring Cloud Config。 一、简介 在分布式系统中，由于服务数量巨多，为了方便服务配置文件统一管理，实时更新，所以需…
阅读更多...
【UE5：CesiumForUnreal】——3DTiles数据属性查询和单体高亮

【UE5：CesiumForUnreal】——3DTiles数据属性查询和单体高亮

目录 0.1 效果展示 0.2 实现步骤 1 数据准备 2 属性查询 2.1 射线检测 2.2 获取FeatureID 2.3 属性查询 2.4 属性显示 3 单体高亮 3.1 构建材质参数集 3.2 材质参数设置 3.3 添加Cesium Encode Metadata插件 3.4 从纹理中取出特定FeatureId属性信息 3.5 创建…
阅读更多...
UE4 材质学习笔记

UE4 材质学习笔记

CheapContrast与CheapContrast_RGB都是提升对比度的，一个是一维输入，一个是三维输入，让亮的地方更亮，暗的地方更暗，不像power虽然也是提升对比度，但是使用过后的结果都是变暗或者最多不变（值为1…
阅读更多...
Fedora Linux 的家族（三）：实验室

Fedora Linux 的家族（三）：实验室

导读本文将对 Fedora Linux 实验室版本进行更详细的介绍。 根据个人需求，每个人使用计算机的方式都不同。你可能是一位设计师，需要在计算机上安装各种设计软件。或者你可能是一位游戏玩家，所以需要一个支持你喜欢的游戏的操作系统。有时候我们…
阅读更多...
骨传导耳机哪款比较好，几款骨传导耳机品牌推荐

骨传导耳机哪款比较好，几款骨传导耳机品牌推荐

相对于传统耳机，骨传导耳机的佩戴方式更加舒适。传统耳机需要插入耳道，可能会造成不适甚至痛感，而骨传导耳机则不需要直接接触耳朵，大大提高了佩戴的舒适度。并且骨传导耳机可以实现外界环境的感知。传统耳机会将耳朵与外界隔绝&a…
阅读更多...
centos7设置静态IP地址

centos7设置静态IP地址

安装完成系统后，接下来就是配置静态IP地址，如下： 进入编辑模式vim /etc/sysconfig/network-scripts/ifcfg-ens33 文件名不一定是ifcfg-ens33，到/etc/sysconfig/network-scripts下面找下是哪个文件 修改 ： BOOTPROTO…
阅读更多...
在驱动中创建sysfs接口、procfs接口、debugfs接口

在驱动中创建sysfs接口、procfs接口、debugfs接口

前言 在一些linux开发板中，经常可以看到通过echo的方式来直接控制硬件或者修改驱动，例如： //灯灭 echo 0 >/sys/class/leds/firefly:blue:power/brightness //灯亮 echo 1 >/sys/class/leds/firefly:blue:power/brightness 这是怎么…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023