下一代浏览器和移动自动化测试框架：WebdriverIO

1、介绍

今天给大家推荐一款基于Node.js编写且号称下一代浏览器和移动自动化测试框架：WebdriverIO

简单来讲：WebdriverIO 是一个开源的自动化测试框架，它允许测试人员使用 Node.js 编写自动化测试脚本，用于测试Web应用、移动应用和桌面应用程序。能够执行端到端（e2e）、单元和组件测试，主要基于WebDriver、WebDriver BiDi和Chrome DevTools协议进行操作。功能丰富、易于使用的测试框架，支持多种浏览器和设备，并且与Selenium WebDriver API兼容。

官方网址：

https://webdriver.io/

2、主要功能和特点

• 开源：WebdriverIO是一个开源项目，它使得开发者和测试人员可以在自己的项目中自由地使用和修改它。

• 跨平台、多语言支持：支持多种编程语言（如JavaScript、TypeScript、Python等）和多种操作系统（如Windows、Linux、Mac OS等），确保了跨平台和跨语言的兼容性。

• 多浏览器支持：WebdriverIO遵循W3C WebDriver标准，确保了与主流浏览器的无缝集成，同时支持WebDriver BiDi和Chrome DevTools协议，利用这两个强大的工具集，可以直接控制浏览器的底层功能，进行更精细的调试和测试。

• Appium整合：WebdriverIO不仅支持Web应用程序的测试，还通过Appium平台提供了对Android和iOS应用的自动化支持。

• 丰富的API和工具：WebdriverIO提供了一组强大的API和工具，使得开发人员能够轻松地编写和执行自动化测试脚本。这些API和工具包括遍历元素列表的方法（如$$、forEach、map、filter和reduce等），使得开发者可以灵活地进行元素操作。

• 支持多种测试框架和断言库：WebdriverIO支持BDD/TDD测试框架，如Cucumber、Jasmine和Mocha，以及断言库如Chai、Expect.js等。这些支持使得开发者可以根据自己的喜好和需求选择合适的测试框架和断言库进行测试。

• 易用性与可扩展、封装了Selenium WebDriver API： 与Selenium相比，WebdriverIO提供了更简洁的API，使得编写测试脚本变得更加简单易懂，尤其是对于熟悉jQuery的开发者来说。通过封装Selenium WebDriver API, WebdriverIO拥有高度的可扩展性，允许用户根据需要扩展其功能。

• 支持多种测试模式：WebdriverIO不仅支持web应用的自动化测试，还支持Native移动端应用和Electron开发的桌面端应用的测试。

3、环境安装

1、安装Node.js

• 下载与安装：访问Node.js官网https://nodejs.org/下载并安装最新稳定版的Node.js。安装过程通常是“傻瓜式”的，直接点击“下一步”直到完成即可,并确保配置到环境变量中。
• 安装完成后，打开命令行或终端，输入node -v来检查Node.js是否安装成功，如果显示版本号，则说明安装成功。

2、初始化NPM空间

• 在想要存放WebdriverIO项目的文件夹中（例如D盘的WebdriverIO-test文件夹），打开命令行或终端。
• 输入npm init -y命令来初始化一个新的NPM项目空间。这个命令会创建一个package.json文件，用于管理项目的依赖包。

3、安装WebdriverIO CLI

• 在命令行或终端中，输入npm i --save-dev @wdio/cli命令来安装WebdriverIO的命令行接口（CLI）。
• 安装完成后，可以在node_modules/.bin/目录下找到wdio命令。但为了方便使用，建议将其添加到环境变量中，或者在命令行中通过完整路径调用。

4、生成配置文件

• 安装完CLI后，使用npx wdio config 命令来生成一个基本的配置文件
• 执行命令后，会在项目根目录下生成一个wdio.conf.js文件，这个文件包含了WebdriverIO的配置信息

5、安装其他依赖（可选）

• 根据您的测试需求，您可能还需要安装其他NPM包，如浏览器驱动程序（chromedriver、geckodriver等）的npm封装包。
• 这些包可以通过npm install命令来安装，例如：npm install chromedriver。

对于Chrome和Firefox等浏览器，您需要下载与浏览器版本相匹配的驱动程序（如chromedriver、geckodriver）。

4、编写脚本

根据wdio.conf.js文件中的配置项，配置项目的测试环境、浏览器、测试框架等，就可以开始编写测试脚本了。

以下是一个简单的 WebdriverIO 脚本示例，用于在百度中搜索 "WebdriverIO"：

// 引入 WebdriverIO  
const { remote } = require('webdriverio');  
  
(async () => {  
    // 设置 WebDriver 的配置  
    const options = {  
        path: '/',  
        capabilities: {  
            browserName: 'chrome'  
        }  
    };  
  
    // 初始化 WebDriver 实例  
    const browser = await remote(options);  
    try {  
        // 打开百度主页  
        await browser.url('https://www.baidu.com');  
        // 在搜索框中输入搜索词  
        await browser.setValue('#kw', 'WebdriverIO');  
        // 点击搜索按钮  
        await browser.click('#su');  
        // 等待搜索结果页面加载完成  
        await browser.pause(2000); // 这里简单使用 pause，实际项目中可能需要更复杂的等待策略  
        // 获取搜索结果标题（假设是第一个搜索结果）  
        const title = await browser.getTitle();  
        console.log('搜索结果页面的标题是:', title);  

        // 关闭浏览器  
        await browser.deleteSession();  
    } catch (err) {  
        console.error('测试出错:', err);  
    }  
})();

这个示例使用了 remote 方法来初始化 WebDriver 实例，这是 WebdriverIO v5 的用法。如果你使用的是 WebdriverIO v6 或更高版本，可能需要使用不同的 API（如 new Browser()）。

5、小结

综上所述，WebdriverIO是一个功能强大、灵活易用的自动化测试框架，适用于多种测试场景和需求。无论是新手还是经验丰富的测试工程师，都能通过WebdriverIO实现高效的自动化测试，感兴趣的读者可以尝试一下。

项目地址：https://github.com/webdriverio/webdriverio