快速入门Selenium自动化测试

一、背景与意义

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

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

二、代码示例

　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');
　　})();

2.1 编程语言选择

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

2.2 安装Selenium依赖

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

　　npm install selenium-webdriver

2.3 启动Selenium

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

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

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

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

　　document.getElementById("query").value = "HelloWorld"

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

　document.getElementById("stb").click()

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

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()退出。相关代码补充如下：

　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命令经常用但有些长，可以用一个名字短一点的函数替代。代码优化为：

　　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();
　　})();

​现在我也找了很多测试的朋友，做了一个分享技术的交流群，共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源，没人解答问题，坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化，性能，安全，测试开发等等方面有一定建树的技术大牛
分享他们的经验，还会分享很多直播讲座和技术沙龙
可以免费学习！划重点！开源的！！！
qq群号：485187702【暗号：csdn11】

最后感谢每一个认真阅读我文章的人，看着粉丝一路的上涨和关注，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走！ 希望能帮助到你！【100%无套路免费领取】