Ember Percy | Continuous Visual Review Tool

Hi all, in this article, I will explain how to use Ember Percy with Github and Jenkins.

What is Percy?

Percy is a visual regression review and testing platform.

• Compare images, find differences.
• Notifies visual changes and provides us to review and approve changes.
• Supports testing responsive designs.
• Freezes animations to prevent false-positives.
  • Freeze animated GIFs on the first frame.
  • Freeze most CSS animation and transition styles
• Parallel Testing support.
• It is integrated with GitHub and many CI tools.

Workflow of Percy

• When committing any code changes.
• CI tool automatically builds the project and run the tests.
• Percy takes DOM Snapshots.
• Uploads to the Percy server and render them.
• Compare them with the master branch.
• Then, we will review and approve changes.

Supported Technologies

How to Use Ember Percy on Windows with Jenkins

Requirements

1) You need to install Git from this link.

2) You need to install Node.JS and NPM as described here.

3) You need to install ember and PhantomJS (reference page)

In order to install ember, open a command prompt and type below command and run it.

npm install -g ember-cli

The next command installs phantomJS as shown below.

npm install -g phantomjs

Then, run below commands to open a ember folder under C:\ directory and run the generator for your project.

mkdir ember

cd ember

ember new my-app

This will create a new folder called my-app and generate application structure automatically. When generation finishes, launch the newly created app with below commands.

cd my-app

ember server

Now, navigate to http://localhost:4200 to see your new app is working like a charm! :)

4) Install Ember Percy

Go to under ember-cli folder. It should be under below path. And, run the below command.

C:\Users\${YOUR-USER-NAME}\AppData\Roaming\npm\node_modules\ember-cli>

ember install ember-percy

5) Install Bower

Run below command to install bower.

npm install -g bower

Check that nodejs, phantomjs, bower and npm in in your system path!

Install MDBootstrap by Bower as below command.

bower install MDBootstrap

Update minimatch with below command.

npm update -g [email protected]

5) Install Jenkins

Go to https://jenkins.io/download/ and download the latest release of Jenkins.

And then, extract the .zip file and run the .msi file and install Jenkins. It is pretty straight forward. You need to click next –> next…

Unlock Jenkins with admin password. It is located under “C:\Program Files (x86)\Jenkins\secrets\initialAdminPassword” folder.

Install suggested plugins.

Create a user as shown below.

Then, start using Jenkins.

5) Percy and GitHub Integration

Go to Percy.io and click Sign In WITH GITHUB. (You should logged-in your GitHub account before.)

Authorise Application.

Go to your Percy Dashboard.

Create Organization.

Then, click Install GitHub Integration.

Then, click install.

When Installation finished create your first project and get your CI variables.

Get PERCY_TOKEN and PERCY_PROJECT

5) Percy and GitHub and Jenkins Integration

Type, localhost:8080 and open Jenkins and go to Manage Jenkins. On Manage Jenkins page, go to GitHub section and add a GitHub Server with your gitHub account’s username and password as shown below. Before this, you need to install required GitHub plugins and fork ember percy example project from here: https://github.com/percy/example-ember.

This integration is described in this article.

Save PERCY_TOKEN and PERCY_PROJECT keys as environmental variables.

In your Jenkins Job, add two Windows Batch command as shown below.

For BUILD: npm install && bower install

For TEST: npm test

Jenkins Job’s Console Output:

At First run, there is no comparison. If you approve the visuals, Percy saves them as baseline images.

At second test (second Jenkins Run (git push or git pull request can be triggered Jenkins Job), if baseline image and actual image is same, visual test will be passed.

If you change the UI as shown below. You need to change todo example’s app/templates/application.hbs. I added my name at footer and then push the change to the GitHub.

Check your changes reflected to the GitHub.

and re run the Jenkins Job. Percy also test the visuals while job is running.

When Jenkins job finished, we will see that Percy detected the differences as shown below.

When we click the differences, we will see the details. Percy highlights the differences.

How to Write Test with Ember Percy?

Thats all! Happy testing! :)

-Onur