Nodejs Selenium网页自动化测试常用的一些方法

作者：秋了秋发表时间：2022年01月21日

世界本没有bug，因为有测试所以就有bug。

Selenium是一款自动化测试工具，对于人手不足的小团队尤其个人项目具有非凡的意义。

优点：除了解放双手之外，还提高了测试效率，可以以人手达不到的速度充当整个项目的全量测试。每次更改代码后只需要把自动化测试程序跑起来就可以泡杯咖啡坐等测试结果了。

缺点：编写程序需要大量时间，编写自动化程序也有自动化代码的bug需要修复...，对于非稳定型的项目需要维护自动化测试代码的同步更新。

进入正题：（适合阅读对象：对js语法和node环境有一定基础的人）

安装node是基操（此处省略）。再选择一个自动化程序路径（文件夹）初始化程序npm init根据提示完成初始化，再安装selenium：

npm install selenium-webdriver --save

安装浏览器的驱动：

谷歌浏览器下载地址：https://chromedriver.storage.googleapis.com/index.html

把下载的文件放到电脑的某个文件夹里面，再把这个文件夹路径加到电脑的系统环境变量里面，重启电脑其实应用生效。

其它浏览器自行解决~

初始化自动化程序，新建一个test.js文件，写入以下内容：

const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until,
    Key = webdriver.Key,
    Button = webdriver.Button;
const driver = new webdriver.Builder().forBrowser('chrome').build();//打开chrome浏览器

以上都是写自动化测试程序的前提，接下来是如何利用Selenium写测试的业务逻辑，涉及到业务逻辑，我们必须熟悉Selenium的一些常用函数，这样才能完成我们想要的任何测试目的。直接上干货，以下罗列我在使用过程中觉得常用的一些方法；

最大化窗口：driver.manage().window().maximize();//因为涉及到一些错误捕获取要截图啥的，所以最好是全屏浏览器来测试
await driver.get('https://netblog.cn');//访问一个链接，通常用await等待
await driver.findElement(By.id('details-button'));//通过id寻找元素节点

同样有:

By.className( name )

By.css( selector )

By.js( script, ...var_args ) → function(WebDriver): Promise

By.linkText( text )

By.name( name )

By.partialLinkText( text )

By.tagName( name )

By.xpath( xpath )

特别提醒：此方法找不到元素会报错，不能用来检测元素是否存在，检测元素是否存在应该用findElements
await driver.findElements(By.id('details-button'));

查找多元素，返回一个数组，检测元素是否存在可以判定数组的长度

driver.wait(until.elementLocated(By.id('id'), 10000，function() {console.error('元素不存在');});//wait等待第一个参数返回true，第一个参数可为一个函数。elementLocated定位元素，判断元素是否存在。第二个参数是超时时间，单位为毫秒，第三个参数是超时后执行的方法。
const safeDetail = await driver.findElement(By.id('details-button'));
await safeDetail.click();//click模拟用户点击元素，前提是元素要存在且显示了，否则会报错
const _class = safeDetailclickEle.getAttribute('class');//getAttribute获取属性
await safeDetail.isDisplayed();//元素是否显示
await errDiv.getText();//获取标签文本
await nameInput.clear();//清空输入框
await nameInput.sendKeys('abcdeeee');//往输入框输入某些值，注意要先.clear()清空输入框后再sendKeys，否则内容会被追加。
await driver.executeScript('arguments[0].scrollIntoView();', driver.findElement(By.id('login')));//executeScript执行js脚本，第一个参数为脚本字符串，第二个参数及以后的参数为arguments代指参数
await driver.sleep(500);//sleep强制等待500毫秒。不建议使用，建议使用wait
await driver.switchTo().frame(driver.findElement(By.id("iframe-id"))); //切换作用域到iframe，适用于网页含有iframe的
const alert = await driver.switchTo().alert();

alert.accept(); //点确定

alert.dismiss(); //点取消

alert.getText();//获取alert的内容
driver.switchTo().defaultContent();//切换回主页面
driver.takeScreenshot().then(function(d){

//takeScreenshot截屏，一般用户捕获测试通过的错误界面
//此处d即为截图结果base64字符串，可在此自行处理});
}
driver.quit();//测试完成后关闭网页
const radioBox = driver.findElement(By.id("radio-Box"));//radioBox的处理，checkBox同理

radioBox.isSelected(); //是否选中

radioBox.isEnabled(); //是否被禁用
driver.navigate().refresh(); //刷新当前页面
driver.navigate().back(); //后退功能
driver.navigate().forward(); //前进功能
driver.getTitle();//获取浏览器标题
driver.getCurrentUrl(); //获取当前浏览器网址
driver.actions().keyDown(keyCode).perform();//按下键盘按键

driver.actions().keyUp(keyCode).perform();//键盘抬起

driver.actions().click(element).perform();//鼠标左键单击

driver.actions().contextClick(element).perform();//鼠标右键单击

driver.actions().doubleClick(element).perform();//鼠标双击

driver.actions().dragAndDrop(element,to).perform();//单击鼠标拖动element元素，如果to是坐标{x:number,y:number}则表示移动距离; 如果to是元素，则移动到to元素中心，并释放鼠标。

driver.actions.move(options).perform(); //移动参数如下： //options ({duration: (number|undefined), origin: (Origin|WebElement|undefined), x: (number|undefined), y: (number|undefined)}|undefined) ；origin是起始位置，默认为鼠标当前位置，可以设置元素为起始位置。x,y为偏移量。duration为持续时间默认（100ms）

driver.actions.press(button); //按下鼠标 button默认是鼠标左键不抬起，有LEFT,RIGHT,MIDDLE三个值，通过Button.LEFT....获得

driver.actions.release(button) //释放鼠标，默认左键

driver.actions.pause();//停顿
driver.actions.keyDown(SHIFT).move({origin: el}).press().release().keyUp(SHIFT).perform();//一系列键鼠连锁操作示例，只有调用了perform才会执行，在调用perform之前写的任何键鼠操作都是进入等待队列。
driver.actions.clear()//清空所有键鼠状态
driver.manage().addCookie({name: 'foo', value: 'bar'}) //添加cookies
driver.manage().deleteAllCookies() //删除所有cookies

driver.manage().deleteCookie(name) //按照name删除

driver.manage().getCookie(name) //拿到name字段的cookie值，为promise对象

driver.manage().getCookies() //返回所有cookies，为promise对象

示例代码：

async function testIndexUI() {
    driver.manage().window().maximize();
    await driver.get('https://netblog.cn');
    //轮播图
    await driver.wait(until.elementLocated(By.css('#banner > ul > li.active:nth-child(2)')), 4000, function () {
        Logger.error('轮播图没有动！');
    });
    let clickEle = driver.findElement(By.css('#banner > ul > li:nth-child(1)'));
    clickEle.click();
    let _class = await clickEle.getAttribute('class');
    if (!_class.match(/\bactive\b/)) {
        await Logger.error('轮播图点击切换失效');
    }
    await driver.sleep(2000);
    clickEle = driver.findElement(By.css('#banner > ul > li:nth-child(3)'));
    clickEle.click();
    _class = await clickEle.getAttribute('class');
    if (!_class.match(/\bactive\b/)) {
        await Logger.error('轮播图点击切换失效');
    }
    driver.quit();
}
testIndexUI();

运行自动化程序：