前端快速入门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中文文档

相关推荐
大转转FE几秒前
转转前端周刊第192期: 财务数仓 Claude AI Coding 应用实战
前端·人工智能
weixin_4713830343 分钟前
React Flow + Zustand 搭建工作流编排工作台
前端·react.js·前端框架
kilito_0144 分钟前
react疑难讲解
前端·react.js·前端框架
字节跳动的猫1 小时前
2026 四款 AI:开发场景适配全面解析
前端·人工智能·开源
gyx_这个杀手不太冷静1 小时前
大人工智能时代下前端界面全新开发模式的思考(四)
前端·架构·ai编程
时寒的笔记1 小时前
js逆向_webpack讲解加载器&酷某音乐案例
开发语言·javascript·webpack
李剑一1 小时前
我做了个微信聊天模拟器,已开源
前端
yusirxiaer2 小时前
为什么 markRaw 能修复 Vue 3 + ECharts 的 resize 报错
javascript·vue.js·echarts
代码搬运媛2 小时前
30分钟带你从0手搓一个AI-Cli命令行工具
前端
赛博切图仔2 小时前
前端性能内卷终点?Signals 正在重塑我们的开发习惯
前端·javascript·vue.js