浅尝WebDriverIO, 前端自动化测试Webdriver.IO, WebdriverIO教程, WebdriverIO示例, WebdriverIO webdriver, WebdriverIO selenium

什么是 Webdriver.IO?

WebdriverIO 是一个渐进式自动化框架,旨在自动化现代 Web 和移动应用程序。它简化了与您的应用程序的交互,并提供了一组插件来帮助您创建一个可扩展、健壮和稳定的测试套件。

它被设计为:

  • 可扩展– 添加辅助函数或现有命令的更复杂的集合和组合很简单而且非常有用
  • 兼容– WebdriverIO 可以在WebDriver 协议上运行以进行真正的跨浏览器测试,也可以在Chrome DevTools 协议上使用Puppeteer 运行基于 Chromium 的自动化。
  • 功能丰富– 种类繁多的内置插件和社区插件使您可以轻松集成扩展您的设置以满足您的要求。

您可以使用 WebdriverIO 来自动化:

  • 🌐使用React、Vue、Angular、Svelte 或其他前端框架编写的现代 Web 应用程序
  • 📱在模拟器/模拟器或真实设备上运行的混合本机移动应用程序
  • 💻原生桌面应用程序(例如用 Electron.js 编写)

 

WebDriverIO – 一个凌驾于Selenium 之上的Node.js 前端测试框架

Selenium 为人诟病的就是它的API 非常不友好,纵使之后出了Selenium WebDriver 还是有上手困难的窘境,所以我们需要一个框架来协助我们这些弱弱前端测试工程师来协助我们撰写End-to-End 测试码,譬如现在较为火红的 选哪个都好,重点是上手容易、充裕的官方文件、广大社群支持以及扩充程度高,以这些挑选准则去决定你想采用的前端测试框架,并且有效解决你的网页自动化测试即可。我这边选择了WebDriverIO,主要它能够同步撰写测试码与易于除错的优于NightWatch 特性外,在台湾也深受

这篇文章主要是带大家认识并且透过简单的操作步骤与范例来了解WebDriverIO,这里不是全貌,而是一个浅尝。

WebDriverIO 的特点:

  • 基于Node.js 的网页自动化测试框架
  • 封装Selenium WebDriver API,让操纵浏览器行为更为便利
  • 你的测试码将会非常简单、清晰、易懂,而且兼容大多数的TDD 与BDD 测试框架
  • 可扩展程度高,你可以轻松自制自己的函数与复杂的集合
  • 轻松跟大量第三方工具整合,也能与云端测试服务如Sauce Labs 或BrowserStack 供应商达到多装置测试的需求

 

How to Start?

我们必须先设定环境,再来则是专案的建立、测试资料的准备与测试程式码的撰写,让我们现在开始!

 

设定Selenium Server 环境?

首先你要先设定Selenium Server 环境,接着你才可以透过WebDriverIO 去呼叫Selenium 让浏览器帮你做事情。

传统方法是透过下载并安装

安装Selenium Server:

npm install webdriver-manager -g
webdriver-manager update

 

执行Selenium Server:

webdriver-manager start

其实Selenium Server 环境可透过Docker 容器虚拟化工具建置,这部分我之后会另辟文章来为各位解说,这里我们先以Local 方式来练习,较为简单。

 

WebDriverIO 初始化专案

透过webdriverio 自带的CLI 指令初始化专案非常简单,它透过问答式方式让你快速生成专案与设定。

mkdir wdio-demo
cd wdio-demo
npm init -y
npm install webdriverio --save-dev

 

Set up

npx wdio config

 

产生WebDriverIO 设定档:

浅尝WebDriverIO, 前端自动化测试Webdriver.IO, WebdriverIO教程, WebdriverIO示例, WebdriverIO webdriver, WebdriverIO selenium
浅尝WebDriverIO, 前端自动化测试Webdriver.IO, WebdriverIO教程, WebdriverIO示例, WebdriverIO webdriver, WebdriverIO selenium

这将提示一组问题,指导您完成设置。您可以传递一个--yes参数来选择默认设置,该设置将使用页面对象模式在 Chrome 中使用 Mocha 。

 

运行测试

您可以通过使用run命令并指向您刚刚创建的 WebdriverIO 配置来启动您的测试套件:

npx wdio run ./wdio.conf.js

 

如果你想运行特定的测试文件,你可以添加一个--spec参数:

npx wdio run ./wdio.conf.js --spec example.e2e.js

 

或在您的配置文件中定义套件并仅运行套件中定义的测试文件:

npx wdio run ./wdio.conf.js --suite exampleSuiteName

 

有两种模式(Mode)

Standalone Mode (独立执行模式) — 异步:

var webdriverio = require('webdriverio');
var options = { desiredCapabilities: { browserName: 'chrome' } };
var client = webdriverio.remote(options);

client
    .init()
    .url('https://www.taobao.com/')
    .setValue('input.search-combobox-input', 'webdriverIO');
    .click('button.btn-search')
    .pause(2000);
    .getTitle().then(function(title) {
        console.log('Title is: ' + title);
    })
    .end();

 

The WDIO Testrunner – 同步:

