garris / garris/BackstopJS

Hey. BackstopJS has Diverged.

Open
#974 2 comments 4 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.2k
Forks
621
PR merge metrics
No merged PRs in 30d

Description

# Diverged

_Please note: This is TOTALLY EXPERIMENTAL. It might not work for you the first time -- or even the second time or maybe it won't ever work! Comments are AWESOME, but please be gentle!_

_and if you didn't read the above disclaimer..._
![image](https://user-images.githubusercontent.com/447033/52007003-5e6c1200-2482-11e9-9edd-a5f5f9087d0b.png)

_And also, for this demo you will need to open two terminal windows -- in one of them we will be running `Backstop Remote`. This is a new feature -- intended for remote control of BackstopJS in the future. This is currently used to support `diverged`._

1) Make sure you have the latest BackstopJS source on your machine.

2) cd into the local backstop project test directory. On my machine, the command looks like this... `cd ~/Development/BackstopJS/test/configs/`

3) Run BackstopJS Remote: `node ../../cli remote`

4) Switch to a new terminal window and get yourself back to that same directory. Again, on my machine it looks like this: `cd ~/Development/BackstopJS/test/configs/`

5) Now go ahead and set up a test baseline. `node ../../cli reference --config=responsiveTest`

6) Ok. Now we are ready. The content file we are testing is here... `../../examples/responsiveDemo/index.html` Add a change to that file. Here is what I did...

![image](https://user-images.githubusercontent.com/447033/52007174-cd496b00-2482-11e9-94da-dc8a78932932.png)

7) Now run the test `node ../../cli test --config=responsiveTest`

8) BackstopJS should find the change and create a conventional diff for you. Click on the diff in the report. My diff looks like this...

![image](https://user-images.githubusercontent.com/447033/52007348-21544f80-2483-11e9-9543-03f07126c615.png)

9) Check out the new option in this view... Click it! (Please give it a few seconds to run)

![image](https://user-images.githubusercontent.com/447033/52007216-de927780-2482-11e9-86cb-d59ca306cfe3.png)

10) Did it work? Let me know!!! Here is what I get...
![image](https://user-images.githubusercontent.com/447033/52007673-cc650900-2483-11e9-873c-a22eac80c229.png)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.