https://github.com/emilebosch/selfie
Selfie takes screenshots of itself when running your poltergeist tests, little egotistical bastard. It checks for differences with previous runs and highlights them. Works brilliant for UI regression testing.
https://github.com/emilebosch/selfie
Last synced: about 2 months ago
JSON representation
Selfie takes screenshots of itself when running your poltergeist tests, little egotistical bastard. It checks for differences with previous runs and highlights them. Works brilliant for UI regression testing.
- Host: GitHub
- URL: https://github.com/emilebosch/selfie
- Owner: emilebosch
- Created: 2013-10-24T14:13:15.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-04-11T22:16:48.000Z (about 2 years ago)
- Last Synced: 2025-04-11T00:04:47.388Z (about 2 months ago)
- Language: Ruby
- Homepage:
- Size: 11.7 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Selfie
Visual UI regression tests using PhantomJS, Poltergeist and Imagemagick for Capybara.
## To get started
For Rails it's easy! Just add `selfie` to your `Gemfile`
```
gem 'selfie'
```
You need imagemagick, and phantomjs in able to run the test. So install if you don't have it. This is how you install it for OSX (using brew):
```
brew install phantomjs
brew install imagemagick
```
Then create an integration test and include the `Selfie::DSL` and use `snap!` to capture a screenshot.
```
class CompletePurchaseTest < ActiveSupport::TestCase
include Capybara::DSL
include Selfie::DSL
test "should do a complete purchase" do
visit '/'
assert has_content? 'Welcome to Shopping!'
snap! 'home'
# do more stuff here.
make_report
open_report
end
end
```
### Creating reference image sets
Easy huh, except there is at this moment nothing to diff with. You need to run
the test once in a successful state to create your reference images.
Selfie saves the images of the current run into `tmp/snap/current`. You can simply copy
that directory to create your reference images. It will look for the reference images in th `test/assets` directory. The name of the directory is the underscored variant with `Test` removed so in this case `complete_purchase`
```
cp -R tmp/snap/current test/assets/complete_purchase
```
## Being forgiving
Sometimes you don't want a single pixel to fail your test. For instance, when you work
with generated dates. You can provide a threshold that allows for changes:
```
snap! 'home', threshold: 0.01
```
You can see the threshold next to the image result in the make report.
## Capturing page on failed asserts
If you want to capture an image on a failed assert you can use the following 'freedom-patch' to override `assert`.
Like this:
```
class PurchaseTest < ActiveSupport::TestCase
def assert(*args)
passed = super(*args)
ensure
snap 'ERROR!' unless passed
end
end
```
## Being async
`snap!` doesn't wait for a page load, it just snaps te current page. Normally, you might want to use one of the Capybara `finders`, such as
```
assert has_content? 'Welcome to Shopping!'
```
to verify that specific page has loaded before you snap a shot!
## Under the hood
It's actually really simple. It basically relies on a couple of components. PhantomJS, and ImageMagick. It uses PhantomJS's, `save_screenshot` method to capture a screenshot. And ImageMagic's `compare` and `convert` to make a diff and measure the difference. It uses ERB to generate up a report.
## Contribute
Awesome, please help me out! This is cool, but it can be much cooler, friendlier. More awesome. A couple of things on my wishlist!
- A assert `snap_and_compare! 'home', threshold: 0.05`
- snap! with a given element
- Add some tests if you like