유령으로 시각적 회귀 테스트

키 테이크 아웃

phantomcss는 시각적 회귀 테스트를 수행하는 Node.js 도구입니다. 이는 웹 페이지 요소가 의도 한대로 나타나는지 확인하는 자동 테스트 형태입니다. 페이지 나 특정 요소의 스크린 샷을 가져 와서 저장된 기준선 이미지와 비교하고 스크린 샷이 일치하지 않으면 차이의 이미지를 생성하여이를 수행합니다. phantomcss는 Phantomcss 또는 Slimerjs 브라우저와 상호 작용하기위한 Casperjs, Phantomjs 2 또는 Slimerjs를 헤드리스 브라우저로 비교하기위한 여러 구성 요소를 포함하여 여러 구성 요소를 기반으로합니다. Phantomcss를 사용하기 위해 테스트 스위트는 Node.js 스크립트 형태로 생성됩니다. 테스트 스위트는 필수 페이지를 열고 스크린 샷을 가져 와서 이전 실행의 이미지와 비교합니다. 웹 사이트를 변경하면 새 스크린 샷을 원본과 비교하기 위해 테스트를 다시 실행할 수 있습니다. 테스트 중에 시각적 변화가 감지되면 Phantomcss는 변경된 영역을 강조합니다. 이러한 변경 사항을 수락하기 위해 추가 - 리베이스 인수로 테스트 명령을 실행할 수 있습니다. 이것은 이전 기준 이미지를 새로운 이미지로 대체합니다.

경력에서 심각한 개발을 한 경우 개발 중 자동 테스트의 중요성을 깨달았을 때에 도달했을 것입니다. 당신의 경험에 따라,이 실현은 한 번의 큰 버스트에서 당신을 때릴 수 있거나 시간이 지남에 따라 부드럽게 올 수 있지만 결국 두 번째 본성이 될 것입니다. 자동 테스트는 단위 테스트, 고립 된 코드 조각을 테스트 할 때 시스템의 다른 부분이 어떻게 행동하는지 테스트 할 때 다양한 형태로 제공됩니다. 이 기사는 일반적으로 자동 테스트에 대한 개요에 관한 것이 아닙니다. 그것은

시각적 회귀 테스트
• . 시각적 회귀 테스트는 웹 페이지 테스트에 대한 대안적인 접근 방식을 취합니다. DOM에 일부 요소 또는 텍스트 값이 존재하는지 확인하는 대신 테스트는 실제로 페이지를 열고이 특정 블록
가 원하는 것처럼 보이는지 확인합니다. 차이를 선택했는지 확인하기 위해 예를 들어 보겠습니다. 귀하의 웹 사이트가 친근한 메시지로 방문자를 맞이하기를 원한다고 상상해보십시오.

<span><span><span><div>>Hello, %username%!<span><span></span></span>
</div></span>></span></span>

가 작동하는지 확인하려면 메시지를 생성하는 코드를 테스트하고 올바른 이름을 삽입하는지 확인할 수 있습니다. 또한 셀레늄 또는 돌출부를 사용하여 기능 테스트를 작성하여 요소가 실제로 올바른 텍스트로 페이지에 있는지 확인할 수 있습니다. 그러나 이것은 충분하지 않습니다. 우리는 텍스트가 올바르게 생성되거나 DOM에 나타나는 것을 테스트하려고 할뿐만 아니라 전체 요소가

, 즉 디스플레이로 요소가 숨겨져 있지 않은지 확인하기 위해 : 없음 또는 그 누군가가 실수로 텍스트의 색상을 상체하지 않았습니다. 이를위한 많은 도구가 있지만 오늘날 우리는 특히 하나의 옵션을 살펴볼 것입니다. Phantomcss. Phantomcss 란 무엇입니까? phantomcss는 시각적 회귀 테스트를 수행하는 node.js 도구입니다. 그것은 오픈 소스이며 Huddle의 사람들이 개발했습니다. Phantomcss를 사용하면 헤드리스 브라우저를 실행하고 페이지를 열고 전체 페이지 또는 특정 요소의 스크린 샷을 찍을 수 있습니다. 이 스크린 샷은 향후 참조를위한 기준 이미지로 저장됩니다. 웹 사이트에서 무엇이든 변경할 때마다 Phantomcss를 다시 실행할 수 있습니다. 다른 스크린 샷이 필요하고 원본 이미지와 비교합니다. 차이가 없으면 테스트가 통과됩니다. 그러나 스크린 샷이 일치하지 않으면 테스트가 실패하고 검토 할 차이를 보여주는 새로운 이미지가 생성됩니다. 이 접근 방식은이 도구가 CSS의 변경 사항을 테스트하기에 완벽하게 만듭니다. phantomcss는 여러 주요 구성 요소 위에 구축되었습니다 :

