What will you learn in this lecture?
In this video, you will learn how to get started with Applitools visual validation in less than 10 minutes.
Hey, in this tutorial, I’m going to teach you how to use Applitools for automated visual validation in under 10 minutes.
Applitools is the same exact technology that we use in my workplace to do over 3000 visual validations of HTML pages every 2 weeks.
My name is Nikolay. I’m the CEO of UltimateQA.com where automation engineers go to watch the highest quality video tutorials. So, stay tuned as in this tutorial, I’m gonna teach you how to get your free Applitools account, create your very first automated visual test using selenium webdriver, execute that automated visual test, and see the user interface of Applitools in order to figure out if there are any visual discrepancies.
So, let’s go and get started.
Let’s go ahead and get you set up with a free trial of Applitools account. So, all you have to do is go to Applitools.com, click the free trial button, you can fill out all of these details.
You can see no obligation and no credit card required. This is a totally
free trial. You get to enjoy a couple of visual validations a week without any issues.
So, once you register, you’ll be able to go ahead and login by going here, clicking signing sign and filling out your details and then you will be logged
into the application.
So, once you’re logged in, you’ll see a view that looks exactly like this.
Now, I’m gonna teach you how to get set up. However, if you get lost or would like to look at this, you can see that Applitools actually offers some options for you on how to get started.
You can actually click here and it will help you and take you to the resources page. It will teach you how to get started based on the environment that you have.
It’s really easy. Just copy and paste the code and follow their instructions.
However, I’m obviously gonna do the same thing here for you through video tutorials, so the other very important thing that you need to know here for now is how to grab your API key.
So come here and click on this little person icon and then when you click my API key, a window will come up that will allow you to copy and paste your API key.
That’s important for the code. We’re gonna paste it into our code and use it.
I’m not showing you to that here I don’t want you using my API key because I’m kind of stingy with my Applitools validations and so I don’t want to share them.
And so, once you grab the API key, we can then jump into the code and apply that API key there. Let’s go ahead and install all the software to get you started coding applitools tests.
So you’ve got to go into the solution explorer. I created a unit test project here.
I’m gonna go ahead and right-click go to manage and you get packages and then I’m going to install all of the appropriate and you get packages.
So first, I want Selenium webdriver. So to make it really easy, I’m just going to install Selenium support and that’s also going to install Selenium webdriver.
Now we need Chrome driver. This will allow us to execute our tests against the Chrome browser.
We need nUnit so, you need nUnit and nUnit test adapter and unit allows us to code and unit tests and unit 3 test adapter allows us to visualize the nUnit tests inside a visual studio and have them show up in the test explorer.
And finally, we need Applitools the most important you get package and if you install eyes dot Selenium, it will also install eyes that as DK automatically.
If we go into the installed we can will see all of the packages that are installed we got eyes SDK eye Selenium we got nUnit and we got Selenium and we got Chrome driver.
Now let’s go ahead and set up Chrome driver really quickly so that we can have a reference to the executable.
So, in order to do that, right-click your project go to properties, go to build and under conditional compilation symbols what you need to do is say underscore publish underscore Chromedriver and this will push it into your bin directory.
So now a build will publish the Chrome driver into your bin directory, chromedriver.exe right there. We are now ready to execute our tests.
So let’s go ahead and dig into the code. I’ve created this solution here that you can actually get from this Github URL and it contains all the code that you need.
All you have to do is copy and paste it into your solution or even download it from github and then you’ll be able to get up and running.
So what’s very important here is this setup method where I’ve created a Chrome driver.
I’ve also set up an implicit wait and then over here I instantiated eyes right. This is what’s coming from Applitools. We’re gonna be using this eyes in our test cases and another important piece of information is me setting the API key right here.
That’s very important for Applitools to know which environment to talk to and I set my API key through my system environment variable.
I went in and set that up. if you don’t want to get too complex with your environment variables,you can obviously just go ahead and paste the API key just like that.
This is what the API key actually looks like and you can see we’re just setting it equal here to this property API key property from the eyes class but it’s good practice to put your API key in an environment variable so that no one else can see it.
And so, when you guys copy over this code, you can set your own environment variable and then inside of the our test case which I called Sud baseline, the other very important method who calls is eyes that open. What it does is basically open up Applitools.
So that now it can get some initial information such as the driver and the taste case name,I’m calling you test case one and then I’m also passing in a static resolution.
So what this means is that this item will always be opened up in this resolution then we use the check window method to validate that the application is actually matching to our baseline and then finally in our teardown method, we use eyes dot close which is gonna tell Applitools to close and then abort if not closed.
So now let’s go ahead and run this test.
You’re gonna see something come up. You’re gonna see a Chrome browser load and all that kind of stuff and then I’ll pull up Applitools here as well. So now, if I go ahead and load the latest test case, you can see that we’ve got our batch name on the left-hand side.
You can see the badges and you see that it has passed and we have a new test case with which nothing has happened yet.
So you can see this new right here so you can open it up and you can see the new test case right here and if you open it up you can see that there is no baseline image yet.
That’s because we have not set a baseline.
This is our first time running a test so it automatically gets a thumbs-up by default setting your very first test run as a baseline.
So now,every single test case that is executed from this point forward is going to be executed against this baseline.
So now, let’s pretend some has passed and as a team as developers, we’ve messed with the application a little bit and changed some things about it.
So now, we can go ahead and rerun our test case.
I’ve actually created a different test case because I need something particular to happen with the application however, this test case is basically gonna do the same thing as you saw before it’s going to open up the application and they check to see if it is actually the same as our baseline and once the test finishes, we can open up Applitools and can see I have the test open right here on the right-hand side.
You see the check point which means this is the test that I just executed and on the left-hand side, I have the baseline.
Go ahead and take a look manually to see if you can spot any differences.
Well, if you couldn’t, that’s what Applitools is here to do actually.
What I can do is I can place the images on top of each other and then I can tab through the images to see what has change.
So again, you can see that this is a check point here and so now if I tab through the baseline and the check point you can see all of the changes that have occurred.
So in this case, as you can see, our text has changed in size and all of our elements have shifted down a bit as well I can even use Applitools to help point out all of the failures by highlighting everything in purple.
So now, the question remains is whether this was a bug or whether this was a desired change and a change in the requirements?
So once you answer that, you will know whether to give this new checkpoint a thumbs up or a thumbs down.
If it’s a thumbs down, that means you reject this and you log this as a bug otherwise you can give this a thumbs up.
And now this new version will be used as the baseline from this point forward.
So that brings us to the end of this tutorial. Hopefully you enjoyed it.
Applitools is an amazing tool to use for visual validation testing. It is one of the best automation testing techniques that you can use in order to validate that your application actually looks as desired.
And so now you have this tool in your toolbox, you’re able to create a test. You’re able to log into Applitools, validate that it has successfully performed a visual validation and that you are ready to go and expand your test automation suite.
Thanks so much! My name is Nikolay from ultimateqa.com and I’ll see you in the future.