[Jest-puppeteer] 테스트에서 자주 사용하는 사용자 정의 연결 일람

개시하다

Vue.js의 브라우저 테스트에서 Jest-puppeteer를 사용했습니다.
https://qiita.com/rh_taro/items/32bb6851303cbc613124
상기 보도에 추가된 형식なぜ必要で、どういう時に使うのか의 구체적인 예로 소개한다.주로 이 글에서 제작하고 인용한 코드(링크 게재)를 참고해 동작을 확인했다.

bool값으로 요소 여부를 판단하다

waitForSelector에서 지정한 요소가 보이기 전에 설치를 기다릴 수 있지만 요소가 보이지 않으면 오류가 발생하고 테스트가 정지됩니다.
원소가 존재할 때(진짜)는 A의 처리가 필요하고, 원소가 보이지 않을 때(가짜)는 B의 처리 지점이 필요하기 때문에 실현되었다.

export const isElementVisible = async (page, selector) => {
  let visible = true;
  await page.waitForSelector(selector, { visible: true, timeout: 1000 })
  .catch(() => {
    visible = false;
  });
  return visible;
};

https://stackoverflow.com/questions/54112683/how-to-verify-selector-not-present-in-cucumberjs-puppeteer

class 이름 가져오기

클라스의 규격을 동적으로 수정하는 데 도움이 됩니다.구체적으로 테스트에서 버튼의 활성, 비활성 여부를 판단할 때 사용한다.

export const getClassName = async (selector) => {
  return await page.$eval(selector, (element) => {
    return element.className;
  });
};

텍스트 가져오기

이것은 당연히 필수적인 함수다.input시스템의 입력값을 확인하거나 변환된 제목을 얻는 등 통용성이 매우 높고 빈도가 가장 높을 수 있습니다.

export const getTextContent = async (selector) => {
  return await page.$eval(selector, (element) => {
    return element.textContent;
  });
};

input 필드 지우기

편집 기능 테스트를 사용하거나 인증 테스트로 input 필드에 여러 번 값을 입력할 때 이 함수를 비우는 것이 유용합니다.

export const resetInputValue = async (selector) => {
  await page.$eval(selector, (element) => (element.value = ''));
};

https://github.com/segmentio/nightmare/issues/810

페이지 맨 아래로 스크롤

z-idex에서 원소에 이 원소를 덮어쓰면 값을 입력하거나 원소를 가져올 수 없습니다.
덮어쓴 요소를 무시하고 조작할 수도 있지만 일단 굴러가면 나중에 테스트를 하는 것이 편리하기 때문에 굴러가는 것을 선택했다.

export const autoScrollToBottom = async (page) => {
  await page.evaluate(async () => {
    await new Promise((resolve) => {
      let totalHeight = 0;
      const distance = 100;
      const timer = setInterval(() => {
        /* eslint-disable */
        const scrollHeight = document.body.scrollHeight;
        /* eslint-enable */
        window.scrollBy(0, distance);
        totalHeight += distance;
        if (totalHeight >= scrollHeight) {
          clearInterval(timer);
          resolve();
        }
      }, 100);
    });
  });
};

https://github.com/puppeteer/puppeteer/issues/305

라디오 버튼을 누릅니다.

label과 연동할 때만 > 을 누르면 누르는 요소가 checked인지 확인합니다.

export const fillInputRadio = async (customAttribute) => {
  await page.click(`[data-jp="label-${customAttribute}"]`);
  const inputRadio = await page.$(`[data-jp="input-${customAttribute}"]`);
  const isRadioSelected = await (
    await inputRadio.getProperty('checked')
  ).jsonValue();
  expect(isRadioSelected).toEqual(true);
};

최후

저는 개인적으로 e2e테스트의 사용 함수는 고정되어 있기 때문에 유연하게 사용할 수 있다면 후반부에 설치하기가 비교적 수월할 것이라고 생각합니다.(따라서 모듈화를 전제로 코드 형식으로 소개한다.)
특히 대본이 길어지면 코드가 지루해지기 쉬우므로 코드의 품질과 안전성을 유지하기 위해 의식적으로 조언을 하는 것이 필요하다.