前端工程师快速入门Selenium自动化测试

一、背景与意义

Selenium是常用的Web自动化测试工具,前端开发工程师可以在完成每项开发任务之后,使用Selenuim做一下回归测试,以避免被提BUG太多导致后面做项目总结时太难看。测试工程师学习Selenium时需要掌握很多API接口,例如页面元素如何定位、如何触发各种鼠标操作事件等。而前端工程师则可以充分利用自己所掌握的JavaScript相关API,来替换Selenium中的一些API,从而更快地入门。

文本接下来将给出一个适合前端开发工程师(而不是测试工程师)的Selenium入门示例。

二、代码示例

2.1 编程语言选择

Selenium支持的编程语言有Java、Python、C#、Ruby、JavaScript、Kotlin,Python可能是最常用的语言,很多Selenium教材都是以Python作为编程语言。但对大多数前端开发工程师而言,写JavaScript当然比写Python更顺手。故这里以JavaScript作为编程语言。

2.2 安装Selenium依赖

运行如下命令即可安装JavaScript版本的Selenium依赖:

bash 复制代码
npm install selenium-webdriver

2.3 启动Selenium

接下来创建自动化测试的主文件test.js:

javascript 复制代码
const { Builder } = require("selenium-webdriver");

// 由于要用到await关键字,故这里需要使用async function包装一下。
(async function() {
    /*
     * 这里使用firefox而不是更常用的浏览器chrome,是因为selenium和chrome搭配使用时,
     * 会出现一些兼容性问题导致的错误,对新手不那么友好。用firefox省事一些
     */
    driver = await new Builder().forBrowser('firefox').build();
    await driver.get('https://www.sogou.com');
})();

然后运行node test.js命令,可以看到firefox打开了https://www.sogou.com,并且导航栏是红色的,表示firefox受到其他程序的控制:

2.4 自动执行文本输入与按钮点击操作

接下来,我们要在搜索框中输入HelloWorld并执行搜索。查看页面元素的代码可知,搜索框的id为query,根据基础的JavaScript知识,如果在firefox的开发者控制台中执行以下JavaScript代码,可以在搜索框中输入HelloWorld

javascript 复制代码
document.getElementById("query").value = "HelloWorld"

类似地,搜索按钮的id为stb,根据基础的JavaScript知识可知,以下JavaScript可以触发搜索:

javascript 复制代码
document.getElementById("stb").click()

Selenium正好也提供了执行JavaScript的API,即driver.executeScript函数,test.js中可使用driver.executeScript函数执行输入HelloWorld并触发搜索的操作:

javascript 复制代码
const { Builder } = require("selenium-webdriver");

// 由于要用到await关键字,故这里需要使用async function包装一下。
(async function() {
    /*
     * 这里使用firefox而不是更常用的浏览器chrome,是因为selenium和chrome搭配使用时,
     * 会出现一些兼容性问题导致的错误,对新手不那么友好。用firefox省事一些
     */
    driver = await new Builder().forBrowser('firefox').build();
    await driver.get('https://www.sogou.com');
    
    // 输入HelloWorld,并触发搜索
    await driver.executeScript(`document.getElementById("query").value = "HelloWorld"`);
    await driver.executeScript(`document.getElementById("stb").click()`);
})();

再次运行node test.js命令,可以看到浏览自动打开网站并执行了搜索操作。绝大多数网页上的操作都可以通过JavaScript来模拟实现,故只用driver.executeScript就可以完成很多操作了。

2.5 等待结果和补充断言

执行搜索之后,可能需要等待几百毫秒才能返回搜索结果,这里就需要使用Selenium的等待函数driver.wait。另外执行搜索之后,页面应该会展示"已为您找到xxxx条相关结果",故可以增加断言验证是否符合预期。另外整个测试流程执行完毕之后,应该调用driver.quit()退出。相关代码补充如下:

javascript 复制代码
const { Builder } = require("selenium-webdriver");
const assert = require("assert");

// 由于要用到await关键字,故这里需要使用async function包装一下。
(async function() {
    /*
     * 这里使用firefox而不是更常用的浏览器chrome,是因为selenium和chrome搭配使用时,
     * 会出现一些兼容性问题导致的错误,对新手不那么友好。用firefox省事一些
     */
    driver = await new Builder().forBrowser('firefox').build();
    await driver.get('https://www.sogou.com');
    
    // 输入HelloWorld,并触发搜索
    await driver.executeScript(`document.getElementById("query").value = "HelloWorld"`);
    await driver.executeScript(`document.getElementById("stb").click()`);

    // wait方法第一个参数是函数,Selenium会反复调用该函数,直到该函数的返回结果为true再执行后面的代码。
    // wait方法第二个参数是设置超时时间(单位毫秒),超过该时间第一个参数还没返回true就报错。
    await driver.wait(async () => {
        // 注意,如果要获取executeScript的执行返回,JS命令中必须要有return语句
        return await driver.executeScript(`return !!document.querySelector(".num-tips")`);
    } , 60 * 1000);   // 超时时间设置为60秒
    
    // 获取页面上的"已为您找到xxxx条相关结果"这一段文字
    const searchResultText = await driver.executeScript(`return document.querySelector(".num-tips").innerText`);
    // 打个日志以方便调试
    console.log("searchResultText", searchResultText);
    // 通过断言确认是否符合预期
    assert(searchResultText.match(/^搜狗已为您找到约[0-9,]+条相关结果$/, ''), "没有获取到搜索结果");
    driver.quit();
})();

三、代码结构优化

从代码结构的角度看,连续两段driver.executeScript命令可以合并在一起,且driver.executeScript命令经常用但有些长,可以用一个名字短一点的函数替代。代码优化为:

javascript 复制代码
const { Builder } = require("selenium-webdriver");
const assert = require("assert");

// 由于要用到await关键字,故这里需要使用async function包装一下。
(async function() {
    /*
     * 这里使用firefox而不是更常用的浏览器chrome,是因为selenium和chrome搭配使用时,
     * 会出现一些兼容性问题导致的错误,对新手不那么友好。用firefox省事一些
     */
    driver = await new Builder().forBrowser('firefox').build();
    await driver.get('https://www.sogou.com');

    const exec = command => driver.executeScript(command);
    
    // 输入HelloWorld,并触发搜索
    await exec(`
        document.getElementById("query").value = "HelloWorld";
        document.getElementById("stb").click();
        `);

    let searchResultText = null;
    // wait方法第一个参数是函数,Selenium会反复调用该函数,直到该函数的返回结果为true再执行后面的代码。
    // wait方法第二个参数是设置超时时间(单位毫秒),超过该时间第一个参数还没返回true就报错。
    await driver.wait(async () => {
        // 获取页面上的"已为您找到xxxx条相关结果"这一段文字
        // 注意,如果要获取executeScript的执行返回,JS命令中必须要有return语句
        searchResultText = await exec(`return document.querySelector(".num-tips")?.innerText`);
        return !!searchResultText;
    } , 60 * 1000);   // 超时时间设置为60秒
    
    // 打个日志以方便调试
    console.log("searchResultText", searchResultText);
    // 通过断言确认是否符合预期
    assert(searchResultText.match(/^搜狗已为您找到约[0-9,]+条相关结果$/, ''), "没有获取到搜索结果");
    driver.quit();
})();
相关推荐
懒大王爱吃狼1 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1:npm简介
前端·npm·node.js