들어가며
현재 진행중인 프로젝트에서 Github Actions로 워크플로우를 구축하던 중 로컬에서는 골든 테스트가 성공하지만 워크플로우에서는 특정 골든 테스트 케이스가 실패하는 에러가 발생했습니다. 오늘 이 원인과 해결 과정을 공유하려 합니다.
사건의 발단
현재 진행중인 Solo Play 프로젝트에서는 Github Actions로 PR에 대한 모든 테스트 검증을 진행하여 미리 오류를 방지하려 CI/CD 워크플로우를 제작하였습니다.
다만, 로컬 환경에서는 모든 테스트가 통과하였지만, 워크플로우에서는 특정 동일한 케이스가 지속적으로 에러를 발생시켰습니다.
해결 방법
오류 메시지는 지속적으로 픽셀 차이가 발생했다는 에러를 반환하였는데요.
관련 레퍼런스를 찾다가 StackOverflow에서 워크플로우 OS와 로컬 개발 환경 OS에서 제작된 골든 테스트 파일은 Pixel의 차이가 발생할 수 있다는 글을 발견하여 스크립트를 로컬 환경인 MacOS로 변경하였습니다.
jobs:
test:
runs-on: macos-latest # 원래는 ubuntu-latest
이를 통해 워크플로우가 성공적으로 동작하여 에러를 해결할 수 있었습니다. 저희팀 경우에는 팀원 전체가 로컬 환경이 MacOS이기에 OS만 변경하였지만, 만약 다른 로컬 환경인 경우 분기 처리가 가능한지 고민해봐야 될 것 같습니다.
(추가)왜 OS별로 픽셀이 다를까?
여러 커뮤니티를 확인하며 찾아낸 플러터 골든테스트에서 OS마다 픽셀 차이가 나는 이유는, 그래픽을 그리는 방식에 차이가 있기 때문입니다.
렌더링 엔진과 라이브러리 차이
Windows, macOS, Linux 등 각각의 OS는 그래픽을 그리는 라이브러리나 폰트 렌더링, 그림자 처리, 안티앨리어싱 방식 등이 다릅니다. 같은 위젯이라도 OS별로 미세하게 다르게 보일 수 있습니다.폰트 및 시스템 설정
시스템에 기본 설치된 폰트의 종류나 크기, DPI 값이 다르기 때문에, 동일한 코드여도 글자가 조금 다르게 렌더링될 수 있습니다.Skia 엔진 빌드 환경
플러터는 내부적으로 Skia 엔진을 써서 UI를 그리는데, 운영체제마다 Skia 빌드 방식이나 최적화 설정이 달라 미세한 차이가 생깁니다.이미지 인코딩과 PNG 처리 로직
각 OS가 이미지를 처리하는 라이브러리의 구현 방식이 다릅니다. PNG 등 이미지 포맷을 저장하거나 불러올 때 미묘한 픽셀 차이가 발생합니다.해결하기 위해서는?
픽셀의 일정 차이까지는 허용하는 tolerance를 설정하여, 미세한 OS 차이는 무시할 수 있습니다.
가능하다면 팀 전체가 동일한 테스트 환경(Docker 등)에서 테스트를 돌리는 것도 방법입니다.
