Node.js的下一代浏览器和移动自动化测试框架-WebdriverIO

在现代软件开发中，自动化测试已成为保障软件质量的关键环节。而在众多测试框架中，WebdriverIO凭借其强大的功能和简洁的语法，成为Node.js生态中备受瞩目的浏览器和移动自动化测试框架。那么，WebdriverIO究竟有哪些独特之处，它如何助力开发者实现高效的自动化测试？

什么使WebdriverIO脱颖而出，成为下一代浏览器和移动自动化测试的首选？它有哪些核心功能和优势？

1、前言

web自动化测试工具Selenium支持多种语言，如Python、Java、Ruby、JavaScript等，大多数测试人员使用最多的语言就是Python、Java了，并且很多技术社区与网上的学习资料查找起来很方便，很容易上手。但对于其他语言，比如JavaScript，相对来说资源就少很多了，针对JavaScript本篇将介绍一款在Node.js环境下的web与移动自动化测试框架 - WebdriverIO。

2、简介

WebdriverIO是一个测试自动化框架，用于e2e以及浏览器中的单元和组件测试，它允许你运行基于WebDriver和WebDriver BiDi以及Appium自动化技术的测试。为BDD/TDD测试框架提供支持，并将使用Sauce Labs、BrowserStack、TestingBot或LambdaTest在本地或云端运行测试。

WebdriverIO是一个先进的自动化框架，专为现代网络和移动应用的自动化而设计。它简化了与应用的交互，并提供了一系列插件，帮助你构建可扩展、健壮且稳定的测试套件。

功能特点：

• 可扩展：添加助手函数或更复杂的命令集和组合。

• 兼容性：WebdriverIO可以在WebDriver协议上运行以进行真正的跨浏览器测试，也可以在Chrome DevTools协议上运行，以使用Puppeter实现基于Chrome的自动化。

• 功能性：各种内置和社区插件允许你轻松集成和扩展设置，以满足你的需求。

你可以使用WebdriverIO进行自动化：

• 用React、Vue、Angular、Svelte或其他前端框架编写的web应用程序。

• 在模拟器或真实设备上运行的混合或本机移动应用程序。

• 本机桌面应用程序（例如，使用Electron.js编写）。

• 在浏览器中对web组件进行单元或组件测试。

官方网址：

https://webdriver.io/

3、安装

代码库包含了WebdriverIO项目的一些核心包。WebdriverIO社区整理了许多精选资源。

以下列举比较典型的代码库。

1、核心包：

webdriver - W3C WebDriver和Mobile JSONWire协议的Node.js绑定实现。

github地址：

https://github.com/webdriverio/webdriverio/tree/main/packages/webdriver

webdriverio - Node.js的下一代浏览器和移动自动化测试框架。

github地址：

https://github.com/webdriverio/webdriverio/tree/main/packages/webdriverio

@wdio/cli - WebdriverIO testrunner命令行界面。

github地址：

https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-cli

2、报告包：

@wdio/allure-reporter - 用于创建allure测试报告的WebdriverIO报告插件。

github地址：

https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-allure-reporter

@wdio/junit-reporter - 以XML格式创建测试结果的WebdriverIO报告插件。

github地址：

https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-junit-reporter

3、服务包：

@wdio/appium-service - 用于启动和停止Appium服务器的WebdriverIO服务。

github地址：

https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-appium-service

@wdio/lighthouse-service - WebdriverIO服务，集成了Google Lighthouse命令以将其用于自动化测试。

github地址：

https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-lighthouse-service

@wdio/firefox-profile-service - WebdriverIO服务，允许你在wdio.conf.js中定义Firefox配置文件。

github地址：

https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-firefox-profile-service

4、框架包：

@wdio/cucumber-framework - cucumber测试框架适配器。

github地址：

https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-cucumber-framework

@wdio/jasmine-framework - jasmine测试框架适配器。

github地址：

https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-jasmine-framework

@wdio/mocha-framework - mocha测试框架适配器。

github地址：

https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-mocha-framework

4、快速上手

安装核心包webdriverio

此软件包提供了一个易于管理的API和大量基于WebDriver规范的语法。你可以将 WebdriverIO 作为独立软件包使用，或通过@wdio/cli在测试运行器中使用。WebdriverIO允许你使用WebDriver本地运行测试，也可以通过像Sauce Labs这样的云提供商使用远程用户代理进行测试。

npm install webdriverio

默认情况下，WebdriverIO使用Puppeteer自动化浏览器，如Chrome、Firefox或Chromium Edge。

官方示例：启动一个Chrome浏览器，并获取页面的标题。

import { remote } from 'webdriverio'

const browser = await remote({
    capabilities: { browserName: 'chrome' }
})

await browser.navigateTo('https://www.google.com/ncr')

const searchInput = await browser.$('#lst-ib')
await searchInput.setValue('WebdriverIO')

const searchBtn = await browser.$('input[value="Google Search"]')
await searchBtn.click()

console.log(await browser.getTitle()) // outputs "WebdriverIO - Google Search"

await browser.deleteSession()

 

• WebdriverIO的核心功能

  • 观点：WebdriverIO是一款基于Node.js的开放源代码测试框架，支持多种浏览器和移动设备测试。其核心功能包括与Selenium的无缝集成、强大的插件系统和丰富的API。

const { remote } = require('webdriverio');
(async () => {
    const browser = await remote({
        capabilities: { browserName: 'chrome' }
    });
    await browser.url('https://example.com');
    const title = await browser.getTitle();
    console.log('Title:', title);
    await browser.deleteSession();
})();

• 与Selenium的无缝集成

  • 观点：WebdriverIO与Selenium无缝集成，利用Selenium WebDriver协议进行操作，确保兼容性和稳定性，同时提供更简洁的API和更高效的测试执行。
  • 案例：通过WebdriverIO与Selenium Grid的集成，进行分布式测试，提高测试效率和覆盖率。

• 强大的插件系统

  • 观点：WebdriverIO拥有丰富的插件系统，支持各种测试工具和框架，如Mocha、Jasmine、Cucumber等，极大地扩展了其功能和应用场景。
  • 案例：在WebdriverIO中使用Mocha进行行为驱动开发（BDD）测试：

describe('My Google Search', () => {
    it('should open google and search', async () => {
        await browser.url('https://www.google.com');
        const input = await $('[name="q"]');
        await input.setValue('WebdriverIO');
        await browser.keys('Enter');
        await expect(browser).toHaveTitleContaining('WebdriverIO');
    });
});

随着前端和移动应用开发的快速发展，自动化测试的需求也在不断增加。WebdriverIO作为一款新兴的测试框架，以其强大的功能和灵活性，迅速赢得了开发者的青睐。无论是在企业项目还是开源社区，WebdriverIO的应用场景和影响力都在不断扩大，推动着自动化测试技术的进步。

WebdriverIO作为Node.js生态中的下一代自动化测试框架，以其强大的功能和灵活性，为开发者提供了高效的测试解决方案。通过掌握WebdriverIO，你可以轻松实现浏览器和移动设备的自动化测试，提升软件质量和开发效率。

拥抱WebdriverIO，让自动化测试变得更简单、更高效，为你的开发工作注入新的动力。