안녕하세요 @glassmonkey입니다.

이 기사는 GitHub Actions Advent Calendar 2020 마지막 날 기사입니다.

여러분 크리스마스는 어떻습니까?
나는이 기사의 재료의 액션을 만드는 것을 잊고 밤 냄비에서 만들었습니다.

오히려 나 자신의 개인 개발에서 사용하는 것을 메인으로 하고 있기 때문에, 기능 등 여러가지 부족한 곳은 조금씩 더해 갈 수 있다고는 생각하고 있습니다.

소개

이번에는 비주얼 리그레션 테스트를 실시하는 Github Action을 만들어 보았습니다.

마켓플레이스 에 올리고 있으므로, 흥미가 있는 분은 봐 주세요.

소스 코드도 glassmonkey/image-regression-notification에 있습니다.

구현의 상세에 대해서는 과거의 내가 썼다 GitHub Pages를 시각적 회귀 테스트를 해 보았습니다.

무슨 행동

아래와 같이 BASE_URL과 COMPARE_URL의 두 URL을 제공하여 스크린 샷을 찍고,
차이 이미지를 Slack에 게시하는 Action입니다.

- uses: glassmonkey/[email protected]
  with:
    BASE_URL: https://example.com
    COMPARE_URL: https://test.example.com
    SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}
    SLACK_CHANNEL: ${{ secrets.SLACK_CHANNEL }}
    ENABLE_SHOW_DIFF: false

SLACK_TOKEN는 Slack bot의 토큰을 지정합니다.
files.upload 할 필요가 있기 때문에 가능한 bot를 만들 필요가 있으므로주의하십시오.

예

실험에서 https://ore-timer.xyz/ 와 변경 차이를 나타내는 https://stage-ore-timer.netlify.app/ 의 변경을 비교해 봅니다. (페이지는 내 개인 개발 LP입니다)



h1 텍스트를 作業の集中を可視化 에서 作業の集中を可視化します 로 변경해 보았습니다만,
변경 부분이 빨간색 직사각형으로 둘러싸여 있음을 알 수 있습니다.

이러한 느낌으로 쉽게 표시 변경 영향을 slack에서 확인할 수 있습니다.

PR 시에는 로컬에서 docker-compose 등으로 CI 환경에서 호스팅한 페이지를 COMPARE_URL 로 지정함으로써 PR에 대응한 차분 검지에 이용할 수도 있습니다.

도전

Github Container Resistory에 도전하려고 생각했지만,
시간의 관계상 단념해 버렸습니다. 액션의 실행 시간은 이것으로 대폭 단축할 수 있는 전망입니다.

스크린샷의 사이즈도 유연하게 할 수 있도록(듯이) 하려고 생각하고 있으므로, 여기도 변경 예정입니다.

요약

이미지 회귀를 slack 통지하는 action을 추가해 보았습니다. 우선 개인에서 사용하는 분으로 여러가지 해볼까라는 느낌이므로 피드백 등 있으면 기쁘게 생각합니다.