번역 키에 대한 스크린샷 생성

스크린샷은 번역 키에 대한 컨텍스트를 제공하므로 번역가에게 유용한 도구입니다. 적절한 문맥에서 텍스트를 보면 올바른 번역을 훨씬 쉽게 만들 수 있습니다.

이 가이드는 귀하가 Cypress 사용법을 알고 있고 프로젝트에 이미 설정되어 있다고 가정합니다. 번역 키에 대한 스크린샷을 만들기 위해 Cypress를 설치하는 것은 권장하지 않습니다.

tkey 데이터 속성 제공

이 솔루션이 작동하려면 모든 번역 키에 대해 tkey data attribute을 제공해야 합니다. 이것은 스크린샷이 올바른 파일 이름을 받을 수 있도록 하기 위해 필요합니다.

이를 달성하는 방법에는 여러 가지가 있으며 구현은 사용하는 프레임워크에 따라 다릅니다.

내 Svelte 코드의 경우 번역 키를 래핑하는 데 사용하는 구성 요소를 만들었습니다.

<script>
  import { format } from "svelte-i18n"

  export let key
</script>

<span data-tkey={key}>
  {$format(key)}
</span>

이렇게 하면 수동으로 지정할 필요가 없습니다. 모든 번역 키에 대해 암시적입니다.

스크린샷 만들기

Cypress로 스크린샷을 만드는 것은 쉽습니다.

cy.screenshot(fileName)

그러나 각 번역 키에 대해 올바른 파일 이름으로 별도의 파일을 만들어야 합니다.

cy.get('[data-tkey]').each($el => {
  const tkey = $el.data('tkey')
  console.log(`📸 Creating screenshots for ${tkey}}`)
  cy.screenshot(`__tkey-${tkey}`)
})

이미 시각적 회귀 테스트에 Cypress를 사용하고 있으므로 이미 스크린샷을 생성한 곳에 이 코드를 넣습니다. 시각적 회귀 테스트를 사용하지 않는 경우 다른 옵션이 있습니다. the window:load event.에서 이 코드를 실행하는 것을 고려할 수 있습니다.

Cypress 테스트를 실행한 후 이미 스크린샷을 확인했습니다.



문제는 페이지에 다양한 번역 키가 포함될 수 있다는 것입니다. 이 방법을 사용하면 각 번역 키가 동일한 페이지에 있는 경우 동일한 스크린샷을 갖게 됩니다. 특정 번역 키를 찾기 어려울 수 있기 때문에 이상적이지 않습니다.

스크린샷에 번역 요약

번역가의 관심을 유도하는 좋은 방법은 스크린샷의 관련 부분을 표시하는 것입니다.

관련 DOM 노드 주위에 빨간색 사각형을 그리기로 했습니다. 다행스럽게도 뷰포트에 상대적인 DOM 노드의 위치와 크기를 찾는 것은 매우 쉽습니다.

$el[0].getBoundingClientRect()

이를 사용하여 페이지에서 특정 DOM 요소를 강조 표시하는 함수를 만들 수 있습니다.

const createRectangle = ({ left, top, width, height }) => {
  const rectangle = document.createElement("div");
  rectangle.setAttribute(
    "style",
    `position: fixed;
     left: ${left - 5}px;
     top: ${top - 5}px;
     width: ${width + 15}px;
     height: ${height + 15}px;
     border: 3px dashed red;
     z-index: 1000000;`
  );

  return rectangle;
};

const createElementHighlighter = (element) => {
  return createRectangle(element.getBoundingClientRect());
};

이 기능을 사용하여 스크린샷을 찍기 전에 각 요소를 강조 표시할 수 있습니다.

cy.get("[data-tkey]").each(($el) => {
  const tkey = $el.data("tkey");
  const highlighter = createElementHighlighter($el[0]);

  cy.window().then((win) => {
    win.document.body.appendChild(highlighter);
  });

  console.log(`📸 Creating screenshots for ${tkey}}`);
  cy.screenshot(`__tkey-${tkey}`);

  cy.window().then((win) => {
    win.document.body.removeChild(highlighter);
  });
});

지금 테스트를 실행하면 요소가 올바르게 표시되는 것을 볼 수 있습니다 🎉. 예:

단점

이 접근 방식에는 몇 가지 제한 사항과 단점이 있습니다. 몇 가지 예를 들자면:

이러한 파일은 매우 자주 변경될 수 있으므로 git에 체크인하지 않는 것이 좋습니다. 대신 번역 플랫폼에 직접 업로드하는 것이 좋습니다.

앱의 특정 영역을 다루는 Cypress 테스트가 아직 없는 경우 이 방법으로 스크린샷을 만드는 것은 유용하지 않습니다

.

Cypress 테스트 속도가 약간 느려지지만 환경 변수가 설정된 경우에만 스크린샷을 생성하면 속도가 느려질 수 있습니다

.