CK's Notepad

[Angular] Protractor

發表於 分類於 Disqus：

Protractor 也是一個出自 Google 之手的 E2E 測試框架，當初是為了測試 AngularJS 所開發出來的 E2E，當然也可以用來測試其他的一般網站，跟 Angular 2 (廢言)。雖然 Protractor 出來很久了，但是一直都沒有仔細的去研究怎麼使用，這篇文章就來記錄一些。

(不談怎麼設定環境，因為 Angular CLI 已經幫我們處理好了)

目的

E2E 是利用程式來模擬使用者操作網頁的動作，測試網頁程式有符合預期的實際操作流程與結果

語法

browser

跟瀏覽器有關的行為，可透過這物件控制，列出幾個常用的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// at the top of the test spec:
const fs = require('fs');

// abstract writing screen shot to a file
function writeScreenShot(data, filename) {
  const stream = fs.createWriteStream(filename);
  stream.write(new Buffer(data, 'base64'));
  stream.end();
}

...
it('should have selected', () => {
  page.navigateTo();
  browser.takeScreenshot().then(function(png) {
    writeScreenShot(png, 'exception.png');
  });    
})

by

by 是定位器 (locator)，用來搜尋 element 使用的，常用的方法有

  • 單一 element
    • css：使用 CSS Selector 來定位 element
    • id：利用 Id 來定位 element
  • 一個或多個 elements
    • linkText：利用連結文字來定位 elements
    • partialLinkText：利用部分連結文字來定位 elements
    • name：利用 name 來定位 elements
    • className：利用 css class 來定位 elements
    • tagName：利用 tag name 來定位 elements
    • xpath：利用 xpath 來定位 elements (可透過瀏覽器取得該元件的 xpath)
  • 尋找按鈕(button) - 建議使用 by.css 取代

element

element 需要搭配 locator 使用，進而取得想要的 HTMLElement。常用方法(完整文件)如下

  • element(locator)
    • isPresent：是否有符合條件的 element
    • click：執行 click 動作
    • sendKeys：送出鍵盤動作。例如：打字到 Input 上
    • getAttribute： 取得 element 的 屬性值
    • getText： 取得 innerText
    • isEnabled：判斷 element 是否有 disabled 屬性
    • isSelected：判斷 element 是否 selected 屬性
    • submit： 執行 Form submit 動作
    • clear：清除 value 欄位
    • isDisplayed：判斷 element 是否有顯示在畫面上 ，可能被設定 visibility 被設定為 false
  • element.all(locator)
    • get：使用 ElementArrayIndex 取得特定位置的 element
    • count：符合條件的 element 數量
    • isPresent：是否有符合條件的 element

小技巧

加快 E2E 的測試速度

關掉 serve

預設的 E2E 是會先執行 serve 後在進行測試，可是這樣子的預設行為，都會因為 server 的建置時間而拖慢測試速度。所以可以將這兩個動作分別執行。 E2E 可以關掉 serve的動作，指令如下

ng e2e --serve=false

以上的設定方式，當執行 ng e2e時，就只會單純跑測試了。

使用 chrome headless

修改 protractor.conf.js，新增 chromeOptions 區塊內容，這樣的設定在執行 e2e 時，就不會跳出瀏覽器了

1
2
3
4
5
6
7
8
...
 capabilities: {
    'browserName': 'chrome',
    chromeOptions: {
      args: [ "--headless", "--disable-gpu", "--window-size=1920, 1080" ]
    }
 },
 ...

詳細說明請參閱燈哥的文章

使用 PageObject

一個頁面上的 Element 很多，大多數的時間，這些 Element 都因為不同的操作流程而被重複操作著，這時候利用 PageObject 的方式將 Element 封裝。

1
2
3
4
5
6
7
8
9
10
11
import {browser, by, element} from 'protractor';

export class NgRPage {
  navigateTo() {
    return browser.get('/');
  }

  getParagraphText() {
    return element(by.css('app-root h1')).getText();
  }
}

使用方式如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import {NgRPage} from './app.po';

describe('ng-r App', () => {
  let page: NgRPage;

  beforeEach(() => {
    page = new NgRPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('todos');
  });
});

element 與 element.all 的混搭

element(locator) 只能取回單一元素，但是可以串接下去的。例如說，我想要取得某個 select options 的值，寫法可以有兩種

1
2
3
4
// method 2
element(by.css('ul>li'));  
// method 2
element(by.name('sel')).all(by.css('li'))

我個人是比較喜歡第二種的寫法，比較清爽一點

參考資料