빠르고 더티 비주얼 테스팅 👁

테스트는 필수적이지만 항상 그런 것은 아닙니다.

나는 나 자신을 발견했고 많은 전문적인 친구들이 빡빡한 마감 시간에 프리랜서 프로젝트에 참여하고 테스트하기 쉽지 않은 프레임워크(Gatsby, Next.js 등)를 다루고 테스트 부분을 무시하는 것을 보았습니다.

이와 같은 경우 좋은 결과물 품질을 보장하기 위해 무엇을 할 수 있습니까?
E2E 테스트를 설정할 수 있지만 중요한 시각적 변경 사항을 쉽게 놓칠 수 있습니다. 아니면 Chromatic과 같은 서비스로 시각적 테스트를 설정하고 모든 배포에서 승인을 위해 대시보드를 방문하시겠습니까?

앞서 언급한 옵션은 완전히 유효하지만 개발-테스트-배포 루프에 더 많은 시간을 추가할 수 있으며 시간은 돈입니다. 💸 이것이 제가 빠르고 더러운 시각적 테스트를 수행하기 위해 Cyclopes 👁라는 프로젝트를 시작한 이유입니다.

사이클롭스 작동 방식

Cyclopes는 웹 앱의 중요한 페이지의 스크린샷을 캡처한 다음 Slack 또는 Trello와 같이 즐겨 사용하는 도구로 보낼 수 있도록 도와주는 최소한의 CLI 도구입니다.

따라서 기본적으로 도움이 되는 두 가지 주요 기능이 있습니다.

웹 앱의 변경 사항을 캡처한 다음

고객, 팀원, QA 엔지니어 등과 소통합니다.

사이클롭스 사용법

사이클로프를 사용하는 것은 정말 쉽습니다. 아래의 모든 코드는 public repo here 👈에서 공유됩니다.

사이클롭스 설치

리포지토리 내에 다음 명령 중 하나를 사용하여 사이클로프를 설치해 보겠습니다. 처음 두 개는 매우 가벼운 npm 패키지를 다운로드합니다. 싸이클롭스의 바이너리가 발견되지 않으면 첫 번째 실행에서 다운로드가 되기 때문입니다.

# npm
npm install cyclopes

# yarn
yarn add cyclopes

# golang (for Hugo folks)
go get -u github.com/konsalex/cyclopes

사이클롭스 설정

사이클로프를 설정하려면 먼저 몇 가지 세부 사항을 파악해야 합니다. 저장소의 루트에 cyclops.yml 파일을 생성하고 다음 내용을 붙여넣습니다.

# Directory where the images will be saved
# and/or retrieved from the channel adapters
imagesDir: "./images"

visual:
  # Path where our web-app is built
  # Useful in CI environments where we build
  # the website and the artifacts are ready
  buildDir: "./public"
  # Pages to visit and screenshot
  pages:
    # Path of the page
    - path: "/"
      # Type of device to screenshot
      device: "both"
      # Delay after the page is loaded
      delay: 2000
      screenshot: "fullpage"
    - path: "/contact"
      device: "mobile"
    - path: "team/"
      device: "desktop"
      screenshot: "viewport"

그렇다면 위의 구성은 무엇을 하는 것일까요? 간단히 말해서:

모든 이미지를 ./images 폴더에 저장합니다.

./public 폴더에서 제공할 웹사이트 찾기

이제 pages의 모든 페이지에 대해 반복 및 스크린샷

더 많은 옵션을 보려면 프로젝트 저장소에서 README을 볼 수 있으며 옵션의 기본값도 찾을 수 있습니다.

CLI 실행

이제 사이클로프를 실행하고 결과를 확인해 봅시다.

yarn cyclopes

모든 것이 성공적이었다면 images 폴더에 4개의 새 이미지가 있어야 합니다(그 중 하나는 아래에 첨부됨) 🎊



웹앱에서 찍은 스크린샷입니다. 정말 쉽습니다!

결과를 Slack으로 보내기(선택 사항)

이 CLI를 만든 궁극적인 이유는 클라이언트와 저 사이의 피드백 루프가 더 빨라졌기 때문입니다. 특히 제가 물건을 망가뜨릴 때 🤭 그래서 Slack 어댑터가 포함되어 있어 스크린샷을 Slack 작업 공간으로 보낼 수 있습니다.

Slack 어댑터를 설정하기 위해 다음 코드를 사용하여 구성 파일을 확장할 수 있습니다(Slack 봇을 만들었다고 가정).

adapters:
  slack:
    OAUTH_TOKEN: example-token
    CHANNEL_ID: example-token

결과는 아래 이미지와 같아야 합니다.