How many differences can you find in 10 seconds?
 
 
 
 
Our tester will find ALL the differences. And even those that are not visible. Below I will talk about how he will do it, but for a start I will give you a little insight.
 
data. elements 3r3194. can be two ordinary POST requests.
 
If your tests are written in Java, it will be easier to use our library for this purpose, which will take care of creating a snapshot and transferring data to the server.
 
Before you begin, you need to specify several variables (server address, type and version of the browser, etc.). In the test itself, you must specify the address of the page from which you want to take a snapshot, and a list of locators in the Xpath or CSS format to search for the elements we need (optional). That's all!
 
 
Inside the library, we use internal Selenium WebDriver’s commands and jаvascript scripts for taking snapshots. WebDriver’s internal commands allow you to quickly and accurately take screenshots of the page (without gluing and scrolling), and js - to find the necessary elements and add data about them to the snapshot. After removing the snapshot, we transfer it to our server application, which saves the data about the elements in mongo, and the screenshots themselves on the server disk. Now this snapshot can be compared with the standard. The data of the elements will be compared as usual objects, and the screenshots will be compared pixel by pixel using 3r3102. OpenCV 3r3194. .
 
Now you can get a report comparing two snapshots. For this you need to send
GET request and get back the comparison data in the form of JSON, or use our front-end application, which will build a detailed, and most importantly, readable report.
 
 
3r33112. What's in the report? 3r3113.
 
The main page of the report contains information about successfully passed and failed tests (highlighted in red) and consists of three lists: 3r3203.  
 
3r3147.  
list of tests (story) in which the layout was checked. Here, for convenience, the names of the tests correspond to the url of the pages from which the snapshot was taken; 3r3162.  
list of states (state) - each story can contain several states, for example, a screenshot before the form is filled in and after. Each state can contain several snapshots in different resolutions and versions of the browser; 3r3162.  
a list with different browsers and permissions and brief statistics. 3r3162.  
3r3164.
 
In the upper part there are icons that allow you to filter the results depending on the type of errors and the percentage difference in pixel by pixel comparison. This implementation speeds the verification of errors.
 
 
3r3138.
 
 
Brief statistics in the blocks of the last list contains three parameters:
 
 
3r3147.  
3r-33199. pixels [/b] - the difference between the two pictures as a percentage relative to the size of the entire page; 3r3162.  
3r-33199. elements [/b] - the number of different elements (of those that were found on the locators transmitted in the test); 3r3162.  
3r-33199. error [/b] - internal errors that occurred when comparing snapshots (for example, one of the images was not found for comparison, or there is no data on snapshots). 3r3162.  
3r3164.
 
The report for each page consists of two separate screenshots and a stroke of the elements in which the diff was found. The pop-up text when hovering on different elements indicates the type of error and the locator by which the element was found. You can also set filtering by error type, hide one of the screenshots and enable /disable the result of pixel by pixel comparison.
 
 
3r3171.
 
 
As mentioned above, we also compare screenshots pixel by pixel, which is very effective for some tasks. For example, for new pages, with a still unsteady DOM, there is no point in wasting time writing and maintaining locators.
 
 
3r33180.
 
 
In conclusion, I would like to say about the real exhaust of this tool for the company: day ? 3-333199. QVisual [/b] helps our testers to be aware of all changes in the layout of applications. We save a lot of time comparing landing pages by automatically creating screenshots (up to 1500+ landing pages in 3 browsers in 6 screen resolutions).
 
 
3r-33199. P.S 3r33200. This is a brief overview of our tool. More information can be found at GitHub and also participate in the development of the tool.
 
 
3r-33199. P.P.S. [/b] For those who want to test themselves - these are all the differences in the picture from the title: