Okay thank you for joining us today my name is Magic yeah doc I’m working in Grand Parade since November 2017 I work in sports channel which is responsible for bookmaker platform today in my presentation I want to tell you more about sorry thanks I want to tell you more about the visual regression itself and browserstack tool and how.
To improve those tests so let’s start it from beginning it is quick agenda we.
Will just quick overview about the visual regression testing then about the browserstack tools quick demo of using it combined together and then some of the company use cases okay so at the beginning I will explain short words.
What the visual regression testing is there’s a lot of tools optimization tools of how the tossed words test software behaves but sometimes we need we need the automation to to check how.
The software looks so this is the this is the word the visual regression came in in simple words the visual regression perform users user interface screenshot comparison you captured the you capture the screenshot and then compare is today to the baseline and on the output you you have the third image if with differences its.
Icon on the graph so with the first run of the of the VR test will call we are tests for shortcut the visual questions so there is no reference screenshots so the test will pass and the current screenshot will be marked as their reference one and if the framework will find the reference screenshot it will make the image comparison of it and it depends on the options you choose.
It the test will fail or will pass so okay let’s go to another one yeah so so yeah the efficient tools provide as I mentioned before the image comparison which is the output of our tests so the under there is a lot of image image processing libraries such as reassemble that J has images magic or Python image library and yeah like to take a look at our example we have two version of footer and the question is how fast will.
You spot the difference between between these two two version or ask yourself how many assertion it would need to cover the all the elements on the this footer to make it is rendered properly so as I said before the third image the difference the difference between one and the second image give us on the output the third image caused if image and it looks like it’s it’s with I’m sorry is in magenta color we have highlighted.
The changes from the second from the current compared to baseline we have the paper icon missing the 18 plus icon missing the last paragraph is missing so we can can spot the difference in the whole layer than the composition on the.
The typos in about the William Hill information on the left sides and we have one dynamic element the clock remember that we will get back to it later on yes so it is of most people.
Are frameworks available for visual regression testing the order is random there is why for.
Backstop Jays gull and gemiini phantom CSS and there is also the WD of visual revolution service it’s the webdriver IO plug-in of course there is there is the web web services providing the same functionality like screener data or person that IO the last one is bolded because this framework we will we will use in our presentation okay so this is the technology stack we will work on in this presentation on the top.
Is webdriver binding for the node.
Don’t understand the synchronous properly so yeah that’s good and as we speak about the extensions and the integration I’ve listed two of them which we will use the visual regression service is the part it’s a plugin which takes the responsible for taking screenshot and compare compare comparison of.
Images and the browserstack service it’s kind of proxy which connect our test runner to the browser.
So let’s get a quick of pros of visual challenges with visual relation testing as.
We have in our example at the beginning in the footer the single test can cover multiple checks on there on the page on or on the UI elements like checking.
For labels font types images icons and everything which shows on the UI has the UI components.
We can compare the UI components in different browsers for example by using browser stacks it gives us the more value to the functional test we that’s what we choose webdriver yo it’s bending for webdiver Jaso for the functional tests we can easily adapt it to the visual regulation we can check how the software looks as we mentioned before and in overall it improve.
Product quality and user experience so let’s go to the challenges the the important thing is that the screen based visual recognition testing can only work when.
The UI components are predictable we when we have the multiple UI components we need to exclude them from testing we tagged the fly like the clog in our footer example there was dynamic elements which shows the current date every time you turn the page on let’s painful challenge but still is maintaining the reference screenshots usually usually you will keep this reference screenshot in.
Your code base or even in the different repository but still this is the only part which you need to do manually for for exchanging the the baseline the baseline screenshot if the changes are intended there is a web service called spectra.
Which could take care of it well I hope you can note it down and checking home yeah so sometimes or even or even often we we need to exclude some elements from from the our visual regression tests or some workarounds for special cases.
Like like ignore comparison it’s you can omit the anti-icing and different utilizing all colors we can have the mismatch tolerance.
Which is the percentages of difference which will be accepted by the tests to fail or not and the most common one it’s just to omit some elements it’s in most cases is just applying the CSS rules to them one is hide which is high which is hide by applying the visibility hidden or opacity zero or remove to just give.
Us the display no we need to remember to run the visual regression tests in the same isolated environments because browsers will render each element differently on each display so we need to use.
Some kind of excuse well fine but for beating browser’s headless mode so that’s that’s the anti I think that’s the ignore caminar comparison tell icing.
For because sometimes on different screens we have DIF different fonts or something like that okay so what’s believe that w do visual regression service we have two options for choosing the image.
And the second one is graphics magic magic as the owners of application called this as Swiss Army knife or image processing its native programs so as.
You can guess if you want the performance we should choose these second options this is simply configuration for that we only need two to make it under me only.
Need to add the program to the system path and visual regression service will take care of it so I think it’s not a nice place to prepare the the conversation for our.
Tests okay for those who don’t know how.
What is the processor stack it’s a cloud-based cloud-based cross person.
Testing tool which allowed us to test web application on different browsers and different operating systems and every combination of it it also allowed us to do testing rough sauce on real mobile devices as well you can to choose Android iOS Windows you know even Windows for.
Me we have two options to testing it we have the manual you can test it manually or we can automate automate the process using the remote webdriver so it’s just so you think so the visual library is provided for every every languages which is being used in testing ok this is how it looks like the main product of.
Browser stack I mentioned before the life is purely for.
The manually testing which is open the browser’s in the certain device or operating system there’s a lot of options the browser stack at first sight.
Itself as they have 1,200 combination or something like that I’ve never checked that we need to believe them this is the ultimate this is this world will interest us the.
Most this is just there this is just the quick overview about our build our build will be our test run so we have the we have.
The overlook of the created session of the created browser session with operating system and browsers and versions in the details view we can get get to the more details we have some nice debugging features like recording the video or some network blacks or text lags from the remote webdriver command executions sometimes.
It is it slows down the execution so we can turn it off easily for example the video we don’t need it always so yeah that’s fine ok so using browser start without being able to run tests locally would be by useless because worrying about the pre-production environments or something around locally on your machine you can obviously you can get you.
Can get access from the browser stack servers to your inner network and the power problem is solved by some something called two local testing which is described by the browser stack.