casperjs - phantomcss 또는 slimerjs 브라우저와 상호 작용하는 도구. 버튼을 클릭하거나 값을 입력하는 등 페이지를 열고 사용자 상호 작용을 수행 할 수 있습니다. 또한 CasperJS는 자체 테스트 프레임 워크와 페이지의 스크린 샷을 캡처하는 기능을 제공합니다. Phantomjs 2 또는 Slimerjs - 두 개의 다른 헤드리스 브라우저는 Phantomcss와 함께 사용할 수 있습니다. 헤드리스 브라우저는 사용자 인터페이스가없는 일반 브라우저와 같습니다.

<.> 유사 .js - 이미지 비교를위한 라이브러리.

phantomcss는 phantomjs 및 slimerjs와 함께 사용할 수 있지만이 기사에서는 Phantomjs를 사용합니다. 스핀을 위해 가져 가자 실제로이 도구를 실제로 사용하는 방법을 확인하기 위해 작은 테스트 프로젝트를 설정하겠습니다. 이를 위해서는 테스트 할 웹 페이지와 CasperJS가 페이지를 열 수 있도록 간단한 Node.js 웹 서버가 필요합니다. 테스트 프로젝트 설정 <.> 일부 샘플 내용이 포함 된 index.html 파일을 만듭니다

웹 서버를 설치하려면 NPM 프로젝트를 초기화하고 HTTP-Server 패키지를 설치하십시오.

서버를 실행하려면 간단한 NPM 스크립트를 정의해 봅시다. 다음 스크립트 섹션을 package.json

에 추가하십시오

<span><span><span><div>>Hello, %username%!<span><span></span></span>
</div></span>></span></span>

이제 프로젝트 폴더에서 NPM을 실행할 수 있으며 기본 주소 http://127.0.1:8080에서 인덱스 페이지에 액세스 할 수 있습니다. 서버를 시작하고 지금은 실행하십시오. 한동안 필요합니다.

Phantomcss 설치 phantomcss를 설치하는 것은 쉽습니다. 프로젝트에 몇 가지 종속성을 추가하기 만하면됩니다.

테스트 스위트 생성 이제 우리는 첫 번째 테스트 스위트를 설정하는 데 필요한 모든 것을 갖추고 있습니다. Phantomcss 테스트 스위트는 웹 사이트의 필요한 페이지를 열고 스크린 샷을 찍고 이전 실행의 이미지와 비교하는 Node.js 스크립트 형식으로 작성됩니다. 우리는 Phantomcss 자체의 데모를 기반으로 간단한 테스트 케이스로 시작합니다.

테스트는 http://127.0.0.1:8080/을 열고, 신체 요소의 스크린 샷을 찍고 스크린 샷/body.png. 일단 테스트 자체를 제자리에 놓으면 테스트를 실행하기 위해 스크립트를 정의하는 것입니다. 다음 스크립트를 package.json에 다음 스크립트를 추가하겠습니다.

이제 다음 명령을 실행하여 실행할 수 있습니다.

당신이 볼 수있는 출력은 다음과 같이 보일 것입니다 :

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><style>></style></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></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span>></span>
</span>    <span><span><span><div> class<span>="tag tag-first"</span>>The moving finger writes, and having written moves on.<span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="tag tag-second"</span>>Nor all thy piety nor all thy wit, can cancel half a line of it.<span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

처음으로 테스트를 실행 했으므로 새로운 기준 스크린 샷을 만들고 비교를 수행하지 않습니다. 계속해서 스크린 샷 폴더를 들여다보십시오. 당신은 다음과 같은 이미지를보아야합니다 :

