端对端 自动化单元测试

最新推荐文章于 2024-05-15 16:21:45 发布
最新推荐文章于 2024-05-15 16:21:45 发布
阅读量920 收藏 1
点赞数
分类专栏： 前端领域 javascript 文章标签： 自动化 单元测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/swe_ling/article/details/126463729
版权

端对端 自动化单元测试

  1. W3C WebDriver 标准
  2. 自动化启动浏览器、开启Tab页
    1. 测试单元用例
  3. 输出结果

浏览器自动化提要

W3C WebDriver API. 标准

浏览器 OpenApi ： https://www.w3.org/TR/webdriver1/#list-of-endpoints

各浏览器 OpenApi 的实现

以下为各厂家对于浏览器 OpenApi的实现

https://www.selenium.dev/documentation/webdriver/getting_started/install_drivers/

BrowserSupported OSMaintained byDownloadIssue Tracker
Chromium/ChromeWindows/macOS/LinuxGoogleDownloadsIssues
FirefoxWindows/macOS/LinuxMozillaDownloadsIssues
EdgeWindows/macOSMicrosoftDownloadsIssues
Internet ExplorerWindowsSelenium ProjectDownloadsIssues
SafarimacOS High Sierra and newerAppleBuilt inIssues

Chrome 为例

针对 不同的版本，具有不同的浏览器驱动，需要查看当前浏览器版本，再下载对应版本的驱动

如： 当前 Chrome 已是最新版本 版本 104.0.5112.101（正式版本） (arm64)

从下载地址（https://chromedriver.chromium.org/downloads）

下载对应一下版本号的的驱动即可

JS 模块 抹平各浏览的差异

JS模块是对于Api的使用且已经抹平各浏览器厂家API的差异

webdriver

https://www.npmjs.com/package/webdriver

npm i webdriver

WebdriverIO

https://www.npmjs.com/package/webdriverio

npm install webdriverio

selenium-webdriver

https://www.npmjs.com/package/selenium-webdriver

# 安装JS驱动
npm install selenium-webdriver

WebBriver 服务

本地服务

const { Builder } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

/**
 * 获取驱动服务
 * 浏览器驱动启动后，会挂载到一个端口上我们可以通过HTTP服务访问、操作浏览器
 */
const service = new chrome.ServiceBuilder('/Users/shang/Code/github/webdriver/chromedriver');
// 获取Chrome浏览器配置
const options = new chrome.Options();
// 浏览器参数设置
const arguments = [
  '--disable-web-security', // 关闭浏览器安全设置，如：浏览器跨域
  '--incognito',            // 使用隐身模式
  '--user-data-dir=/Users/shang/Downloads/chromeincognito' // 设置当前用户的工作目录
]
options.addArguments.apply(options, arguments);

(async () => {

const driver = await new Builder()
  .setChromeOptions(options)
  .forBrowser('chrome')
  .setChromeService(service)
  .build();

driver.getSession()
await driver.manage().setTimeouts({ implicit: 500 });

// 退出浏览器
// driver.quit()

})();

远端服务

