# Example Site

This directory contains a sample site in its original state (`site/unchanged`), as well as with some css changes applied (`site/changed`).

The example site is a simple, straight-forward two page site.  

![example site thumbnail](./img/site-thumbnail.png)  

![example site thumbnail](./img/site-thumbnail-2.png)  


### The differences applied to the `changed` version is the **size** of the logo and some misc. **padding** on a few elements.  
.

These two sites are hosted on Github pages and the example tests that Bivariate generates is already configured to work with them.  The urls are as follows:

* https://jparkerweb.github.io/Bivariate/unchanged/
* https://jparkerweb.github.io/Bivariate/changed/



### Run Example

To run the example that ships with Bivariate, in the console type `bivariate` from your project folder and select the following entries from the interface:

###### Create a Reference
![create reference](./img/console-create-reference.png)  

###### Select a Test Group to Create a Reference on
![create reference](./img/console-create-reference--test-group.png)

###### Run a Test
![create reference](./img/console-run-test.png)

###### Select a Test Group to Run a Test on
![create reference](./img/console-run-test--test-group.png)

###### Wait for the Test to Complete
![create reference](./img/console-opening-report.png)

###### A Web Browser should open and display the Report
by default the report show all `failed` tests with the reference on the left, test in the middle, and pixel differences on the right.  

![create reference](./img/report.png)


----
## Example Animated GIF showing the full example

![full example](./img/example-run.gif)