CodeceptJSに独自のStep Methodを追加する

5250 ワード
CodeceptJS e2e testing testing テキストリンク

CodeceptJSの記法は独特で、一人称の I から始まる形で操作を記述します。

Scenario('Sample Scenario', () => {
    I.amOnPage('https://example.com')
    I.see('Example Domain')
    I.click('More information...')
    I.see('IANA-managed Reserved Domains')
})

標準で様々なメソッドが用意されています1が、独自のメソッドを用意したい時もあります。
例えば、ログイン処理を共通化し、 I.loginAs(email, password) のように利用したい場合です。

標準で用意されている step_file.js にメソッドを記述することで、メソッドを追加することができます。
ちなみに、ここでアロー関数を使うと上手く動作しませんので、おとなしく function() を使って下さい。 コメントで、簡略構文が使えるとのツッコミがありましたので修正しました！


// in this file you can append custom step methods to 'I' object

module.exports = function() {
  return actor({
    loginAs: function (email, password) {
      this.amOnPage('/')
      this.fillField('email', email)
      this.fillField('password', password)
      this.click('ログイン')
    }
  });
}

step_file.js の場所やファイル名を変更したい場合、 codecept.conf.js の中で定義することができます。


  include: {
    I: './steps/steps_file.js',
  },

追加した定義は、typescriptの型定義ファイルを出力することで、IDEの補完を効かせることができます。


$ node_modules/.bin/codeceptjs def
TypeScript Definitions provide autocompletion in Visual Studio Code and other IDEs
Definitions were generated in steps.d.ts
Load them by adding at the top of a test file:

参考

  1. 利用できるメソッドはドライバごとに若干異なります。例）Webdriverのメソッド一覧 https://codecept.io/helpers/WebDriver#methods ↩