用 WebdriverIO 寫一個真實世界的登入範例

Posted at 2016-06-13 前端測試 WebdriverIO

此篇會先以最基本的方式去撰寫，下一篇會將此篇相同的程式改寫成 Page Object Pattern。

步驟解說

這是一個真實世界測試案例，針對正常登入流程進行測試，基本流程就是前往登入頁，並填入帳號密碼後，按登入按鈕，確認是否登入成功。現在我們一步一步去看，它到底做了什麼。

步驟一

圖一

因為前端測試是模擬使用者的行為，所以它只能點選使用者可視範圍，登入頁的連結是被隱藏在左側，所以需要先把側欄畫面點開來。

圖二

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);
});

展開側欄
確認有登出連結在畫面中

完整測試程式碼

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);
  });
});

Previous post: 整合 wdio selenium standalone service Next post: WebdriverIO 常用語法(3)

Typography

活版印字

步驟解說

步驟一

步驟二

步驟三

完整測試程式碼