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

カスタム属性を追加する

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

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

参考記事

• https://stackoverflow.com/questions/57691509/puppeteer-find-element-by-html-attribute