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

相关推荐
前端snow9 小时前
ai agent --- 概念串烧
前端
a努力。9 小时前
Context-State-Memory三重信息架构揭秘
java·服务器·前端
颜进强9 小时前
23 · NestJs ModuleRef 模块引用:容器递给你的"取货窗口",四个 API 四种语义
前端·后端·ai编程
码林鼠10 小时前
dart语言教学
前端
光影少年10 小时前
如果 React 组件的属性没有传值,它的默认值是什么?
前端·javascript·react.js
风骏时光牛马10 小时前
AI_Coding:智能代码生成与工程实践
前端
颜进强10 小时前
22 · NestJs InjectionScopes 注入作用域:默认单例不是偷懒,是最优——以及何时才该打破
前端·后端·ai编程
liangshanbo121510 小时前
Web Worker 在 AI 前端应用中有什么具体使用场景?
前端·人工智能
拖孩11 小时前
一个全程 AI 写的小程序「厨菜记」,上线 20 天跑通流量主,收入几块钱,开心得不行
前端·后端·微信小程序
颜进强11 小时前
21 · NestJs AsyncProviders 异步提供者:useFactory 返回 Promise 之后,容器发生了什么
前端·后端·ai编程