[Jest-puppeteer] 테스트에 사용된 사용자 정의 속성을 추가하고 가져오는 방법은 무엇입니까?

배경.

Vue.js의 브라우저 테스트에서 Jest-puppeteer를 사용했습니다.
만약에 id와class를 테스트에 사용되는 요소의 목표로 삼으면 규격이 변경될 때 어떤 요소가 테스트와 관련이 있는지 모르고 예상치 못한 부분에 오류가 발생할 수 있습니다.이러한 상황을 피하기 위해서는 사용자 정의 속성을 추가해야 한다.
저는 예전에 Cypress의 설치data-cy를 접해 봤습니다. 사용자 정의 속성으로 사용하는 습관이 있다는 것을 알았지만 Jeest-puppeter에 규정이 없는 것 같아서 개인의 판단에 따라 사용할 수 있습니다.
참고로 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에서 사용자 정의 속성을 사용하는 테스트를 수행할 수 있습니다.사용자 정의 속성으로 지정한 요소는 테스트에 사용되는 라벨로 이전보다 전망이 좋죠.
오랜만에 테스트를 쓰다 보니 추가, 사용자 정의 속성 취득에 관한 일이 갑자기 생각나지 않아 내 노트대로 기사를 냈는데, 이 글이 누군가에게 도움이 된다면 좋겠다.

참고 문장

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