Create a free Applitools account and get the Applitools API KEY
Please set the
- You may skip this step if you want to hard code the API KEY inside the tutorial project's code.
- It's better to set APPLITOOLS_API_KEY as a system variable (in Windows) or in the
~/.zshrcrecipe file (in MacOS) so that it will be automatically set when you open a new terminal shell.
Install Visual Studio from here
Install git from https://git-scm.comtip
gitis optional. You need this mainly to clone the demo project from the Github repository. Instead of installing
git, you can simply download the Zip file from the repo. Further, If you are Mac, you already have
Install Google Chrome browser from https://www.google.com/chrome/
Install ChromeDriver on your machine and make sure it's is in the
Below are some resources from the internet that'll help you
Tip: On Mac, place the
/usr/local/binfolder so that Visual Studio can find it.
🚀 Run Tests
There are two main ways in which you can run tests.
The Applitools Ultrafast Grid (option 1) Test across all browsers and viewports 30-70 times faster than traditional test clouds. Using this approach, your tests will execute on a local browser once with the DOM, CSS, and additional artifacts captured by the SDK and sent to the Ultrafast Grid for parallel rendering and Visual AI comparison. This is the preferred execution method, however please note that it is a premium feature.
The second approach is to Run Local (option 2). This is the classic test execution in which your tests execute locally and each call to eyes via the SDK will send a screenshot to Eyes for Visual AI comparison.
While running tests using the classic approach is a great start - we recommend running tests on the Ultrafast Grid, the fastest way to ensure quality and consistency across all browsers, viewports, and devices.
Option 1 - Run With The Ultrafast Grid
1. Introduction To the Ultrafast Grid
In real world testing, you'll need to test your app on multiple browsers, viewports and mobile devices. So you'll need to run and re-run ALL the tests in different browsers and multiple viewports to ensure things are fine - which could take hours and hours to complete. You may also encounter browsers not opening properly, or hanging and what not.
What if you could run in just one browser, just once, and still do cross-browser tests across various browsers, viewports and multiple mobile emulators? That's where Ultrafast Grid comes in.
When you execute this tutorial, it'll run the test locally in Chrome browser but will show results in the following 5 combinations:
- Chrome browser (800 X 600 viewport)
- Chrome browser (700 X 500 viewport)
- Firefox browser (1200 X 800 viewport)
- Firefox browser (1600 X 1200 viewport)
- An iPhone4 emulator
... all in ~30 seconds!⏰🚀
2. What Is The Ultrafast Grid?
The Ultrafast Grid provides an elegant and an ultra fast way to render pages in different browsers, viewports and mobile simulators and then take screenshots and then send those screenshots to Applitools AI server. With Ultrafast Grid you just need to run your test in a single browser but perform end-to-end and cross-browser tests in various browsers such as Chrome,Firefox, IE, and also numerous combinations of viewports and in mobile simulators -- all in under a minute. Without Ultrafast Grid, you'll be wasting a lot of time and money running those tests in multiple browsers which could take hours and are error-prone.
And since Ultrafast Grid is integrated with our Eyes AI, you'll actually find a lot more functional and visual bugs than you'd normally find.
Further, you can use our Root-Cause-Analysis (RCA) feature to figure out exactly which DOM element or CSS caused difference! So you can go backwards, from the screenshot to the code!
Best part: All you need to do is to simply make
eyes.check calls in your existing Selenium tests after adding our SDK and instantiating Ultrafast Grid. And that's all there is to it!
How it works
Once you add and instantiate the Applitools SDK, simply add
eyes.check calls wherever you want to check if the state of the page looks OK. Then run the Selenium test as usual. And while running the tests, anytime it encounters
eyes.check (or similar methods), Applitools SDK uploads the DOM resource of that page to our Ultrafast Grid behind the scenes and in batches. The Ultrafast Grid then renders every page in different browsers and mobile emulators (in parallel) and takes screenshots as per the configuration you set. Finally, it sends those screenshots to our AI Server.
When you first run the test, our AI server simply stores those 1st set of screenshots as Baseline images. When you run the same test again, the AI server will compare the new set of screenshots, aka Checkpoint images, with the corresponding Baseline images and highlights bugs.
3. Getting Started With The Ultrafast Grid
- Visual Studio installed on your machine.
- Chrome Webdriver is on your machine and is in the
PATH. Here are some resources from the internet that'll help you.
Steps to run this example
Use the ready-to-run Github code to start.
git clone https://github.com/applitools/tutorial-selenium-csharp-ultrafastgrid.gitor download it as a Zip file and extract it.
- Open the folder
- Double click the
ApplitoolsTutorial.sln. This will open the project in Visual Studio
- Change the APPLITOOLS_API_KEY with your own.
- Hit Run
Option 2 - Run Locally
Run The Demo App
- Get the code:
- Option 1:
git clone https://github.com/applitools/tutorial-selenium-csharp-basic.git
- Option 2: Download it as a Zip file and unzip it.
- Option 1:
- Import the project into Visual studio
Open Visual Studio from the command line by running something like:
open /Applications/Visual\ Studio.app/instead of double-clicking on it. This approach will load all the envirnoment variables such as APPLITOOLS_API_KEY from the command line shell.
Do not open Visual Studio by double clicking it as it will not load environment variables. If you already have it open, please close it and open it from the Command line.
In Visual Studio, open the
ApplitoolsTutorialby navigating to the downloaded project via
File | openand open
ApplitoolsTutorial | ApplitoolTutorial | Packages (right click) | "Update". This will update all the dependencies.
Hit Run button in Visual Studio to run the code
Add Applitools To An Existing Project
Don't suffer in silence! Let us help you. Please reach out to us to get your project working.
Taking the next steps with Applitools
Congratulations on completing this quickstart! There's still so much to learn about visual testing with Applitools, but you're off to a great start.
Resources for next steps:
- 🤖 Learning how visual testing works
- ↔️ Setting match levels for visual checkpoints
- 💥 Troubleshooting common issues
- 🐞 Reporting bugs
- 🗺 Detailed overview of visual testing with Applitools