집 >웹 프론트엔드 >JS 튜토리얼 >CSS 회귀 테스트 도구 backstopjs를 사용하는 방법

CSS 회귀 테스트 도구 backstopjs를 사용하는 방법

php中世界最好的语言원래의: 2018-03-06 11:29:532230검색

이번에는 backstopjs를 소개합니다. UI에서 생성된 그림과 프런트 엔드에서 작성된 그림을 자동으로 비교할 수 있지만 사용하는 동안 몇 가지 문제가 발생합니다. , 지금 적어서 기록해 보세요

우선 백스톱을 먼저 설치해야 합니다.

<pre style="
font-family
: "Microsoft YaHei"; padding: 5px; max-width: 680px !important; 
background-color
: rgb(246, 246, 246); border: 1px dotted rgb(170, 170, 170); 
white-space
: pre-wrap; 
word-wrap
: break-word;">npm install -g backstopjs

설치가 완료된 후 해당 위치에 새 폴더를 생성하고

<pre style="font-family: "Microsoft YaHei"; padding: 5px; max-width: 680px !important; background-color: rgb(246, 246, 246); border: 1px dotted rgb(170, 170, 170); white-space: pre-wrap; word-wrap: break-word;"> backstop init

을 실행합니다. 초기화 후

backstop_data 폴더를 클릭하세요

Package.json 열기

<pre style="font-family: "Microsoft YaHei"; padding: 5px; max-width: 680px !important; background-color: rgb(246, 246, 246); border: 1px dotted rgb(170, 170, 170); white-space: pre-wrap; word-wrap: break-word;">{ "id": "backstop_default", "viewports": [ //viewports 为生成的截图的格式，可以写多个，至少为一个
{ "label": "phone", //手机 "width": 320, "height": 480 },
{ "label": "tablet", //平板 "width": 1024, "height": 768 }
], "onBeforeScript": "chromy/onBefore.js", "onReadyScript": "chromy/onReady.js", "scenarios": [
{ "label": "BackstopJS Homepage", "cookiePath": "backstop_data/engine_scripts/cookies.json", "url": "https://garris.github.io/BackstopJS/", //这个路径为我们将要截图的网址 "referenceUrl": "", "readyEvent": "", "readySelector": "", "delay": 0, "hideSelectors": [], "removeSelectors": [], "hoverSelector": "", "clickSelector": "", "postInteractionWait": "", "selectors": [], "selectorExpansion": true, "misMatchThreshold" : 0.1, "requireSameDimensions": true }
], "paths": { "bitmaps_reference": "backstop_data/bitmaps_reference", "bitmaps_test": "backstop_data/bitmaps_test", "engine_scripts": "backstop_data/engine_scripts", "html_report": "backstop_data/html_report", "ci_report": "backstop_data/ci_report" }, "report": ["browser"], "engine": "chrome", "engineFlags": [], "asyncCaptureLimit": 5, "asyncCompareLimit": 50, "debug": false, "debugWindow": false }

이제 Baidu Maps를 예로 들어보겠습니다. 즉, 시나리오의 URL을 https://map.baidu.com/mobile/webapp으로 변경합니다. /index/index/

ipone 형식 내보내기 기본적으로 너비를 375로, 높이를 667로 변경합니다

이 때 backstop 테스트

를 실행하면 자동으로 페이지가 열립니다

이때 backstop_data 폴더 is

그런 다음 백스톱 승인을 실행하면 방금 생성된 사진이 기준으로 사용되며 URL을

https://map.baidu.com/mobile/webapp/index/index/qt=cur&wd=%E4%B8%8A%E6%B5%B7%E5%B8%82&from=maponline&tn=m01&ie=utf-8=utf-8/tab=line

로 변경한 다음 백스톱 테스트를 실행하면 두 페이지의 차이점이 표시됩니다
.

이때의 결과는 비교 결과이며, 비교를 따라가시면 됩니다. 변경사항은 다르게 이루어집니다.

이때 backstop_data에는 더 많은 bitmaps_reference가 포함되어 있습니다

요약: backstop Approval을 실행할 때 현재 획득한 이미지를 참조로 사용하는 backstop reference를 실행할 수도 있습니다.

bitmaps_reference의 이미지를 직접 정의할 수도 있습니다. 참조 그림을 커스터마이징한다는 것은 UI 그림을 여기에 직접 배치한다는 뜻입니다. 다만, 한 가지 주의할 점은 그림의 명명은 백스톱의 명명 규칙을 준수해야 한다는 것입니다. 즉, 이후에 생성된 그림 이름을 직접 복사하여 명명할 수 있습니다. 그게 다에요

그리고 처음 선생님의 지시를 따랐을 때 휴대폰에서는 사진이 생성되지 않았습니다.

정보를 다시 확인해보니 누군가 라벨을 이름으로 쓴 것을 발견했습니다

다시 테스트했습니다. 계속해서 살펴보니 무슨 일이 있어도 괜찮았습니다. 라벨이나 이름 중 하나일 수 있습니다

이제 웹 페이지를 비교할 차례입니다

지금 제가 쓰고 있는 내용은 가장 기본적인 사용법에 불과합니다. 자세한 사용법은 github에서 확인하실 수 있습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!