JavaScript
CodeceptJS

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

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


I.click('ログイン')

ですが、クリックしてくれないものもあります。

Qiitaのトップページを例にあげてみましょう。

image.png

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


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がまた便利になってしまった。


参考

https://codecept.io/locators#custom-locators