이것은 귀하의 웹 사이트가 어떻게 보이는지에 대한 황금 표준이며, 향후 테스트의 실행은 그들의 결과를이 이미지와 비교할 것입니다.

. 회귀 소개 동일한 테스트 명령을 다시 실행하면 모든 테스트가 성공적으로 통과되었다고보고합니다.

<span>npm init
</span><span>npm install http-server --save-dev</span>

웹 사이트에서 아무것도 변경하지 않았기 때문에 이것은 예상됩니다. 무언가를 깨고 다시 테스트를 다시 실행합시다. 예를 들어 index.html에서 일부 스타일을 변경하십시오. 예를 들어 블록의 크기를 400px로 줄입니다. 이제 테스트를 다시 실행하고 무슨 일이 일어나는지 보자.

여기서 몇 가지 중요한 일이 일어났습니다. 먼저, Phantomcss는 스크린 샷 Body_0.png에 대한 불일치로 인해 테스트가 실패했다고보고했습니다. 불일치는 11.41%로 측정됩니다. 둘째, 현재 버전과 이전 버전의 차이는 실패 폴더에 저장되었습니다. 당신이 그것을 열면, 당신은 이와 같은 스크린 샷을 볼 수 있습니다 :

.

스크린 샷은 변경된 영역을 편리하게 강조하여 차이를 쉽게 찾을 수 있습니다.

변경 사항을 수락 차이가 강조되었으므로 변화를 받아들이려면 어떻게해야합니까? 우리는 어떻게 든 블록의 감소 된 너비를 고수하고 현재보기를 새로운 표준으로 받아들이고 싶어한다는 도구를 알릴 수 있어야합니다. 이렇게하려면 추가 -리바세 인수로 테스트 명령을 실행할 수 있습니다.

두 개의 더블 대시에 주목하십시오. NPM의 매개 변수를 기본 명령에 전달하는 방법입니다. 따라서 다음 명령은 casperjs test.js -rebase를 초래합니다. 이제 변경 사항을 수락 했으므로 이전 기준 이미지는 새로운 이미지로 대체됩니다. 더 가져가 이제 기본 사항을 중단 했으므로이 도구를 자신의 워크 플로에 통합하는 것에 대해 생각할 수 있습니다. 프로젝트에 따라 다르기 때문에 세부 사항을 얻지 못할 것입니다. 그러나 다음은 다음과 같이 숙고해야 할 몇 가지 질문이 있습니다.

별도의 UI 요소 만 존재하는 실제 웹 사이트 또는 일종의 스타일 가이드에 대해 테스트를 실행 하시겠습니까? 사이트에 동적 콘텐츠가 있습니까? 그렇다면 컨텐츠의 변경으로 인해 테스트가 중단됩니다. 이를 피하려면 정적 컨텍스트가있는 별도의 웹 사이트 버전을 설정하여 테스트를 실행해야합니다.

. 버전 컨트롤에 스크린 샷을 추가 하시겠습니까? 예, 당신은해야합니다. 전체 페이지의 스크린 샷을 가져 가거나 별도의 요소를 가져갈 건가요?

<span><span><span><div>>Hello, %username%!<span><span></span></span>
</div></span>></span></span>

이 도구를 사용하면 이제 자동 테스트로 웹 사이트의 시각적 측면을 다룰 수 있습니다. 귀하의 장치와 기능 테스트가 이미 설치되어 있기 때문에이 새로운 전략은 테스트 프론티어에서 좁은 차이를 채울 것입니다. 아직 테스트에 익숙하지 않더라도 - 이것은 시작하기에 좋은 곳입니다!

phantomcss를 사용한 시각적 회귀 테스트에 대한 자주 묻는 질문 (FAQ) Phantomcss 란 무엇이며 어떻게 작동합니까?

Phantomcss는 Phantomjs를 사용하고 웹 페이지의 스크린 샷을 비교하는 시각적 회귀 테스트 도구입니다. 웹 페이지의 스크린 샷을 가져 와서 기준 이미지와 비교하고 차이점을 강조하여 작동합니다. 이를 통해 개발자는 웹 페이지에서 시각적 불일치를 신속하게 식별하고 수정할 수 있습니다. Phantomcss는 수동 테스트가 시간이 많이 걸리고 오류가 발생할 수있는 대규모 프로젝트에서 특히 유용합니다.

phantomcss를 설치하려면 어떻게합니까?

phantomcss는 npm, node.js 패키지를 사용하여 설치할 수 있습니다. 관리자. 명령 NPM Install -G Phantomcss를 실행하여 전역으로 설치할 수 있습니다. 또는 NPM 설치 -Save-Dev Phantomcss를 실행하여 프로젝트에 개발 종속성으로 추가 할 수 있습니다. 시각적 회귀 테스트에 phantomcss를 사용하는 방법은 무엇입니까?

시각적 회귀 테스트에 Phantomcs를 사용하려면 먼저 Phantomcs에 스크린 샷을 캡처 할 내용을 알려주는 테스트 스크립트를 만들어야합니다. 이 스크립트는 JavaScript 또는 CoffeeScript로 작성할 수 있습니다. 스크립트가 준비되면 Phantomjs를 사용하여 실행할 수 있습니다. Phantomcss는 지정된 요소의 스크린 샷을 캡처하고, 기준선 이미지와 비교하고, 차이점을 보여주는 보고서를 생성합니다.

다른 테스트 프레임 워크와 함께 phantomcss를 사용할 수 있습니까? Mocha, Jasmine 및 Qunit과 같은 다른 테스트 프레임 워크와 함께 사용하십시오. 또한 Jenkins 및 Travis CI와 같은 지속적인 통합 시스템과 통합 될 수 있습니다.

시각적 회귀 테스트에 Phantomcs를 사용하는 장점은 무엇입니까?

Phantomcss는 시각적 회귀 테스트에 몇 가지 장점을 제공합니다. 스크린 샷을 캡처하고 비교하는 프로세스를 자동화하여 개발자에게 많은 시간을 절약합니다. 또한 기준선과 테스트 이미지의 차이를 쉽게 발견 할 수있는 시각적 보고서를 제공합니다. 또한 Phantomcss는 반응 형 디자인 테스트를 지원하여 개발자가 다양한 화면 크기로 웹 페이지를 테스트 할 수 있습니다.

Phantomcss에서 기준선 이미지를 업데이트하려면 Phantomcss에서 기준선 이미지를 업데이트하려면 어떻게해야합니까? 이전 기준 이미지를 삭제하고 테스트 스크립트를 다시 실행하면됩니다. Phantomcss는 새로운 스크린 샷을 캡처하여 새로운 기준 이미지로 사용할 것입니다.

Phantomcs는 동적 컨텐츠를 처리 할 수 ​​있습니까?

예, Phantomcss는 동적 컨텐츠를 처리 할 수 ​​있습니다. 스크린 샷을 캡처하기 전에 개발자가 지연을 지정하여 동적 컨텐츠에 충분한 시간을 제공 할 수 있습니다. 또한 스크린 샷을 캡처하기 전에 특정 이벤트를 기다리기 위해 콜백을 사용하는 것을 지원합니다.

phantomcss에서 테스트를 디버그하는 방법?

phantomcss는 디버깅 테스트를위한 몇 가지 옵션을 제공합니다. 메시지를 콘솔에 로그인하고 실패한 테스트를 이미지 파일로 저장하고 테스트 실행 비디오를 만들 수도 있습니다. 이러한 기능이 테스트에서 문제를 쉽게 식별하고 수정할 수 있습니다.

Phantomcss에서 비교 프로세스를 사용자 정의 할 수 있습니까?

예, Phantomcss는 비교 프로세스를 사용자 정의 할 수 있습니다. 비교 유형, 불일치 공차 및 출력 설정을 설정할 수 있습니다. 이것은 비교 프로세스를보다 잘 제어하고 특정 요구에 맞게 조정할 수있게 해줍니다.

시각적 회귀 테스트를위한 Phantomcs에 대한 대안은 무엇입니까?

Phantomcs에 대한 몇 가지 대안이 있습니다. Backstopjs, Wraith 및 Gemini를 포함한 시각적 회귀 테스트. 이 도구는 Phantomcss와 유사한 기능을 제공하지만 특정 요구에 따라 다른 강점과 약점을 가질 수 있습니다.

.

위 내용은 유령으로 시각적 회귀 테스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!