JavaScript+Selenium如何在web中进行自动化测试（1）

草帽路飞UU

自动化测试



　　在软件开发过程中, 测试是功能验收的必要过程, 这个过程往往有测试人员参与, 提前编写测试用例, 然后再手动对测试用例进行测试, 测试用例都通过之后则可以认为该功能通过验收. 但是软件中多个功能之

间往往存在关联或依赖关系, 某一个功能的新增或修改可能或影响到其它的功能, 这时就需要测试人员对个软件的相关或所有功能进行回归测试, 以便确认系统运行正常, 但是给测试人员增加了很大的工作量。

　　自动化测试是把以人为驱动的测试行为转化为机器执行的一种过程, 可以解决传统手工测试中回归测试工作量大的问题。

　　Selenium

　　Web应用自动化即是对Web应用的自动化测试, 而Selenium是一个用于Web应用的自动化测试框架, 包含一系列工具和类库来支持Web应用在浏览器上运行的自动化, 用Selenium官网上的说

法:"Selenium automates browsers. That's it!". 简洁明了.

　　Selenium包含以下几个主要组件:

　　·Library: 用于支持不同语言的类库, 包含各种language bindings, 如Java, Python, JavaScript等等。

　　· Driver: 用于浏览器的直接操作, 类似于真实用户; 不同的浏览器有不同的驱动。

　　· WebDriver: Library和Driver的统称, 包含了language bindings和对浏览器操作的封装实现。

　　· Selenium IDE: 用于录制测试脚本, 用于辅助用户快速创建测试。

　各组件之间关系如下图:



工作原理

　　Selenium的工作原理如下图:




具体流程如下:

　　·开发者根据Selenium提供的不同的language bindings选择一种, 编写代码

　　· Selenium将开发者编写的代码转成统一的操作指令

　　· Selenium按照JSON格式将操作指令进行封装, 并通过HTTP协议将请求发送到Browser Driver

　　· Browser Driver解析指令后驱动浏览器进行相应的操作

　　安装

　　如上说提到的原理, 要让Selenium工作需要安装两个组件:

　　· Library: 由于我们使用的是JavaScript, 所以我们只需要安装相应的组件即可

　　· Driver: 我们就拿Chrome为例

　　1. 安装Library

　　npm install selenium-webdriver

　　需要提前安装Node.js和npm。

　　2. 安装Driver

　　选择目标浏览器和具体的版本号进行下载, 并按照不同平台的配置步骤进行配置:



基本使用

　　浏览器导航操作


　　const { Builder } = require('selenium-webdriver');

　　(async function myFunction() {

　　  let driver = await new Builder().forBrowser('chrome').build();

　　  // 导航到某个网站

　　  await driver.get('https://baidu.com');

　　  // 返回

　　  await driver.navigate().back();

　　  // 往前

　　  await driver.navigate().forward();

　　  // 刷新

　　  await driver.navigate().refresh();

　　  await driver.quit();

　　})();



　　元素定位

　　const { Builder } = require('selenium-webdriver');

　　(async function myFunction() {

　　  let driver = await new Builder().forBrowser('chrome').build();


　　  // by id

　　  const cheese = driver.findElement(By.id('cheese'));

　　  // by css

　　  const cheddar = driver.findElement(By.css('#cheese #cheddar'));

　　  // by xpath

　　  const cheddar = driver.findElement(By.xpath('//title[@lang='eng']'));


　　  await driver.quit();

　　})();



　　具体支持的定位方式还有很多种, 如下表: