Introduction

之前有介紹過如何將 WebdriverIO 用於前端測試 及如何整合主流的測試框架， 今天我們將重心放回 WebdriverIO 本身，將介紹 WebdriverIO 的用法及概念。

Preinstall

  • webdriverio
  • selenium-standalone

BINDINGS & COMMANDS

WebdriverIO 的 API 使用主要可以分為兩種類型： Protocol Bindings and Commands。
Protocol bindings 主要為 JSONWire protocol 及 Appium 的實現。 Commands 則是 WebdriverIO 新增的一些的方法。JSONWire protocol 是原本 Selenium 的 API，Appium 是用於手機裝置 API。

以下例子是想要取得 html 中 myElem id 的 width 元素，第一種方法使用的 Protocol Bindings ，第二種方法使用的 Commands 。

  • Protocol Bindings
1
2
3
4
5
browser.element('#myElem').then(function (res) {
    return browser.elementIdCssProperty(res.value.ELEMENT, 'width').then(function (res) {
        assert(res.value === '100px');
    });
});
  • Commands
1
2
3
browser.getCssProperty('#myElem', 'width').then(function (width) {
    assert(width.parsed.value === 100);
});

除了內建的 Commands 之外，也可以自訂 Commands，可以在你的測試檔內任意位置新增，只是要注意必須在使用之前新增。：

  • Custom Commands
1
2
3
4
browser.addCommand("getCssPropertyWidth", function () {
    return width.parsed.value;
});
assert(browser.getCssPropertyWidth() === 100);

Selector 是在 WebdriverIO 中很重要的另一個元素，用來作為 BINDINGS/Commands 的參數之一。在原本的 JsonWireProtocol 提供了多種策略來查詢一個元素， WebdriverIO 簡化了這些，使其更熟悉的常見現有選擇器。

Selector

  • CSS Query Selector
1
browser.click('h2.subheading a');
  • Link Text
1
browser.getText('=WebdriverIO');
  • Partial Link Text
1
browser.getText('*=driver');
  • Element with certain text
1
2
3
4
5
6
browser.getText('h1=Welcome to my Page');
browser.getText('h1*=Welcome');
browser.getText('.someElem=WebdriverIO is the best');
browser.getText('#elem=WebdriverIO is the best');
browser.getText('.someElem*=WebdriverIO');
browser.getText('#elem*=WebdriverIO');

更多 Custom Commands 用法

除了 addCommand 新增基本的 method 之外，WebdriverIO 也提供其他更多更完整的支援。

  • 支援 Promise 跟 async
1
2
3
4
5
6
browser.addCommand("getUrlAndTitle", function async () {
    return Promise.all([
        this.getUrl(),
        this.getTitle()
    ]);
});
  • External libraries 包裝成 custom command
1
2
3
4
5
6
7
8
9
browser.addCommand('doExternalJob', function async (params) {
    return externalLib.command(params);
});

it('execute external library in a sync way', function() {
    browser.url('...');
    browser.doExternalJob('someParam');
    console.log(browser.getTitle()); // returns some title
});

Reference

[1] WebdriverIO

License


本著作由 Chang, Wei-Yaun (v123582) 製作，
以創用CC 姓名標示-相同方式分享 3.0 Unported授權條款釋出。