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

相关推荐
Fan_web10 分钟前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
安冬的码畜日常11 分钟前
【CSS in Depth 2 精译_044】第七章 响应式设计概述
前端·css·css3·html5·响应式设计·响应式
莹雨潇潇1 小时前
Docker 快速入门(Ubuntu版)
java·前端·docker·容器
Jiaberrr1 小时前
Element UI教程:如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
Tiffany_Ho2 小时前
【TypeScript】知识点梳理(三)
前端·typescript
安冬的码畜日常3 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签(上)
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
太阳花ˉ3 小时前
html+css+js实现step进度条效果
javascript·css·html
小白学习日记4 小时前
【复习】HTML常用标签<table>
前端·html
john_hjy4 小时前
11. 异步编程
运维·服务器·javascript