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.

The next command installs phantomJS as shown below.

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

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.

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>

5) Install Bower

Run below command to install bower.

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

Install MDBootstrap by Bower as below command.

Update minimatch with below command.

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.

ember percy

How to Write Test with Ember Percy?

Thats all! Happy testing! 🙂

-Onur

javafx

Database Operations in JavaFX

By Onur Baskirt / Apr 1, 2016 / 56 Comments
Before started this section, please check the first article and learn How to Start JAVAFX! http://www.swtestacademy.com/getting-started-with-javafx/ At first, part of JavaFX tutorial series, we created a sample JavaFX project, designed the draft version of the UI and set up an...
rest assured

REST API Testing with Rest Assured

By Onur Baskirt / Mar 8, 2016 / 32 Comments
Outline In this post, I will explain what is API and API testing, what is the difference between SOAP and REST services, and how to test REST APIs with Rest Assured Library. What is API? API stands for Application Programming...
extentreports

How to Write Effective CSS Locators

By Onur Baskirt / Oct 1, 2017 / 0 Comments
Hi all, in this tutorial, I will describe you how to write effective CSS locators to interrogate web elements for your automation projects. As a rule of thumb, your interrogation strategy should be in below order: First try to use...
extentreports

Selenium-11: Execute JavaScript with JavascriptExecutor

By Onur Baskirt / Jan 27, 2016 / 15 Comments
Outline Sometimes we cannot handle some conditions or problems with Webdriver, web controls don't react well against selenium commands. In this kind of situations, we use Javascript. It is useful for custom synchronizations, hide or show the web elements, change...
javafx

Getting Started with JavaFX

By Onur Baskirt / Mar 25, 2016 / 0 Comments
When I started to work in my current position, one of my task is to do manual operations for campaign products  every week. After the second week, I thought that I have to automate this task using a GUI based...
extentreports

How to Write Smart XPath Locators

By Onur Baskirt / Sep 24, 2017 / 4 Comments
Hi all, in this tutorial, I will describe you how to write smart and non-brittle XPath locators. When we write our test scripts, we generally prefer to use id, name, class, etc. these kinds of locators. However, sometimes we could not...
extentreports

Selenium-1: Quick Start to Automation with Selenium WebDriver & JAVA & JUnit & Maven & IntelliJ

By Onur Baskirt / Sep 8, 2015 / 26 Comments
Outline Selenium Webdriver is the most popular open source web test automation framework across wide range of browsers and platforms. In this tutorial you will learn how to do web test automation with Selenium Webdriver and the related tools. Audience...
page object model

Page Object Model with C#

By Ege Aksoz / Jun 18, 2017 / 8 Comments
In the previous tutorial, we’ve taken the initial steps and entered the world of automated testing. We also wrote our first automated test. From this point on, since we are not just going to write one test, we need to...
extentreports

How to Select a Date From DatePicker Using Selenium

By Onur Baskirt / Aug 13, 2016 / 6 Comments
When you need to automate a airway, hotel, or similar websites you need to deal with Datepickers and some times it is a little bit cumbersome to select a specific date on the Datepicker or calendar.  In this post, I...
extentreports

Selenium Webdriver Performance testing with Jmeter and Selenium Grid

By Ozgur Kaya / Aug 9, 2016 / 2 Comments
In this post, we will complete Selenium Webdriver Performance testing scenario using Jmeter and Selenium Grid. 1- Install Java 7 or later If necessary https://java.com/tr/download/ 2- Download latest Jmeter version 3.0 or higher. http://jmeter.apache.org/download_jmeter.cgi 3- Download Jmeter PluginsManager JAR file and...
By | 2017-05-03T00:30:05+00:00 May 1st, 2017|Test Automation, Visual Testing|0 Comments

About the Author:

Onur Baskirt
Onur Baskirt is a senior IT professional with 10+ years of experience. He worked at Bahçesehir University, ST Microelectronics, Huawei and Ericsson as research assistant, design verification engineer and software test leader. Also, he worked as software test leader and software operations manager at Turkey's biggest technology retailer, Teknosa. Now, he is working as Head of Software Testing and Manager of two Development Teams at Kariyer.net. His current research areas are technical software testing, programming, and computer science. Formerly, he has several research works and papers on digital chip design & verification. His hobbies are sport, dancing, traveling, and nutrition. You can find detailed information about him on his linked-in page.

Leave A Comment