十分鐘學寫

一個前端測試程式

by alincode

https://goo.gl/QIUvvI

投影片

initial project

create project

mkdir ctjs-webdriverio-sandbox
cd ctjs-webdriverio-sandbox
npm init -y

install package

npm i webdriverio -D
npm i wdio-selenium-standalone-service -D

setting config

generate config tool

./node_modules/webdriverio/bin/wdio

wdio

vi wdio.conf.js

capabilities: [{
  browserName: 'chrome'
}],
services: ['selenium-standalone'],
mochaOpts: {
  timeout: 60000
},

init folder

mkdir -p ./test/specs/
mkdir -p ./errorShots/

write some code

1. 操作行為
2. 取得值
3. 判斷結果

操作行為

browser.click('.open-panel');

Click

doubleClick

setValue

submitForm

取得值

var title = browser.getTitle();

getTitle

getText

getValue

getText

判斷結果

assert.equal(title, '教你所想學的，用眼樂讀 - blog.mokayo.com');

equal

exist

length

match

vi test/specs/test.js

var assert = require('assert');

describe('mokayo page', function() {
  it('should have the right title', function() {
    browser.url('http://blog.mokayo.com');
    var title = browser.getTitle();
    assert.equal(title, '教你所想學的，用眼樂讀 - blog.mokayo.com');
  });
});

真實世界範例 - 登入流程

describe('正常登入流程', function() {  
  it('前往登入頁', function(done) {
    browser.url('/');
    browser.click('.open-panel');
    browser.click('[href*=login]');
    browser.waitForExist('[name=identifier]');
    browser.getText('.login-screen-title').should.be.equal(
      'Login');
  });

  it('填寫登入資料並送出', function(done) {
    browser.elements('[name=identifier]').setValue('demo');
    browser.elements('[name=password]').setValue('11111111');
    browser.click('[type=submit]');
    browser.isExisting('[name=identifier]', false).should.be.equal(
      true);
  });

  it('登入成功', function(done) {
    browser.pause(2000);
    browser.click('.open-panel');
    browser.waitForExist('[href*=logout]');
    browser.isExisting('[href*=logout]').should.be.equal(true);
  });
});

前往登入頁

填寫登入資料並送出

登入成功

完整 source code

summary

Follow me