How to use the CSS regression testing tool backstopjs

This time I introduce to you backstopjs. It can automatically compare the pictures produced by the UI with the pictures written by the front end. Inconsistencies will be marked. It is very easy to use, but you will also encounter problems during the writing process. Some questions, write them down now and record them

First of all, you must install backstop.

<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

After the installation, create a new folder in the appropriate location. Execute

<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

After initialization

Click on the backstop_data folder

Open 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 }

Now we use Take Baidu Map as an example, that is, change the url of scenarios to https://map.baidu.com/mobile/webapp/index/index/

Based on the format of exported ipone, change the width to 375 Change the high value to 667

At this time, executing backstop test

will automatically open a page

The backstop_data folder at this time is

Then execute backstop again approve. At this time, the image just generated will be used as the standard. Then we will change the URL to

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

and then execute backstop test. After execution, the differences between the two pages will be marked

The result at this time is the result after comparison, and can be changed according to the difference in comparison.

At this time, the backstop_data contains more bitmaps_reference

Summary: When executing backstop approve, you can also execute backstop reference, which uses the currently obtained picture as a reference.

You can also define your own bitmaps_reference picture, that is, a custom reference picture, that is, put the UI picture directly in it. However, one thing to note is that the naming of the picture needs to comply with the naming rules of backstop, that is, Yes, just copy and name the picture name generated after the test.

Also, when I first followed the teacher, I couldn't generate the photo on the mobile phone.

I checked the information again and found that Someone wrote the label as name

I tested it back and forth, and it turned out to be fine. Both label and name are OK

Now it’s time to compare the webpage

I What I am writing now is only the most basic usage. There are very detailed usages on github. You can check it out on github when needed.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

ES6 module syntax loading import export

CSS pseudo-class selector

Summary of the box model in HTML

How to determine the baseline of each type of box in HTML

The above is the detailed content of How to use the CSS regression testing tool backstopjs. For more information, please follow other related articles on the PHP Chinese website!