CodeceptJSのCustom Locatorでクリックをきれいに書く

CodeceptJSの I.click() に文字列を渡すと、その文字列をクリックしてくれます。

I.click('ログイン')

ですが、クリックしてくれないものもあります。
Qiitaのトップページを例にあげてみましょう。

ログイン はクリック出来ますが コミュニティ はクリックできません。

I.click('ログイン')      // できる
I.click('コミュニティ')   // できない

この差は何なのでしょう？
実は、 I.click() にCSSでもXPathでもない文字列を渡すと、 <a> <button> などの「クリックできそうな要素」からのみ探索するので、 <div> や <span> などはクリックできなかったりします。

I.click(locate('span').withText('コミュニティ')) のように記述すればクリックできるのですが、これは分かりにくいですね。

というわけで、Custom Locatorでちょっと良い感じのやつを作ってみます。
以下のコードをプロジェクト内の任意の箇所に保存してください（例えば ./customLocators.js など）

customLocators.js

module.exports = () => {
  codeceptjs.locator.addFilter((providedLocator, locatorObj) => {
    if (typeof providedLocator === 'string') {
      if (providedLocator[0] === '=') {
        locatorObj.value = `.//*[text()="${providedLocator.substring(1)}"]`;
        locatorObj.type = 'xpath';
      }
    }
  });
}

それから、codecept.conf.jsの中でそのコードを読み込ませます。

codecept.conf.js

  plugins: {
    customLocator: {
      require: './plugins/locators.js',
      enabled: true,
    },
  },

するとあら不思議、I.click('=コミュニティ')のように = を文字列の頭に付けると、だいたい何でもクリックできるようになります。
すごいですね。
おれたちのCodeceptJSがまた便利になってしまった。

参考