启动远端服务
➜  webdriver ls
chromedriver      index.js          node_modules      package-lock.json package.json
➜  webdriver ./chromedriver
Starting ChromeDriver 104.0.5112.79 (3cf3e8c8a07d104b9e1260c910efb8f383285dc5-refs/branch-heads/5112@{#1307}) on port 9515
Only local connections are allowed.
Please see https://chromedriver.chromium.org/security-considerations for suggestions on keeping ChromeDriver safe.
ChromeDriver was started successfully.

添加IP白名单

➜  webdriver ./chromedriver --allowed-ips='0.0.0.0'
Starting ChromeDriver 104.0.5112.79 (3cf3e8c8a07d104b9e1260c910efb8f383285dc5-refs/branch-heads/5112@{#1307}) on port 9515
Remote connections are allowed by an allowlist (0.0.0.0).
Please see https://chromedriver.chromium.org/security-considerations for suggestions on keeping ChromeDriver safe.
ChromeDriver was started successfully.

其他配置

➜  webdriver ./chromedriver --help
Usage: ./chromedriver [OPTIONS]

Options
  --port=PORT                     port to listen on
  --adb-port=PORT                 adb server port
  --log-path=FILE                 write server log to file instead of stderr, increases log level to INFO
  --log-level=LEVEL               set log level: ALL, DEBUG, INFO, WARNING, SEVERE, OFF
  --verbose                       log verbosely (equivalent to --log-level=ALL)
  --silent                        log nothing (equivalent to --log-level=OFF)
  --append-log                    append log file instead of rewriting
  --replayable                    (experimental) log verbosely and don't truncate long strings so that the log can be replayed.
  --version                       print the version number and exit
  --url-base                      base URL path prefix for commands, e.g. wd/url
  --readable-timestamp            add readable timestamps to log
  --enable-chrome-logs            show logs from the browser (overrides other logging options)
  --allowed-ips=LIST              comma-separated allowlist of remote IP addresses which are allowed to connect to ChromeDriver
  --allowed-origins=LIST          comma-separated allowlist of request origins which are allowed to connect to ChromeDriver. Using `*` to allow any host origin is dangerous!
调用远端服务
const { Builder } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

/**
 * 获取驱动服务
 * 浏览器驱动启动后，会挂载到一个端口上我们可以通过HTTP服务访问、操作浏览器
 */
// const service = new chrome.ServiceBuilder('/Users/shang/Code/github/webdriver/chromedriver');
// 获取Chrome浏览器配置
const options = new chrome.Options();
// 浏览器参数设置
const arguments = [
  '--disable-web-security', // 关闭浏览器安全设置，如：浏览器跨域
  '--incognito',            // 使用隐身模式
  '--user-data-dir=/Users/shang/Downloads/chromeincognito' // 设置当前用户的工作目录
]
options.addArguments.apply(options, arguments);

(async () => {

const driver = await new Builder()
  .usingServer("http://127.0.0.1:9515")
  .setChromeOptions(options)
  .forBrowser('chrome')
//  .setChromeService(service)
  .build();

driver.getSession()
await driver.manage().setTimeouts({ implicit: 500 });

// 退出浏览器
// driver.quit()

})();

配置端到端准备

以 selenium-webdriver 为例

安装依赖

浏览器安装

略过，chrome , Firefox, Edge

安装浏览器驱动

根据浏览器下载驱动

Chrome 安装

下载地址： https://chromedriver.chromium.org/downloads

104 版本平台区分

Linux: https://chromedriver.storage.googleapis.com/104.0.5112.79/chromedriver_linux64.zip

Mac64: https://chromedriver.storage.googleapis.com/104.0.5112.79/chromedriver_mac64.zip

Mac64M1: https://chromedriver.storage.googleapis.com/104.0.5112.79/chromedriver_mac64_m1.zip

配置

# 创建工作目录
npm inint -y 
# 安装 selenium-webdriver ，当前为 4.4.0 版本
npm install --save-dev selenium-webdriver

示例：启动浏览器

Chrome 浏览器相关的参数，

https://blog.csdn.net/swe_ling/article/details/125811499?spm=1001.2014.3001.5502

const { Builder } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

/**
 * 获取驱动服务
 * 浏览器驱动启动后，会挂载到一个端口上我们可以通过HTTP服务访问、操作浏览器
 */
const service = new chrome.ServiceBuilder('/Users/shang/Code/github/webdriver/chromedriver');
// 获取Chrome浏览器配置
const options = new chrome.Options();
// 浏览器参数设置
const arguments = [
  '--disable-web-security', // 关闭浏览器安全设置，如：浏览器跨域
  '--incognito',            // 使用隐身模式
  '--user-data-dir=/Users/shang/Downloads/chromeincognito' // 设置当前用户的工作目录
]
options.addArguments.apply(options, arguments);

(async () => {

const driver = await new Builder()
  .setChromeOptions(options)
  .forBrowser('chrome')
  .setChromeService(service)
  .build();

driver.getSession()
await driver.manage().setTimeouts({ implicit: 500 });

// 退出浏览器
// driver.quit()

})();

功能操作

打开浏览器

打开浏览器或者 Tab 页

https://www.selenium.dev/documentation/webdriver/browser/windows/

driver.switchTo().newWindow()

创建多个Window

// 打开并切换到新的窗口
const windowHandle = await driver.switchTo().newWindow('window');
await driver.navigate().to('http://0.0.0.0:80') 
// 打开并切换到新的窗口
const otherWindowHandle = await driver.switchTo().newWindow('window');
await driver.navigate().to('http://0.0.0.0:8080')
... ...

// 切换到 windowHandle 窗口
driver.switchTo().window(windowHandle);
// 切换到 otherWindowHandle 窗口
driver.switchTo().window(otherWindowHandle);

多个Tab页操作

创建新的Tab页，打开指定链接，并返回该Tab页的操作 句柄 （Tab标识符）

https://www.selenium.dev/documentation/webdriver/browser/windows/#switching-windows-or-tabs

async function getTap (url) {
  await driver.switchTo().newWindow()
  await driver.navigate().to(url)
  const qqlWindowHandle = await driver.getWindowHandle();
  return qqlWindowHandle
}

完整示例

// index.js 

const { Builder } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

/**
 * 获取驱动服务
 * 浏览器驱动启动后，会挂载到一个端口上我们可以通过HTTP服务访问、操作浏览器
 */
const service = new chrome.ServiceBuilder('/Users/shang/Code/github/webdriver/chromedriver');
// 获取Chrome浏览器配置
const options = new chrome.Options();

options.setChromeLogFile('/Users/shang/Downloads/chrome.log');
// 
const arguments = [
  '--disable-web-security', // 关闭浏览器安全设置，如：浏览器跨域
  // '--incognito', // 使用隐身模式
  // '--user-data-dir=/Users/shang/Downloads/chromeincognito' // 设置当前用户的工作目录
]
options.addArguments.apply(options, arguments);

(async () => {

// 创建一个浏览器驱动
const driver = await new Builder()
  .setChromeOptions(options)
  .forBrowser('chrome')
  .setChromeService(service)
  .build()

async function getTap (url) {
  await driver.switchTo().newWindow()
  await driver.navigate().to(url)
  const qqlWindowHandle = await driver.getWindowHandle();
  return qqlWindowHandle
}

const qqWindowHandle = await getTap('https://www.qq.com')
const baiduWindowHandle = await getTap('https://www.baidu.com')

// 等待2秒
await new Promise((resolve) => { setTimeout(resolve, 2000) })
// 切换到 QQ 所在窗口
await driver.switchTo().window(qqWindowHandle);
// 执行JavaScript方法 所在窗口
await driver.executeScript(function (handle) {
  console.log('output handle qq', handle, window.document.title)
}, qqWindowHandle)

// 等待2秒
await new Promise((resolve) => { setTimeout(resolve, 2000) })
// 切换到 百度 所在窗口
await driver.switchTo().window(baiduWindowHandle);
// 执行JavaScript方法 所在窗口
await driver.executeScript(function (handle) {
  console.log('output handle baidu', handle, window.document.title)
}, qqWindowHandle)

await new Promise((resolve) => { setTimeout(resolve, 2000) })

// 退出浏览器
driver.quit()

})();

执行测试任务

node index.js

示例日志结果

[12369:259:0822/115042.778808:INFO:CONSOLE(306)] "每一个星球都有一个驱动核心，
每一种思想都有影响力的种子。
感受世界的温度，
年轻的你也能成为改变世界的动力，
百度珍惜你所有的潜力。
你的潜力，是改变世界的动力！

", source: https://pss.bdstatic.com/r/www/cache/static/protocol/https/global/js/all_async_search_098edf7.js (306)
[12369:259:0822/115042.778926:INFO:CONSOLE(306)] "%c百度2022校园招聘简历投递：https://talent.baidu.com/external/baidu/campus.html color:red", source: https://pss.bdstatic.com/r/www/cache/static/protocol/https/global/js/all_async_search_098edf7.js (306)
[12369:259:0822/115046.448069:INFO:CONSOLE(4)] "output handle qq CDwindow-2F3C312D42DF8A638BA8C5322A85B541 腾讯首页", source:  (4)
[12369:259:0822/115049.493448:INFO:CONSOLE(4)] "output handle baidu CDwindow-2F3C312D42DF8A638BA8C5322A85B541 百度一下，你就知道", source:  (4)

抛砖引玉

实现自动化测试

  1. 把要使用的方法通过 Demo 挂载到全局。

  2. 实现多用户多场景登录。

    1. 多tab页，
    2. 多window窗口，
    3. 多浏览器，
    4. 多设备，[ WebDriver Remote Server ]

  3. 通过调用 Demo 上挂载的 全局变量 实现具体的功能操作。

从未、淡定
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Wireguard简易场景配置详解
zhangzhibo921的博客
11-07 1495
AllowedIPs = 192.168.2.0/24 #这里填目标路由网段，客户端访问这个内网网段的流量会走隧道。Endpoint = 113.87.118.169 :45678 #这里填服务端的公网IP和映射出来的端口号。Address = 10.0.0.1/24 #这里是填服务器的虚拟网卡【wg0】的地址，走隧道流量用的。AllowedIPs = 10.0.0.2/24 #这里填客户端的虚拟网卡的IP地址。Address = 10.0.0.2/24 #这里填客户端的IP。
浅谈自动化单元测试
ubisectech的博客
04-05 2297
用自动化单元测试的方式，研发人员在用例设计、执行和数据管理上不需要再花费巨量的时间，就可能有足够的精力来真正进行和完成单元测试内容。
一文讲透彻selenium
软件测试技术的博客
07-08 2432
2004年在 ThoughtWorks 公司，一个叫做 Jason Huggins 为了减少手工测试的工作，自己写了一套 的库，这套库可以进行页面交互，并且可以重复的在不同浏览器上进行重复的测试操作。 这套库后来变为了 Selenium Core，为Selenium Remote Control (RC) 和 Selenium IDE提供了坚实的核心基础能力。[1]Selenium Core是第一个工具。但是，由于同源政策，Selenium Core在跨域测试方面遇到了障碍。同源策略禁止JavaScrip
Selenium用法(python版+java版)
最新发布
lrclrk的博客
05-15 216
查看Chrome浏览器版本：chrome://version/爬取京东首页商品信息。爬取京东首页商品信息。
.NetCore + Selenium IIS 部署踩坑记
baidu_27598031的博客
08-05 261
Selenium IIS 部署
无头浏览器ChromeDriver安装,java 使用 driver 网页截图
weixin_41690497的博客
03-29 1757
Win环境 安装 chromedriver 下载地址：https://npm.taobao.org/mirrors/chromedriver/。 解压chromedriver.exe 文件到自己的目录 ubuntu环境 1、下载文件，通常在 Downloads 目录下： wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb 2、安装应用： sudo dpkg -i google-chro
springboot+webmagic+ChromeDriver
stateCelebrateking的专栏
12-10 1287
版本不一致，更换新的版本。
前端自动化测试
阿星君
06-16 772
前端测试 编写测试代码的好处： 更快的发现bug，让绝大多数bug在开发阶段发现，提高产品质量 单元测试，通过运行测试代码，观察输入和输出，有时会比注释更让人理解你的代码。 有利于代码重构，如果一个项目的测试代码写的比较完善，重构过程中改动时可以迅速的通过测试代码是否通过检查来查看重构是否正确，提高重构效率。 编写测试代码的过程，可以让开发人员深入思考业务流程，让代码写的更加完善和规范。 缺点： 并不是所有的项目都需要前端测试，写测试代码是需要花费一定时间的，当项目比较简单的时候，花时间写测试代
web端自动化基础xpath.docx
01-06
### Web端自动化基础XPath知识点详解 #### 一、自动化测试的重要性及方向 1. **自动化测试的意义**： - **提高效率**：自动化测试能够快速执行大量测试用例，节省人力成本。 - **增强准确性**：减少人为因素导致...
web端自动化化测试
10-10
Web端自动化测试是现代软件开发过程中不可或缺的一部分，特别是在大型项目中，手动测试的效率和准确性往往无法满足需求。本资料集是面向初学者的一份教程，旨在引导学习者掌握基于Selenium + Python3 + Unittest + ...
自动化面试题，提高测试效率、减少人力成本
06-29
例如，Selenium用于Web应用的自动化测试，Appium支持移动应用的跨平台测试，而JUnit则广泛应用于Java应用的单元测试。每个工具都有其特性和适用场景，需根据项目需求进行选择。 4. **测试用例设计**：编写覆盖正常...
博客中移动端自动化测试的对应安装包
09-08
这个压缩包"博客中移动端自动化测试的对应安装包"提供了一系列必要的工具，帮助开发者和测试工程师进行高效、准确的移动端自动化测试。 首先，让我们详细了解每个组件： 1. **JDK 1.8**：Java Development Kit ...
对单元测试的回顾1
08-08
- 数据层的单元测试则位于服务器端工程的`Server`目录下的`src/test/java/IntegrateTest`包内。这部分测试关注的是数据访问和持久化，通常涉及数据库操作。`dataTest`类用于测试数据实现（dataImpl），比如`...
树莓派-搭建wireguard服务
专注嵌入式系统开发
07-30 1439
树莓派网络工具Wireguard介绍及虚拟专用网络搭建。
Wireguard笔记(三) lan-to-lan子网穿透和多网段并存
IOsetting的专栏
09-26 5762
目录 Wireguard笔记(一) 节点安装配置和参数说明Wireguard笔记(二) 命令行操作Wireguard笔记(三) lan-to-lan子网穿透和多网段并存 多 Wireguard 服务并存 可以在/etc/wireguard/下创建多个配置文件, 例如wg0.conf, wg1.conf配置多个服务 分别使用systemctl enable/start wg-quick@wg0,......
Wireguard笔记
IOsetting的专栏
12-25 1943
简介 虚拟子网软件，类似于OpenWPN，使用虚拟网卡，但是只支持UDP协议连接，配置简单。在Kernel 5.6之后已经内置。 中继服务器 作为中继服务器(Bounce Server)，和普通的对等节点一样，它能够在 NAT 后面的客户端之间充当中继服务器，可以将收到的任何子网流量转发到正确的对等节点，这个过程并非由WireGuard处理，而是由系统内核和iptables处理的。公网可达的子网...
Wireguard配置文件详解
衡水铁头哥的博客
03-02 3987
正文共：1888 字 10 图，预估阅读时间：2 分钟我们前面在介绍Wireguard时（使用8条命令即可完成的VPN配置！CentOS快速配置WireGuard全互联组网），Linux系统下是通过命令配置的，格式如下：wg set wg0 peer ZTwqy6eA2exFjIp4Gqll57FFu99ND97wRCkPv0ZNGVU= allowed-ips 10.1.1.2/32 endpo...
Python爬虫第一章（图片爬取与API接口爬取）
Du_XiaoNan的博客
03-09 2081
在当今信息爆炸的数字时代，数据的获取和处理变得日益重要。本篇博客旨在为读者提供一扇窗口，透过它可以看到爬虫技术的神奇世界。从数据采集的基础知识到高级应用，我们将揭示爬虫如何使数据获取变得简单、高效，并且功能强大。无论您是初学者还是在寻求深化理解，都可以在这里找到您所需要的知识。让我们一起开始这趟知识之旅，解锁爬虫给我们的日常生活和工作带来的无限可能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

从未、淡定

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值