WebdriverIO 與 Chimp 和 Mocha 整合

Posted at 2016-04-30 前端測試 WebdriverIO Chimp Mocha

此篇與之前的教學延續，WebdriverIO 基礎的部分，請看舊文。

安裝 Chimp

npm install -g chimp

撰寫一個自動化測試 script

官方範例

圖片來自於官方網站

這邊就直接使用了官網上的範例。需要特別注意的一點是在測試描述的標題上，需要加入 @watch 才會被監聽。

describe('Chimp Mocha', () => {
  describe('Page title', () => {
    it('should be set by the Meteor method @watch', () => {
      browser.url('http://google.com');
      expect(browser.getTitle()).to.equal('Google');
    });
  });

  describe('ES2015', function () {
    it('is supported', function () {
      const {a, b} = {a: 'foo', b: 'bar'};
      const arrowFunc = (foo) => foo;
      class Foo {
        constructor() {}
        foo() {}
      }
      var object = {
        foo() {}
      };
      const templateString = `Foo`;
      const [c, ,d] = [1,2,3];
    });
  });
});

執行

chimp --mocha --watch --path=test

預設的 path 是 features 資料夾，如果你的測試資料夾不在預設位置，則需另外指定 path 得值。

問題排解

Using removed Babel 5 option: base.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets

安裝 Babel

1
2
3

npm i babel-preset-es2015 -S
npm i babel-preset-stage-2 -S
npm i babel-plugin-transform-runtime -S

建立 Babel 設定檔 .babelrc

 {
  "plugins": ["transform-runtime"],
  "presets": ["es2015", "stage-2"]
}

參考資料

chimp 官網

原始範例下載

Previous post: WebdriverIO 介紹 Next post: 被討厭的勇氣 (重點 5) - 認真活在當下

Typography

活版印字