https://github.com/mdgriffith/site-selfie
https://github.com/mdgriffith/site-selfie
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mdgriffith/site-selfie
- Owner: mdgriffith
- License: mit
- Created: 2015-06-05T14:16:14.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2015-06-26T13:30:08.000Z (almost 11 years ago)
- Last Synced: 2025-01-21T18:51:27.864Z (over 1 year ago)
- Language: Haskell
- Size: 1.73 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Website Selfie
Takes screenshots of your website and calculates an image diff for two shots that are comparable. These screendiffs are then ordered by most changed and listed in a static html file for review.
This allows you to quickly see the differences in how your website looks locally vs live, or between browsers.
This code was written in a weekend and hasn't been fully transformed into a usable library. At the moment it uses http://mechanical-elephant.com as an example.
Index.html in the example folder is comparing a dev version of mechanical-elephant and the live version. I moved the elephant slightly so that a change can be see.
# Installation
Clone this repository locally.
Install by running the following in the site-selfie directory
cabal update
cabal install --depenencies-only
Begin the Selenium Server and possibly the chromedriver. Then run:
cabal run
You'll have to modify Main.hs if you want to take screenshots of something other than http://mechanical-elephant.com. Specifically, this section:
```hs
selfieConfig :: SelfieConfig
selfieConfig = SelfieConfig {
bases = [ Base { baseName="Dev",
url="http://localhost:8000/"
}
, Base { baseName="Live",
url="http://mechanical-elephant.com/"
}
]
, sitemap = ["", "archive", "about"]
, resolutions = [(1366, 768), (320, 320)]
, saveDir = "siteshots"
, webDriverConfigs = [ NamedWDConfig { configName="Firefox"
, driverConfig=ffWDConfig
}
]
}
```
# Selenium Server
Install [Selenium Server](http://docs.seleniumhq.org/download/). You can then start the selenium server with the following command:
java -jar selenium-server-standalone-*.jar
# Notes
The [chromedriver](https://code.google.com/p/selenium/wiki/ChromeDriver), which has to be installed and run separately if you want to test in Chrome, currently takes a screenshot of only the viewable area as opposed to the entire web page. This makes the screenshots difficult to compare against something like firefox. A [Python workaround](https://snipt.net/restrada/python-selenium-workaround-for-full-page-screenshot-using-chromedriver-2x/) is available that could be translated over.