describe('Taobao search', function() {
    it('searches for WebdriverIO', function() {
        browser.windowHandleSize({width: 1024, height: 800});
        browser.url('https://www.taobao.com/');
        browser.setValue('input.search-combobox-input', 'webdriverIO');
        browser.click('button.btn-search');

        browser.pause(3000);
        // 同步的话,我可以变量得到返回值随意进行后续操作,而非callback。
        var title = browser.getTitle();
        console.log('Title is: ' + title);
        //browser.end();
    });
});

 

多浏览器支持

# 配置:
capabilities: {
    myChromeBrowser: {
        desiredCapabilities: {
            browserName: 'chrome'
        }
    },
    myFirefoxBrowser: {
        desiredCapabilities: {
            browserName: 'firefox'
        }
    }        
},

# 脚本:
describe('Taobao search', function() {
	it('searches for WebdriverIO', function() {
		//两个浏览器都进行的操作
		browser.windowHandleSize({width: 1024, height: 800});
		browser.url('https://www.taobao.com/');

		// Chrome单独操作,先执行
		myChromeBrowser.setValue('input.search-combobox-input', 'Chrome');
		myChromeBrowser.click('button.btn-search');

		// Firefox单独操作,后执行
		myFirefoxBrowser.setValue('input.search-combobox-input', 'Firefox');
		myFirefoxBrowser.click('button.btn-search');

		browser.pause(1000);

		var title = browser.getTitle();
		console.log('Title is: ' + title);
		// outputs: "Title is: WebdriverIO (Software) at DuckDuckGo"
		browser.end();
	});
});

 


在脚本中运行

如果你喜欢在 Node.JS 脚本中使用 WebdriverIO 作为自动化引擎,你也可以直接安装 WebdriverIO 并将其作为包使用,例如生成网站的屏幕截图:

const { remote } = require('webdriverio');

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

    await browser.url('https://webdriver.io')

    const apiLink = await browser.$('=API')
    await apiLink.click()

    await browser.saveScreenshot('./screenshot.png')
    await browser.deleteSession()
})()

注意:使用 WebdriverIO 作为包需要通过async/await. 在我们关于Sync 与 Async 的部分中阅读更多相关信息。

 

const { remote } = require('webdriverio');
​
(async () => {
    const browser = await remote({
        logLevel: 'trace',
        capabilities: {
            browserName: 'chrome'
        }
    })
​
    await browser.url('https://duckduckgo.com')
​
    const inputElem = await browser.$('#search_form_input_homepage')
    await inputElem.setValue('WebdriverIO')
​
    const submitBtn = await browser.$('#search_button_homepage')
    await submitBtn.click()
​
    console.log(await browser.getTitle()) // outputs: "Title is: WebdriverIO (Software) at DuckDuckGo"
​
    await browser.deleteSession()
})().catch((e) => console.error(e))

 

常用方法

# 前往某网址
browser.url('http://www.google.com');

# 设定栏位的值
browser.element('.email').setValue('aaa@bbb.com');
// 縮寫
$('.email').setValue('aaa@bbb.com');

# 点选栏位的值
browser.click('.some-button');

// 縮寫
$('.some-button').click();
$('[title="Sign Out"]').click();

# 检查某个元素是否存在
browser.waitForExist('.alert-text');

// 縮寫
$('.alert-text').waitForExist();

# 取得某个元素的值
browser.getText('.alert-text');

// 縮寫
$('.alert-text').getText();

# 验证
assert.equal('實際文字內容', '預期文字內容');

# 获取tag属性
browser.url('https://justcode.ikeepstudying.com');
browser.getTitle();
browser.click('.logo');
browser.getAttribute('#search input', 'placeholder');
browser.$('.PostEntry_container_245XM strong').getText();

完整API用法:https://webdriver.io/docs/api/

 

系统要求

您需要安装Node.js。

  • 至少安装 v12.16.1 或更高版本,因为这是最旧的活动 LTS 版本
  • 仅正式支持已成为或将成为 LTS 版本的版本

如果您没有安装 Node,我们建议您安装NVM以协助管理多个活动的 Node.js 版本。如果您在同步模式下使用WDIO Testrunner,则还需要安装 Python v3 或更高版本。

 

常用指令

官网指令种类,分成:

  • Protocol
  • Action
  • Utility
  • Property
  • State
  • Mobile

像我们的前往某网址以及选取元素,就是属于

browser.url('https://justcode.ikeepstudying.com');

 

Action

browser.setValue('input[name=email]', 'demo@yoursite.com'); // 這裡結合 選取元素 與 設定欄位
browser.setValue('input[name=password]', '1234');
browser.click('button[type=submit]');

 

这边会看到检查某个元素是否存在,以及暂停、除错等程式码,则属于

browser.waitForExist('[data-alert-type=danger]');

 

取得某元素文字与值,属于

let alertText = browser.getText('[data-alert-type=danger]');

 

我这边有将每次浏览器执行一个test case 后会等待个3 秒钟,否则有时候会因为衔接的速度太快导致会出现一点画面冲突小问题:

beforeEach(function() {
    browser.pause(5000);
  });

如何?很简单吧!

你会看到同步化的写法,非常的直观易懂,也能轻易的透过browser.debug() 指令做到逐行测试,WebDriverIO API 就是这么单纯可靠,更多的API 就详阅官网吧:

 

更多:https://webdriver.io/docs/gettingstarted

 

本文:浅尝WebDriverIO, 前端自动化测试Webdriver.IO, WebdriverIO教程, WebdriverIO示例, WebdriverIO webdriver, WebdriverIO selenium

Leave a Reply