前端快速入门Web自动化测试框架Senlenium训练手册

www.selenium.dev/zh-cn/

Senlenium框架能够原生地驱动浏览器,就如同用户亲自操作一样。

Senlenium框架支持6种编程语言,Java、Python、C#、Ruby、JavaScript、Kotlin。

我们当然是选用 JavaScript , 驱动浏览器编程偏向后端,需要Node.js环境。

1.准备环境

  • node -v v20.10.0
  • pnpm -v 8.15.4
  • pnpm i selenium-webdriver 安装 selenium-webdriver模块
  • 现代浏览器firefox、chrome

S1.测试靶向网站访问截图

靶向目标网址:2020wa.com/py/t1.html

关键自动化操作:输入用户名、密码、点击登录按钮、点击弹窗按钮、点击确定/取消、屏幕截图

步骤一 准备文件S1.js

js 复制代码
const { Builder, By, Key, until } = require('selenium-webdriver');
//##### 任务2. 使用require引入文件处理模块fs #####  


async function 登录(){
    // firefox 火狐浏览器   chrome 谷歌浏览器
    let 设备 = await new Builder().forBrowser('firefox').build();

    //##### 任务1. 将目标网址填入URL值中 #####
    let URL = 'http://xgxt.hb-green.com:8036/'   
    await 设备.get(URL);
    
    //##### 任务4. 在下方完成目标页面要求3-6
    //##### 任务5. 在下方完成目标页面要求7-8
    
    //##### 任务3. 在下方增加屏幕截图代码 #####

}//登录


登录()

新建文件S1.js,复制以上代码,完成#####标注的任务要求:

  • 任务1. 将目标网址填入URL值中
  • 任务2. 使用require引入文件处理模块fs
  • 任务3. 增加屏幕截图代码,并使用你的名字命名
js 复制代码
let str = await 设备.takeScreenshot();
await fs.writeFileSync('姓名.png', str, 'base64');

步骤二 完成任务4、5

S2.访问学生个人信息并截图

靶向目标网址:xgxt.hb-green.com:8036 关键自动化操作:输入用户名、密码、点击登录按钮、点击弹窗按钮、点击确定/取消、屏幕截图

1.确保页面元素加载

已知该页面是异步加载,类似Vue这种框架。需要指定一个元素等待页面加载完成。 获取5个tab 第2个是 [学生服务],具有共同class="xszm-yyfz-tab"

js 复制代码
//判断页面元素加载完成 class="xszm-yyfz-tab"
    await 设备.wait(  
        until.elementLocated( By.css(".xszm-yyfz-tab") ) ,
        30000            //最长等待时间
    );

2.点击鼠标左键

这个方法包含2个操作,首先将光标移动到被操作元素的正中心,然后按下鼠标左键后再松开:

js 复制代码
    //操作鼠标点击 第一个元素 (移动到中心并点击)
    let 目标 =   cardArr[0] 
    const 动作 = 设备.actions({async: true});
    await 动作.move({origin: 目标}).click().perform();

3.切换选项卡窗口

js 复制代码
    // 第一步 获取所有的窗口对象 winArr
    let winArr = await 设备.getAllWindowHandles()
    console.log('窗口编号')
    console.log( winArr )
    // 第二步 切换到  第2 个窗口
    await 设备.switchTo().window( winArr[1]   )
    //获得个人信息  待完成....

附录:

Senlenium中文文档

相关推荐
旺旺大力包1 分钟前
【JS笔记】JS 和 noodjs 的常见操作(十)
开发语言·javascript·node.js·ecmascript
西瓜树枝4 分钟前
antd vue全局自定义样式前缀实践
前端·vue.js
前端进阶者5 分钟前
地图坐标系转换JS库
前端·javascript
蛙哇5 分钟前
Pinia 核心源码简易实现
前端
飞天牛牛5 分钟前
Shell 脚本里 nvm 不识别,node 却能用?原理与最佳实践
前端
程序员Sunday6 分钟前
二维码会用完吗?答案是:会......
前端
namehu6 分钟前
浏览器中的打印魔法:Lodop与系统打印机
前端·react.js
拾光拾趣录6 分钟前
从0到1:搭建企业级前端基础建设
前端·前端工程化
如果'\'真能转义说12 分钟前
React自学 基础一
前端·react.js·前端框架