Percy와의 시각적 테스트 안내서

Percy : 원활한 UI 품질에 대한 시각적 테스트 자동화 Percy와 파트너십을 맺고 제작 된이 기사는 자동화 된 시각적 테스트를 구현하여 사용자 인터페이스 (UI)가 다양한 브라우저와 화면 크기에 따라 일관성을 유지하는 방법을 살펴 봅니다. 단위 및 통합 테스트는 응용 프로그램 논리를 확인하지만 종종 시각적 결함을 놓치고 있습니다. Percy는 시각적 스냅 샷을 캡처하고 비교하는 프로세스를 자동화하고 불일치를 강조하고 검토 프로세스를 간소화하여 솔루션을 제공합니다.

이 자습서는 API 중심의 단일 페이지 응용 프로그램을 실용적인 예로 사용합니다. Percy가 동적 데이터를 처리하고 효율적인 시각적 리뷰 및 승인을 위해 워크 플로와 통합하는 방법을 배우게됩니다. Percy의 주요 이점 :

UI 문제의 조기 탐지 : 기존 테스트에서 누락 된 시각적 버그를 잡아 브라우저 및 화면 크기에 걸쳐 일관된 UI를 보장합니다. 자동화 된 스냅 샷 비교 :

는 시각적 스냅 샷의 캡처 및 비교를 자동화하여 쉬운 검토를위한 차이점을 강조합니다. 간단한 통합 : 설치 및 통합은 표준 테스트 프레임 워크 설정과 유사합니다. 동적 데이터 처리 :

동적 데이터를 효과적으로 관리하여 동적 데이터를 효과적으로 관리하여 데이터 변경으로 인한 오 탐지를 방지합니다. 간소화 된 승인 워크 플로 :

팀 검토 및 시각적 변경의 승인을 촉진하여 의도 된 수정 만 배포되도록합니다. 다재다능한 SDK :

는 다양한 테스트 프레임 워크에 대한 SDK를 제공하여 기존 개발 환경과의 호환성을 향상시킵니다. 전제 조건 : 이 튜토리얼은 ES6 구문, Express.js (편안한 API 용), jQuery, axios, CSS 프레임 워크, GIT 분기 전략 및 이상적으로 테스트 프레임 워크에 대한 경험에 익숙한 고급 JavaScript 개발자를 대상으로합니다. GitHub 계정이 필요합니다. Github에서 사용할 수있는 샘플 통화 응용 프로그램을 사용하겠습니다

Percy 이해 :

Percy는 웹 앱, 정적 사이트 및 구성 요소 라이브러리의 시각적 테스트를위한 플랫폼 및 워크 플로우를 제공합니다. 무료 계획에는 무제한 팀원, 매월 5,000 개의 스냅 샷 (1 개월 내역) 및 무제한 프로젝트가 포함됩니다. 프로세스에는 SDK 설치, 프로젝트 대시 보드 생성 및 코드베이스와 통합이 포함됩니다. Percy는 Chrome 및 Firefox에서 스냅 샷을 렌더링하여 최대 10 개의 화면 해상도를 지원합니다.

구현 단계 :

데모 프로젝트 설정 : 포크 제공된 github 저장소를 포크하고 readme 지침을 따라 샘플 통화 애플리케이션을 설정합니다.

Percy Project Dashboard 설정 :
1. 무료 Percy 계정에 가입하고 프로젝트를 작성하고 ( "Percy-Tutorial") GitHub 저장소에 연결하십시오. <..>

   Percy Snapshots 생성 : 패키지를 설치하십시오 (). 를 작성하십시오 (코드의 원본 기사 참조). 이 스크립트는 인형극을 사용하여 응용 프로그램과 상호 작용하고 각 페이지에 대한 스냅 샷을 생성합니다. 퍼시 스크립트를 실행하기 전에 별도의 터미널에서

   를 실행하여 응용 프로그램을 시작하십시오.
2. 동적 데이터 처리 :

   수정 API 요청을 가로 채고 응답을 모의 데이터로 바꾸어 일관된 스냅 샷을 보장합니다. (업데이트 된 코드의 원본 기사를 참조하십시오) PERCY_TOKEN 승인 워크 플로 :

   피처 브랜치 생성, 시각적 변경, 커밋, 푸시, GitHub에서 풀 요청 생성, 퍼시 테스트 실행, 퍼시 대시 보드에서 빌드를 승인하고 분기를 병합합니다. 마지막으로 마스터 브랜치를 업데이트하고 Percy Tests를 다시 실행하여 새로운 기준을 설정합니다.

3. 연속 통합 (CI) 및 SDK 통합 : Percy는 자동화 된 테스트를 위해 다양한 CI/CD 플랫폼 (Appveyor, Azure Pipelines 등)과 통합됩니다. 또한 다양한 테스트 프레임 워크 (예 : Cypress)와 통합하기위한 다양한 SDK를 지원합니다. 원래 기사는 사이프러스 통합의 예를 제공합니다 결론 : @percy/script Percy는 프로세스를 자동화하고 시각적 변경을 검토하고 승인하기위한 간소화 된 워크 플로를 제공하여 UI 테스트를 크게 향상시킵니다. Percy를 개발 프로세스에 통합함으로써 시각적 결함으로 제품을 방출 할 위험을 크게 줄일 수 있습니다. 원래 기사의 FAQ는 시각적 테스트 개념 및 퍼시 기능에 대한 자세한 내용을 제공합니다.

위 내용은 Percy와의 시각적 테스트 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!