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

相关推荐
华仔啊4 分钟前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
Bacon1 小时前
前端:从0-1实现一个脚手架
前端
Bacon1 小时前
前端项目部署实战 nginx+docker持续集成
前端
beckyye1 小时前
阿里云智能语音简单使用:语音识别
前端·语音识别·录音
东东2331 小时前
前端规范工具之husky与lint-staged
前端·javascript·eslint
jump6801 小时前
手写事件总线、事件总线可能带来的内存泄露问题
前端
岁月宁静2 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
执沐2 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html
atwednesday2 小时前
日志处理
javascript
#做一个清醒的人2 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm