유령으로 시각적 회귀 테스트
- Lisa Kudrow원래의
- 2025-02-21 08:24:11847검색
- 시각적 회귀 테스트
- .
시각적 회귀 테스트는 웹 페이지 테스트에 대한 대안적인 접근 방식을 취합니다. DOM에 일부 요소 또는 텍스트 값이 존재하는지 확인하는 대신 테스트는 실제로 페이지를 열고이 특정 블록 가 원하는 것처럼 보이는지 확인합니다. 차이를 선택했는지 확인하기 위해 예를 들어 보겠습니다. 귀하의 웹 사이트가 친근한 메시지로 방문자를 맞이하기를 원한다고 상상해보십시오.
<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>
, 즉 디스플레이로 요소가 숨겨져 있지 않은지 확인하기 위해 : 없음 또는 그 누군가가 실수로 텍스트의 색상을 상체하지 않았습니다. 이를위한 많은 도구가 있지만 오늘날 우리는 특히 하나의 옵션을 살펴볼 것입니다. Phantomcss.
<.> 유사 .js - 이미지 비교를위한 라이브러리.
<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span> <span><span><span><head</span>></span>
</span> <span><span><span><style</span>></span><span>
</span></span><span><span> <span><span>.tag</span> {
</span></span></span><span><span> <span>color: #fff;
</span></span></span><span><span> <span>font-size: 30px;
</span></span></span><span><span> <span>border-radius: 10px;
</span></span></span><span><span> <span>padding: 10px;
</span></span></span><span><span> <span>margin: 10px;
</span></span></span><span><span> <span>width: 500px;
</span></span></span><span><span> <span>}
</span></span></span><span><span>
</span></span><span><span> <span><span>.tag-first</span> {
</span></span></span><span><span> <span>background: lightcoral;
</span></span></span><span><span> <span>}
</span></span></span><span><span>
</span></span><span><span> <span><span>.tag-second</span> {
</span></span></span><span><span> <span>background: lightskyblue;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span> <span><span><span></head</span>></span>
</span>
<span><span><span><body</span>></span>
</span> <span><span><span><div</span> class<span>="tag tag-first"</span>></span>The moving finger writes, and having written moves on.<span><span></div</span>></span>
</span> <span><span><span><div</span> class<span>="tag tag-second"</span>></span>Nor all thy piety nor all thy wit, can cancel half a line of it.<span><span></div</span>></span>
</span> <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
처음으로 테스트를 실행 했으므로 새로운 기준 스크린 샷을 만들고 비교를 수행하지 않습니다. 계속해서 스크린 샷 폴더를 들여다보십시오. 당신은 다음과 같은 이미지를보아야합니다 :
<span>npm init </span><span>npm install http-server --save-dev</span>
두 개의 더블 대시에 주목하십시오. NPM의 매개 변수를 기본 명령에 전달하는 방법입니다. 따라서 다음 명령은 casperjs test.js -rebase를 초래합니다. 이제 변경 사항을 수락 했으므로 이전 기준 이미지는 새로운 이미지로 대체됩니다.
더 가져가
이제 기본 사항을 중단 했으므로이 도구를 자신의 워크 플로에 통합하는 것에 대해 생각할 수 있습니다. 프로젝트에 따라 다르기 때문에 세부 사항을 얻지 못할 것입니다. 그러나 다음은 다음과 같이 숙고해야 할 몇 가지 질문이 있습니다.
.
<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>이 도구를 사용하면 이제 자동 테스트로 웹 사이트의 시각적 측면을 다룰 수 있습니다. 귀하의 장치와 기능 테스트가 이미 설치되어 있기 때문에이 새로운 전략은 테스트 프론티어에서 좁은 차이를 채울 것입니다. 아직 테스트에 익숙하지 않더라도 - 이것은 시작하기에 좋은 곳입니다!
phantomcss를 설치하려면 어떻게합니까?
phantomcss는 npm, node.js 패키지를 사용하여 설치할 수 있습니다. 관리자. 명령 NPM Install -G Phantomcss를 실행하여 전역으로 설치할 수 있습니다. 또는 NPM 설치 -Save-Dev Phantomcss를 실행하여 프로젝트에 개발 종속성으로 추가 할 수 있습니다.위 내용은 유령으로 시각적 회귀 테스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!