[开发测试]webdriverio(Selenium)前端自动化测试概述

1.webdriverio 与 Selenium的关系：

简单来说就是selenium是最早出现的前端测试框架，但是因为是基于js的，所有受到浏览器安全限制，有些功能受限，后来就诞生了webdriverio这个新的框架，WebDriver直接利用了浏览器的内部接口来操作浏览器，而不是基于js。它整合并且逐渐替代了selenium。

我们把Selenium当做一套API，需要用户自己创建自动化框架的所有部分。WebdriverIO则提供了一个完整的框架。?它不需要你像Selenium一样从头开始实现一堆东西。

想了解更过细节，请参考：https://blog.csdn.net/weixin_30666401/article/details/96944707, https://www.jianshu.com/p/8d17caec94f5

2.浏览器驱动(standlone模式，单独运行)：

运行基于WebDriver协议的自动化测试，需要设置浏览器驱动程序来翻译自动化命令，才能够在浏览器中执行它们。每种浏览器都要有自己的浏览器驱动，下面介绍如何单独设置每个驱动程序。可以在awesome-selenium(https://github.com/christian-bromann/awesome-selenium#driver) 的README中找到一个包含所有驱动程序的列表。

(1).Chromedriver

要自动化Chrome浏览器，可以直接在项目网站或通过NPM包下载Chromedriver:

npm install -g chromedriver

然后独立运行：

chromedriver --port=4444 --verbose

(2).Geckodriver

要自动化Firefox，需要下载最新版本的geckodriver，并将其解压到您的项目目录中:

# linux
curl -L https://github.com/mozilla/geckodriver/releases/download/v0.24.0/geckodriver-v0.24.0-linux64.tar.gz | tar xz
# MacOS (64 bit)
curl -L https://github.com/mozilla/geckodriver/releases/download/v0.24.0/geckodriver-v0.24.0-macos.tar.gz | tar xz

然后独立运行：

/path/to/binary/geckodriver --port 4444

其它类型的浏览器，在这里不再赘述。

详情请参考：https://webdriver.io/docs/driverbinaries/

3.怎样调用浏览器驱动去执行测试？

浏览器驱动已经运行了，那么我们的测试工程怎样调用它呢？

使用第三方的浏览器驱动服务，以wdio-chromedriver-service为例：

这个服务可以帮助你在使用WDIO testrunner运行测试时无缝地运行ChromeDriver。它使用了chromedriver NPM包来包装chromedriver。

这个服务不需要Selenium服务器，而是使用ChromeDriver直接与浏览器通信。显然，它只支持:

capabilities: [{
    browserName: 'chrome'
}]

(1)安装浏览器驱动服务：

最简单的方法是将wdio-chromedriver-service作为devDependency保存在package.json中。

{
  "devDependencies": {
    "wdio-chromedriver-service": "^6.0.0"
  }
}

或者直接安装：

npm install wdio-chromedriver-service --save-dev

?Note：注意!你必须单独安装chromedriver，因为它是这个项目的peerDependency，你可以自由选择使用什么版本。安装使用:

npm install chromedriver --save-dev

(2).配置：

为了使用该服务，你需要添加chromedriver到你的服务数组，修改配置文件wdio.conf.js

// wdio.conf.js
export.config = {
  outputDir: 'all-logs',
  // ...
  services: [
    ['chromedriver', {
        logFileName: 'wdio-chromedriver.log', // default
        outputDir: 'driver-logs', // overwrites the config.outputDir
        args: ['--silent']
    }]
  ],
  // ...
};

详情请参考：https://webdriver.io/docs/wdio-chromedriver-service/

4.运行测试：

上面的步骤都做好之后，就可以执行自动化测试了。将会自动打开chrome浏览器，自动执行测试过程。