【jest-puppeteer】テストで使うカスタム属性の追加と取得はどうやるのか？

4288 ワード
テキストリンク

背景

Vue.jsでのブラウザテストとしてjest-puppeteerを採用しています。

idやclassをテストで使う要素のターゲットにしていると仕様変更の際にどの要素がテストと関わっているのか分からず思わぬところでエラーが発生します。これを回避するためにカスタム属性の追加は必須になってきます。

過去にCypressの実装に触れたことがありdata-cyをカスタム属性として使用する慣習があることを知ったのですがjest-puppeteerでは決まりごとがはないようなので個人の判断でつけて良いようですね。

ちなみにCypressの公式にもカスタム属性を使うようベストプラクティスに記載されています。

https://docs.cypress.io/guides/references/best-practices

カスタム属性を追加する

個人的にjest-puppeteerの頭文字をとってdata-jpをカスタム属性として使用しています。

<p class="title" data-jp="title">{{ これはタイトル }}</p>

カスタム属性を取得する

下記はカスタム属性の要素からテキストを抽出する具体例です。

const getTextContent = async (selector) => {
  return await page.$eval(selector, (element) => {
    return element.textContent;
  });
};
const titleText = await getTextContent('[data-jp="title"]');
expect(titleText).toEqual("これはタイトル");

最後に

jest-puppeteerでカスタム属性を使ったテストの実装方法ができるようになりました。カスタム属性で指定された要素はテストで使われているタグなのだなと以前より見通しが良くなったのではないでしょうか。

久しぶりにテストを書こうとするとカスタム属性の追加・取得についてパッと思い出せないことがあるので自分のメモように記事を作成しましたが、この記事がどなたかの助けになりましたら幸いです。

参考記事

Next.js + VercelとSentryを連携させる
Swiftの関数に対する実装と抽象の分離の実現（関数のDI）