Dinakar
Hello everyone and welcome to Pcloudy's webinar uncover the hidden bugs eating your revenue with visual ai my name is dinakar and i'll be the
Dinakar
Host for today before we get started i'd like to go over a few housekeeping rules your line is currently muted however you can submit
Dinakar
Your questions during the webinar through the chat option at the bottom of the screen
Dinakar
We will answer your questions as part of the q a session at the end of the webinar
Dinakar
Please note that this webinar is being recorded and we will send the link of the recording to share with your colleagues later with that
Dinakar
Said let me introduce the speaker for today is a lead pre-sales consultant at uh Pcloudy uh he has around 10 years 10 plus
Dinakar
Years of experience in the it industry prior to his role at Pcloudy he worked with microfocus as a pre-sales consultant for application delivery
Dinakar
Management portfolio he has catered to technology such as devops automation performance cloud and mobility uh without further ado uh let me hand it over
Shueb Ahmed
To the speaker Shueb Ahmed over to you thank you so much thanks everyone for joining here good morning good afternoon good evening for people
Shueb Ahmed
Joining across different part of the world yeah my name is uh showing mohammed and i'm a technical pre-sales consultant here at uh Pcloudy
Shueb Ahmed
So today uh we will be running through this webinar on uh the visually ai right so uncovering the hidden bugs hitting your revenue with
Shueb Ahmed
Visual aid that's the subject and uh yeah during the course of the webinar as the uh in case if you guys have any queries
Shueb Ahmed
Uh you just you know put that in the chat uh we will take up your queries uh during the q a session all right
Shueb Ahmed
So without further ado let me just get started with the today's agenda
Shueb Ahmed
So we'll start with a quick overview on what the cloudy is so this will help understand the audience um about our platform the capabilities
Shueb Ahmed
And features that we bring in and then uh we'll quickly jump into the visual testing right so we will look into what visual testing
Shueb Ahmed
Is and some of its importance and uh we will also look at some of the challenges uh with the manual visual testing and we
Shueb Ahmed
Will try to focus our you know time towards understanding the role of the ai right when it comes to visual testing and also uh
Shueb Ahmed
The what is the role of automation in case of visual testing and then we will have a quick look at the demo uh where
Shueb Ahmed
I will be showcasing the live demonstration of the visual testing incorporated within our existing automation frameworks right how we can uh identify the bugs
Shueb Ahmed
With the help of Pcloudy's uh ai plug-in that we have and then we will look into the q a if there are any
Shueb Ahmed
Queries we will take up at the last so that's the agenda with that uh let me just talk about what Pcloudy is so
Shueb Ahmed
Pcloudy is uh basically it's a continuous testing cloud platform uh which which provides real devices across android and ios platform with different manufacturers
Shueb Ahmed
Make and model different os versions so where you can test all your different types of applications be native hybrid progressive web apps and mobile
Shueb Ahmed
Web apps and not just that we also have a browser lab where you can test all your web-based applications
Shueb Ahmed
And right so from the along with the features and capabilities that equality brings in for both manual and as well as automation testing right
Shueb Ahmed
So that's about uh Pcloudy and um when we talk about offerings there are there are various different offerings uh we have a public
Shueb Ahmed
Cloud for small scale industries which is basically a shareable platform wherein you have more than 350 plus physical devices hosted across different data centers
Shueb Ahmed
In india in u.s in singapore and uh also when it comes to dedicated uh instances we have private or on-premise so these are the
Shueb Ahmed
Dedicated clouds uh depending on the requirement uh we will host the clouds for you right and these are enterprise grade data uh centers what
Shueb Ahmed
We have so with that um if you will see on the bottom of the screen there are c36 pillars right which we cater right
Shueb Ahmed
So device lab which is something where we provide the infrastructure uh the mobile devices with both android and as well as ios so pretty
Shueb Ahmed
Much scalable uh platform uh where you can scale up the devices for your testing needs be it for manual testing or automation testing and
Shueb Ahmed
Not just that we also have integration with all the leading ci servers so that will be thought as part of devops and uh as
Shueb Ahmed
I said be cloudy is a one-stop shop for law for all your mobile and as well as web-based application testing needs so we have
Shueb Ahmed
A section where you can test all your browser browser applications on a different mac and windows machine different os has different browsers uh so
Shueb Ahmed
You can pretty much test the compatibility of different browsers of your applications so that's with the help of browser lamp and
Shueb Ahmed
When we talk about automation so we have our inbuilt own automation tool uh called key where we are talking about creating the scripts right
Shueb Ahmed
Creating the script is something which is very important so we can create these scripts very quickly
Shueb Ahmed
So that's her in-house build opt-in tool which is a codeless form of automation so anyone can create the scripts while they are recording so
Shueb Ahmed
It has a record and playback feature which helps you record the entire flow and thereby integrating this with peak loading so we have highly
Shueb Ahmed
Integrated this with vcloudy so that's about our in-house article of course that's licensed version and when we talk about the automation execution at scale
Shueb Ahmed
So as i said so we have integration with all the uh leading open source solutions btm xc test or the expresso you can pretty
Shueb Ahmed
Much integrate your existing apm framework with uh vcloudy and also execute your automation scripts on number of devices multiple at the same time right
Shueb Ahmed
There by achieving the uh parallel execution and that's thus helps you in achieving the parallel execution and saving uh the test execution time and
Shueb Ahmed
When we talk about analytics which is a very crucial part uh which helps us understand the uh findings across the testing we have done
Shueb Ahmed
Built for manual testing or automation testing so we provide a comprehensive report which helps understand uh the findings that you have uh done the
Shueb Ahmed
Test before manual and automation uh when it comes to all the performance metrics uh starting from the uh the battery performance to cpu usage
Shueb Ahmed
And also the memory consumption of your application all these are pretty much just pretty much captured as part of reports along with the screenshots
Shueb Ahmed
And videos and logs so we provide you the comprehensive report as part of test analytics and also with advanced uh progressive report uh which
Shueb Ahmed
Helps you detail understanding of your report in terms of uh understanding at the test case level right so any number of test cases that
Shueb Ahmed
Are passed number of test cases that are failed uh so all that are pretty much captured as part of test analytics and and also
Shueb Ahmed
Has an option of easily shareable sharing the reports among your different team members different stakeholders or a different leadership team right so that's that's
Shueb Ahmed
On the analytics part and when we say devops so our tool is careful enough of integrating with all the leading ci servers bait jenkins
Shueb Ahmed
Team city bamboo azure devops and so on so you can pretty much quickly integrate if there are any builds that you're running through ci
Shueb Ahmed
Servers you can pretty much integrate with the cloudy platform and then trigger your build through the ci servers so it's a comprehensive solution and
Shueb Ahmed
Also an one-stop shop for all your mobile and as well as web application testing
Shueb Ahmed
So that's about us and when we talk about uh you know on the gardener listing so peak lodi was uh destroyed as an example
Shueb Ahmed
Of technology in the garden in the 2020 report for you know how to build an effective remote testing competencies uh so we have been
Shueb Ahmed
Tested by gartner and also g2 crowd uh uh where we have uh hundreds of customers across the globe and also among the fortune 500
Shueb Ahmed
Companies across different verticals from insurance to banking telecommunications media e-commerce and so on right so that's about us
Shueb Ahmed
And now let's uh try and focus on what visual testing is right so when we talk about visual testing so if we try to
Shueb Ahmed
Understand this is called as a ui interface as well visual ui or ui interface testing so it's basically it's a process wherein you know
Shueb Ahmed
The user the tester or the developer test the app uh to check if the visual elements on the app's ui appear accurately on the
Shueb Ahmed
Screen right so it's more to do with the ui validation rather than the functional behavior so it's completely different than the functional behavior so
Shueb Ahmed
It's very important to understand uh what visual testing is right so i'm sure many of us search in are already doing the visual testing
Shueb Ahmed
Right either through manually or through automation uh so we need to understand um the the importance of visual testing and how we can capture
Shueb Ahmed
The bugs earlier even if even the application is released uh to the production all right so and also in in other words if you
Shueb Ahmed
Put this uh visual testing in terms of you know it's more of like catching the visual bugs right that appear on the screen of
Shueb Ahmed
The page and as i said so these are completely different than the functional bugs so it's more of a ui based element so you
Shueb Ahmed
Try to compare your screens from the visual point and try to understand if the screen is appearing as expected
Shueb Ahmed
And now when we talk about uh visual testing in case of development or even in the qa right what does it mean right so
Shueb Ahmed
Now if you try to understand so visual testing is something which is required right whenever an app with an ui visual ui basically is
Shueb Ahmed
Developed so in today's world uh you know where the front end developers are more reliant on the html and also the cs css to
Shueb Ahmed
Develop the pages and uh with the concept of just the right ones and uh run anywhere model so that's where the front end developers
Shueb Ahmed
Are more reliant on so in such cases the uh the quality of the pages may be you know the uh on the appear to
Shueb Ahmed
Be expected um and false more false on the ui so there is a huge quality dependent right and it pretty much falls on the
Shueb Ahmed
Eqa so there are tons of browsers which has to be tested on different operating system different screen sizes so that you'll all need to
Shueb Ahmed
Check the pages right so so visual testing becomes quite a tedious task in such cases and we have to um
Shueb Ahmed
You know comply um with all the standards um with all these sites even before the application is getting released so there is a huge
Shueb Ahmed
Pressure on the qa ah from these aspects now so if you try to understand this i'm sure you would understand how important it is
Shueb Ahmed
To test your you know the applications or the web pages or even the mobile applications when it comes to visual integrity
Shueb Ahmed
So let's try and understand the importance of visual testing right so despite all the efforts in the developing developing the app and also running
Shueb Ahmed
Several tests for compatibility or usability or even from functional part right so we are not never too sure how it will pan out visually
Shueb Ahmed
On various different screens and devices right so for example if you look at this picture
Shueb Ahmed
Right what does it talk about so there are two different screens so we can see uh you know there's a there's a sample um
Shueb Ahmed
Signup page uh that has been rendered on the chrome and the firefox so you clearly see that the logo here all right is not
Shueb Ahmed
In place um in in case of mozilla firefox so there is a little distortion that has happened on the logo and um also when
Shueb Ahmed
We talk about the login button is also hidden by the the information the help information that is coming here so though the application is
Shueb Ahmed
Um it's the same application but when it is tested on a different browser it all seems to be appearing differently altogether right when it
Shueb Ahmed
Is tested on a different browser so how are we going to cater such uh you know visual bugs we cannot release the application without
Shueb Ahmed
Having these bugs tested so it's really important to test against these different parameters
Shueb Ahmed
And uh understand how visual testing can help so how does it help in a broad way right when we talk about visual testing so
Shueb Ahmed
When you have an approach of visual testing within your testing approach so how is it going to help right so visual testing basically helps
Shueb Ahmed
Curtails more frequent losses or heavy losses that are caused by unchecked visual errors so there can be numerous errors if we are releasing the
Shueb Ahmed
Application without checking the um you know the visual errors right the functional behavior is different here but when it comes to visual testing this
Shueb Ahmed
Is something which has to be validated thoroughly so with the proper visual testing and you know tool in place we can make sure the
Shueb Ahmed
Huge losses that would be encountered either through the resources or even through the time that can be very much minimized
Shueb Ahmed
And then this also helps in um you know having a very elegant uh user experience right when it comes to the ui and the
Shueb Ahmed
Ux design so that will eventually lead to app success
Shueb Ahmed
Every organization will prefer to have a better use actually experience no ux experience is something where every user is looking for there are hundreds
Shueb Ahmed
And thousands of apps already in the production right so if we do not need the user experience in today's world uh right the the
Shueb Ahmed
Dissatisfaction from the users will be high and um there won't be any uh usage of the application the application will just be abandoned all
Shueb Ahmed
Right and eventually which will impact the business right so it's really important that we test all scenarios which includes the ui uh which which
Shueb Ahmed
Makes the ui better right with the help of visual testing
Shueb Ahmed
And yeah this will help any visual testing bugs being you know even before they get released to the production we can easily get catch
Shueb Ahmed
Hold of them you know while we are testing the application so visual testing can be uh you know started very soon all right even
Shueb Ahmed
After the unit and the integration testing is done uh so we can very well start the visual testing once the ui of the screen
Shueb Ahmed
Is developed all right so that there are very minimal uh defects uh before it is gone to the production and we can
Shueb Ahmed
You know completely minimize all the ui issues uh in the user acceptance testing so that will also help in a larger way and it
Shueb Ahmed
Also ensures uh the rendering of the ui right on different devices like we saw in the previous screen where uh the simple uh the
Shueb Ahmed
Sample login page used to appear differently on a different browser similarly when we test it on a different devices all right when you're testing
Shueb Ahmed
An application in a tab versus on a normal mobile device funnel how it will behave right what is the difference right so if you
Shueb Ahmed
Do not have a proper ui if you if there is any rendering of these screens of the ui that is different from one device
Shueb Ahmed
To device then again it pretty much hampers uh and it will lead to more dissatisfaction from the users right so this will also ensure
Shueb Ahmed
The uh you know getting the any ui rendering screen issues
Shueb Ahmed
And of course it also checks for the responsive any designers if there are any specific design errors on the screen you can pretty much
Shueb Ahmed
Catch hold of them right it's not just only the visual elements but also various different texts if there are any text issues uh related
Shueb Ahmed
To uh through the ocr you can pretty much identify all the text uh that that is appearing if there is something uh you know
Shueb Ahmed
Different on a different build so you have for example you have two different builds right on a older build you seem to see how
Shueb Ahmed
Everything very much in place along with the ui different elements all the text appearing to be very stable but once there is a new
Shueb Ahmed
Step once new version is released you could probably see some differences and if you want to identify quickly how you can easily identify those
Shueb Ahmed
So those can be done so visual testing is very important in every aspect
Shueb Ahmed
And uh when we talk about the differences um it is i mean pretty straightforward as a variation so visual testing so this is more
Shueb Ahmed
Of uh you know the test will be conducted based on the visual correctness not the based on the functional behavior so functional testing is
Shueb Ahmed
Something where you test the uh the software behavior correct and based on the use cases that that has been written
Shueb Ahmed
And also uh when you talk about visual testing so it's more of uh visual elements that we will try to match uh with the
Shueb Ahmed
Desired uh ui design and whereas in function this is more of um you know the input should match with the desired output all right
Shueb Ahmed
So that's one of the typical differences when you talk about visual functional testing
Shueb Ahmed
And visual testings are pretty much not non-judgmental you cannot judge based on the pass or failed scenarios uh so it is pretty much on
Shueb Ahmed
The ui screen where the developments are appearing properly as expected or not whereas in case of uh functional testing it is pretty much uh
Shueb Ahmed
You know judgmental testing where whether if it's a failed or a pass scenario so you test the flow and you see the behavior of
Shueb Ahmed
An particular functionality and you see if the functionality is working fine or not all right and you you judge accordingly right whether if it's
Shueb Ahmed
A past or failed scenario so that's uh of differences of visual testing versus functional testing
Shueb Ahmed
And if you uh will try and understand what are the challenges uh we've been facing through manual uh visual testing human error of course
Shueb Ahmed
Um we cannot test everything just with the manual testing right so there could be a human error where we cannot identify a few things
Shueb Ahmed
Uh which where the tool can do correct it might require a huge amount of time in case if you want to thoroughly inspect the
Shueb Ahmed
Uh you know the screen the screen to screen so there's a lot of effort plus there is always a chance of human errors so
Shueb Ahmed
That is pretty much there and as i said it's very very very time consuming you cannot really sit and start comparing the screens from
Shueb Ahmed
One screen to another screen every applications might have 10s and 15s of screens right on per functionality so in order to test each of
Shueb Ahmed
The images each of the screens it is very much time consuming
Shueb Ahmed
And as a visual elements on multiple pages it also becomes a challenge and then also screen orientation which is very important uh so this
Shueb Ahmed
Is also one of the challenges and uh challenges around multiple screen configurations so different screen configurations on a different devices uh so it becomes
Shueb Ahmed
Really challenging you cannot really um try and see and understand how the application is behaving here the ui appears on a different screen configurations
Shueb Ahmed
When we have it and of course on different multiple browsers os device combination there is always um you know the uh effort that is
Shueb Ahmed
Required you cannot really test it manually on each of the browsers each of the os versions or each of the device combination so there
Shueb Ahmed
Is a there are these are some of the highly uh challenges that we've seen when it comes to manual testing uh for the visual
Shueb Ahmed
Contract now let's take a look and try and understand how the ai the artificial intelligence and automation testing helps us in visual testing so
Shueb Ahmed
This has been a trend uh now which which which most of the organization are preferring right so imagine you know testing visually manually as
Shueb Ahmed
We saw in the previous slide could take hours and hours also on the human effort right but um with the ai technology in place
Shueb Ahmed
And also by using automation we can pretty much reduce the effort here and also the time to help understand the visual concepts and also
Shueb Ahmed
The visual elements identify the visual bugs very easily on multiple combinations of browsers devices screen sizes and even oss right so it's very straightforward
Shueb Ahmed
So let's take a look some of the examples of the roles of the ai all right so when we talk about these different roles
Shueb Ahmed
So when we talk about the automation comparison process so it is very straightforward it automates the comparison process so where you don't have to
Shueb Ahmed
Worry about comparing so you just write a piece of a script
Shueb Ahmed
Which is required and it automatically compares the screens with different different application builds all right and thereby the process is very smooth it is
Shueb Ahmed
Completely automated and um also the ai algorithm which we have is uh you know based over the pixel based comparison so it tries to
Shueb Ahmed
Compare uh with the pixel based right rather than the visual elements that we see and yeah all the objects are identified based on the
Shueb Ahmed
Pixel and it also works very well with the dynamic changes so if there are any dynamic changes on the applications of course dynamic changes
Shueb Ahmed
Are want to have right on every application as soon as there are any changes that has been applied uh and developed on the uh
Shueb Ahmed
Application so dynamic changes are very much you know in place all right so so in order to identify those dynamic changes the role of
Shueb Ahmed
Ai becomes very effective and also with the automation and the identifying the accuracy would be very higher all right so you can very easily
Shueb Ahmed
Identify uh the the elements the visual elements right create a very small even from a check box to a very minimal uh which could
Shueb Ahmed
Be um you know which would be avoided um when you're doing through the manual testing so the chances of the visual bugs getting escaped
Shueb Ahmed
Are very very minimal here with the you know ui with the role of ei and automation in visual testing
Shueb Ahmed
And thereby it accelerates your complete validation process right which eventually helps you in uh releasing the app to the production uh very fast and
Shueb Ahmed
Thereby having a very good rated app all right every
Shueb Ahmed
Organization that are required and you can also integrate this with your existing apm frameworks all right so just with the small piece of a
Shueb Ahmed
Code you can easily integrate and then execute your scripts very easily
Shueb Ahmed
And so Pcloudy is visually ai right so as i said um peak loading has been uh peak load has come up uh with
Shueb Ahmed
The uh your visual ui feature which helps you test all your visual elements on the fly by using the ai concept and also the
Shueb Ahmed
It can also integrate with your existing automation solutions btm selenium xcoi test or the expresso
Shueb Ahmed
And so it is very simple uh you need not very much about writing the codes which are complex so no so the codes are
Shueb Ahmed
Very simple you just have to add it within your existing script that makes your life easier and these are just a few line of
Shueb Ahmed
Codes that is required that is required to add in your existing code and this accurately checks the app ui
Shueb Ahmed
When rendering across different multiple devices oss browser combinations so you can pretty much do it at a very faster pace
Shueb Ahmed
And it can as i said it can be easily integrated with your existing automation framework all right so this big lodi is a visually
Shueb Ahmed
I plugin also makes your visual testing very smart and very easy simple and the plugin which we have also helps you compare the screenshots
Shueb Ahmed
With the baseline image and to spot it there are any differences very instantly
Shueb Ahmed
And it also checks for the accuracy of the app's ui
Shueb Ahmed
So when rendering across different devices and it also compares the graphics on the screen along with the text and or maybe it could do
Shueb Ahmed
The icons as well all right and so to the you know my new test of details so all these features uh not only make
Shueb Ahmed
Your visual testing effortless but also you know provide you a sigh of relief so when it comes to enabling this on your favorite automation
Shueb Ahmed
Tools right so we can see it in live um how the code can be integrated with the existing framework and execute a sample script
Shueb Ahmed
And see how the ai and the visual peak lodge visual area helps you in identifying or spotting the differences of different screens on different
Shueb Ahmed
Devices on different oss combination right so we will look into that let's let's see it in live right i'll quickly jump into the demo
Shueb Ahmed
Now let me just switch all right so i'm using eclipse ide here as an epm client uh you can pretty much use your own
Shueb Ahmed
Uh ids android studio or visual studio and the script which we have is based on test ng framework right as peak cloudy as abm
Shueb Ahmed
Is a framework agnostic you can pretty much use your own frameworks depending on your skill sets and the resources that you have and this
Shueb Ahmed
Is the sample script and we have we will upload this on our github location as well in case if you wish to refer them
Shueb Ahmed
So the three different parts to it i will touch base around them so there is a first method is a before method where we
Shueb Ahmed
Are initializing the driver whether it's an android or ios and this is the endpoint url where the abm server is hosted and these are
Shueb Ahmed
The capabilities based all right so it's just that uh i need the six line of code for me to in order to integrate with
Shueb Ahmed
My existing script right so if you look at these capabilities so these are nothing but user name api key followed by the application which
Shueb Ahmed
You are executing it and then the device on which specific device you are trying to execute all right and some additional capabilities which you
Shueb Ahmed
Can add right and the second part of the test is to write the actual test cases so we have a sample application uh where
Shueb Ahmed
We are trying to see if there are any uh you know differences in the images right between two two different builds all right so
Shueb Ahmed
We'll try and take one example of one one of the application uh where i have two builds in my first build i am taking
Shueb Ahmed
Some base images right so the prerequisite to execute and apply the ai's visual ui is uh you need to have a baseline image correct
Shueb Ahmed
So which is nothing but uh you know which is basically which we are trying to compare with our current build okay so i have
Shueb Ahmed
Placed this in this different uh location okay so these are my base images which i'm trying to compare with my existing and there is
Shueb Ahmed
Also a connector which is required uh which people you will be providing which you will be adding within your uh libraries right so once
Shueb Ahmed
You have added uh provider author where we are authenticating with the user details here so this these are my vcloud is user details and
Shueb Ahmed
As i said these are the base images where we are trying to upload okay so i am trying to place this in my repository
Shueb Ahmed
This is image one and image shoe correct so these are the two images which i am comparing with my new build which i have
Shueb Ahmed
Recently released recently have m them and also i am printing them as a base image id based image id1 correct and
Shueb Ahmed
And also uh we are once that is done and here we are getting that image id correct this will actually get the image id
Shueb Ahmed
Which we have uh got and it will like actually capture the screenshot correct and once that is there we are also using the hash
Shueb Ahmed
Map functions which helps which is used for you know mapping the keys with functions
Shueb Ahmed
And these are the parameters i'm passing them as a parameter based image id and so it tries to compare it with the base image
Shueb Ahmed
And this is my the actual image which i am trying to execute now and this is the driver.executescript api right so this is the
Shueb Ahmed
Api which helps me give the difference image that it tries to compare with the image uh base image id with except image id and
Shueb Ahmed
This gives you the difference in image if there is any distortion in the screen or if there is any changes in the visual screen
Shueb Ahmed
We will see that so intentionally what we have done is we have made some changes on the base images all right and we are
Shueb Ahmed
Trying to see if there is any difference whether the uh if the if this feature if this capability uh is capable enough giving me
Shueb Ahmed
The differential image okay and i'm placing that in a different location altogether okay so that's how it is and uh yeah just it's just
Shueb Ahmed
Trying to get the uh elements pass of a particular action that i am being performing on both the side similarly this is for the
Shueb Ahmed
Second image right this image and base image id1 so as i said we have two different images so these two images will be compared
Shueb Ahmed
With two different new images and i will get two different uh images all together right so these are some of the piece of information
Shueb Ahmed
That you will be adding it within your existing uh code and you can configure your own way all right
Shueb Ahmed
And uh yeah so that's it and last method is the after method where we are putting the driver all right so once i have
Shueb Ahmed
All these parameters and everything in place i can execute the script so before that i'll just quickly check if this particular device is available
Shueb Ahmed
I'm executing this on samsung galaxy m40 so i'll go to the platform so device dot photo com is the uh cloud url where the
Shueb Ahmed
User can access it's a public cloud whereas different devices as you can see so i can quickly look for galaxy m40
Shueb Ahmed
And see if this device is available yeah this device is available now i can just try and execute so before that let me also
Shueb Ahmed
Go to the folder where we have the baseline images so this is my folder where i have placed the images here all right so
Shueb Ahmed
These are two of the images so we have intentionally done some changes on the screen right
Shueb Ahmed
So that whether the script is capable of identifying this with an actual image
Shueb Ahmed
And also on this screen we have tried to intentionally remove some elements some text on the screen all right so these are my baseline
Shueb Ahmed
Images differential images we will get it once we execute the script if i just show you the screenshots these are my previous screenshots so
Shueb Ahmed
This is what we have done what's new is something which we have intentionally uh uh you know made a mark on this screen and
Shueb Ahmed
Whether if you try and see if it's really captioning or not all right so that's my pre-requisite i have to place my base images
Shueb Ahmed
In the base image folder and yeah i can just try and execute this let me execute go to run as click on test ng
Shueb Ahmed
So once i trigger the execution will get started yeah here's the ids that is getting printed at the same time i can go back
Shueb Ahmed
To the platform uh just if i want to see the live view what's really happening right i can just go to my active session
Shueb Ahmed
And you can start seeing the session as well at the same time i can monitor the console
Shueb Ahmed
So this is actually trying to print the images image id here
Shueb Ahmed
Yeah the device is connected let me just connect to the device
Shueb Ahmed
Live view is optional the execution will still happen at the back end but in case while you are debugging if you want to make
Shueb Ahmed
Sure the app is getting launched and the execution is happening you can go to the live view and see and meanwhile at the same
Shueb Ahmed
Time you can monitor your execution as well as you see the apm client is just getting set up on this device and now the
Shueb Ahmed
Execution will proceed further the application will get installed and it will try to capture the images so now here it has uh it's these
Shueb Ahmed
Are the images image id right both the image ids we have got the one which we have uploaded right now you see the application
Shueb Ahmed
The driver has been initiated and this is my new build what i have so
Shueb Ahmed
Yeah driver got initiated and you can see uh it has given the screenshot and placed in this location so first scenario is passed now
Shueb Ahmed
The second screen yeah it got pretty much got executed without any issues now if i go and see here right both the scenarios are
Shueb Ahmed
Pretty much passed so these are my image ids and the driver got initiated and then it captured the screenshot it compared and captured the
Shueb Ahmed
Screenshot and gave me another image id here and the differential image is placed here
Shueb Ahmed
So as you can see the scenarios all right so now it is completed so now in order to validate now whether if i got
Shueb Ahmed
Any differential images i will go back to the folder here in the difference image i should see the difference image here right yeah here
Shueb Ahmed
Is the difference image you see here right so it it tried um
Shueb Ahmed
You know transporting the differences with the base image with the current one and as i said we intentionally um you know highlighted uh or
Shueb Ahmed
Removed one specific um the context from the image right and it is clearly highlighting here and even if you closely see uh the it
Shueb Ahmed
Is even highlighting the duration the time and the duration of it all right so it's trying to spot here this is one screen and
Shueb Ahmed
The other screen is the privacy policy all right so it got easily highlighted
Shueb Ahmed
Yeah i can just show you my base images so that you will understand
Shueb Ahmed
Right this is the one which i have made some changes on the screen and identifying it gave me an image very easily
Shueb Ahmed
And on the second screen uh the privacy policy right
Shueb Ahmed
Let me show you the difference images and the privacy policy
Shueb Ahmed
Right so that's how it works um very smoothly very elegant i did not have bother much about identifying the elements it was very smooth
Shueb Ahmed
So if there are any new builds and if you really want to compare with your existing build you can just make sure that you
Shueb Ahmed
Place your screenshots as part of your base images on your base image folder and then you compare it while you are executing your script
Shueb Ahmed
So this will help you quickly give the difference image so that will help us help you understand the differential image and quickly spot the
Shueb Ahmed
Differences and thereby identifying the visual bugs very quickly right so this is one such example you can further configure with your own ways with
Shueb Ahmed
Your own scenarios and help identifying so we have also released a complete documentation for it which will help you understand in detail and not
Shueb Ahmed
Just that we are also we've also we can also verify the text correct so image comparison is just one such example also if you
Shueb Ahmed
Want to verify the text on a screen on a particular screen you can pretty much do that as well the capabilities will remain same
Shueb Ahmed
As it is and yeah again we are using a hash map here to map the keys with the functions and here we are trying
Shueb Ahmed
To verify whether if the accept button on this screen right on a particular screen so this is what i am trying to validate here
Shueb Ahmed
Whether if i have if i'm getting the screen as expected so i can execute the script as well and see um how it functions
Shueb Ahmed
And the second word which which we are trying to say is the book of light so on a second screen we are trying to
Shueb Ahmed
Fetch the word book of light correct so i can pretty much see that as well maybe i can do some changes here maybe i
Shueb Ahmed
Can make it to make some correction here i mean intensely i'm adding some issues here so that if the uh the ocr tries to
Shueb Ahmed
Identify it right so these are the apis that you would be using it on your on your local scripts correct
Shueb Ahmed
Let me see if this device is available google pixel 2 you can simply execute it
Shueb Ahmed
The execution will get started i can validate by going into the devices section in my active session if the device is getting booked
Shueb Ahmed
Yeah i see the device is getting booked here i can further go into the live view
Shueb Ahmed
Yeah now i can start comparing and see if the application is uh if the ocr is trying to identify the text that is required
Shueb Ahmed
Yeah so on the first screen as i said it is trying to find whether the accept button has come here and on the second
Shueb Ahmed
Screen i intentionally made a mistake a book of flight right instead of book applied i just gave it as okay and stuff right i
Shueb Ahmed
Gave it an okay text and as you see it has come at us false
Shueb Ahmed
All right okay pretty much done so now if i try to compare here the results i'm pretty pretty much printing it on my uh
Shueb Ahmed
Console here so the first test was to capture the accept button so the accept button stayed as it is right um
Shueb Ahmed
Yeah and hence it is true here and in this second screen i intentionally made a error here instead of light i made it as
Shueb Ahmed
An okay and then you could see there is a false here
Shueb Ahmed
Then going on the rest of the things i did not do any chassis changes and thereby all the other scenarios have passed and these
Shueb Ahmed
Are also in case if you wish to see the uh you know the screens you can pretty much get it on these different uh
Shueb Ahmed
Locations okay so that's how you compare the how you verify the text and
Shueb Ahmed
Also get all text this is something in order if you want to uh see what are all the text that is appearing on the
Shueb Ahmed
Screen if you want to capture the entire screen you can pretty much get it as well you just have to um add the same
Shueb Ahmed
Connector and authentication details and this is a hash map again it's a java function which we are using
Shueb Ahmed
Right and this is the element we are using x-bar to identify the particular element and we are printing every screen correct and also we
Shueb Ahmed
Are passing uh the api here correct it will help me give all the text which is present on a specific screen right so this
Shueb Ahmed
Will help me understand validate if there are any issues with the text if there if any text that is missing i can pretty much
Shueb Ahmed
Print that as well so this can also be done i can execute it and see it in real time so let me see if
Shueb Ahmed
Google pixel 2 is available yeah i have a little pixel 2 android 11 i can simply execute it
Shueb Ahmed
Let me see has come on the yeah the device has been booked
Shueb Ahmed
Let me go to the live view just to ensure the application is getting installed and all the scenarios are executed
Shueb Ahmed
Yeah now the driver will get initialized once it is initialized uh the uh the other the part of the test cases will continue
Shueb Ahmed
Yeah it will fetch all the information that is on the screen you see here accept refuse
Shueb Ahmed
Right and it got printed good enough it got executed um very fast uh yeah as you can see all the text that is appearing
Shueb Ahmed
On the screen right on the first screen we had just two um buttons there one was accept and refuse and then on the next
Shueb Ahmed
Screen all the text which was part of the screen and we are pretty much capturing that with the help of these apis with the
Shueb Ahmed
Help of these apis and printing printing them on on my consoles and this will help me understand uh if if there is any any
Shueb Ahmed
Word or if there is any text which is missing or additionally added so i can quickly run the script and try and understand so
Shueb Ahmed
This is pretty much possible and the last one is the coordinates right so if you are trying to understand the coordinates if you want
Shueb Ahmed
To understand what are the different coordinates for a particular test similarly you can create this one
Shueb Ahmed
And i have created the script and again added few scenarios which will help me understand yeah again on the accept button if i am
Shueb Ahmed
Trying to get the coordinates of this accent button with the help of this uh api for the nikkei so this will give me the
Shueb Ahmed
Um left the the coordinates array at which particular point the accent button is placed so we have written a formula here so java functions
Shueb Ahmed
You can pretty much add it your own way and get this if i try to execute this i will get all the relevant information
Shueb Ahmed
So there are two such scenarios which we have added here all right so
Shueb Ahmed
Yeah so you can pretty much make use of all various different facial mechanisms that you want to run through the image comparison or even
Shueb Ahmed
Verifying the text to all getting all the text along with the coordinates
Shueb Ahmed
You can very well use we have detailed documentation in place which we have published on peak loaded documentation which you can follow and uh
Shueb Ahmed
Yeah so that's pretty much uh on the visual ai's event side i hope this session was uh information uh informative and useful in case
Shueb Ahmed
If you guys have any queries you are open to qna
Shueb Ahmed
Let me see if there are any queries okay let's get started with the q a uh there are very there are few questions which
Shueb Ahmed
Are coming all the way let's try to answer them
Shueb Ahmed
Okay let me take question here from the user imran who says
Shueb Ahmed
When can we start the visual testing uh which testing phase all right very good question uh so you can so you know run the
Shueb Ahmed
Visual test at any uh at any point you know of your application right with your visual ui so most developers they try to run
Shueb Ahmed
During um you know the visual test individually on their components while they are developing it right and from the functional on a functional functioning
Shueb Ahmed
Application side it could be during the end to end test as well so there is no specific uh point or face where you need
Shueb Ahmed
To start once the ui is developed it starts from the developers even the developer does the testing uh ui they can add within their
Shueb Ahmed
Codes like i showed or even after the end-to-end test is done you can involve during any part of the test
Shueb Ahmed
Right so yeah hope i have answered your question bro
Shueb Ahmed
Okay there's one more question from user ajay he says how can we compare two different images all right i
Shueb Ahmed
Two different images on two different uh devices okay very good question again uh so if you want to test the comparison on two different
Shueb Ahmed
Images right so this is pretty much possible so when you are executing your tests uh through the framework all right uh you could what
Shueb Ahmed
You can probably do is uh do the parameterization for two different devices so that you launch both the devices at the same time so
Shueb Ahmed
You define the devices on which devices you want to run so you make sure as i showed make sure you capture the base images
Shueb Ahmed
Of your existing application and place it in the base image folder so that when you try to run your new build okay new build
Shueb Ahmed
Uh so it this tries to uh spot the differences with your actual with your base images and this will give you uh you know
Shueb Ahmed
Differential image on a different folder i hope you would have seen that yeah of course i showed it on a single device but of
Shueb Ahmed
Course you can map it for multiple devices as well at the same time
Shueb Ahmed
And thereby that helps you understand how you can spot the differences with your previous builds right so yeah this is possible i hope you
Shueb Ahmed
Have answered your query thanks okay so there's another question uh from the user who says uh how is the baseline image captured uh manually
Shueb Ahmed
Or is there any record and uh capture option now currently uh you know this has been done manually right so you have to have
Shueb Ahmed
The baseline image manually you so if you would have run your previous builds execution you you tend to capture the screenshots of every screen
Shueb Ahmed
Right you need not do it manually even you can run the script of your existing build capture the screenshots and place them in the
Shueb Ahmed
Base image folder right you don't have to necessarily do it manually you can run through script and capture them and then once the new
Shueb Ahmed
Build is available you just change the application details with a new build and just try to compare it with the base image right of
Shueb Ahmed
Course there is a little manual effort but you can automate that as well uh so so that you identify the uh differences in real
Shueb Ahmed
Time yeah okay answer one sergio query that was from rajinibala balakrishnan yeah thanks for your query and you also have a follow-up question i
Shueb Ahmed
Believe do we need to capture the different base images based on different device sizes screens and page orientation
Shueb Ahmed
Yes you are right um you have to capture the base images see the prerequisite here is as i mentioned um you need to capture
Shueb Ahmed
It correct um so need not necessarily be captured for different devices or different uh screen sizes so in order to understand so for example
Shueb Ahmed
You have a use case um on a specific device right you you run a script you do your execution and then you capture the
Shueb Ahmed
Images for every screen right and you consider them as a base image and then you can place those base images in your base image
Shueb Ahmed
Folder now what happens is when you are trying it to run it on a different device altogether right say for example first you run
Shueb Ahmed
It on a samsung device and you considered them as a base image and then you placed it in the base image folder now when
Shueb Ahmed
You are running it on a oneplus device you actually then you will get us you get to see the differences real-time differences right and
Shueb Ahmed
Their way understanding what's the difference when i'm executing on samsung and what is the difference when i'm executing on the oneplus so what it
Shueb Ahmed
Does is when you are executing with oneplus device with the same application
Shueb Ahmed
This will give you the differential image altogether it will try to compare and see if there is any difference at all there is no
Shueb Ahmed
Difference it will still print the image whatever it's getting if not there won't be but however you need not separately capture the base images
Shueb Ahmed
For a different screen sizes or different devices you could run it and see it if there is any difference at all so that helps
Shueb Ahmed
You the intent here is to help you spot the difference when you are running the same build or a different build on a different
Shueb Ahmed
Devices and see the spot the differences okay i hope i have answered your question rajnee balakrishnan
Shueb Ahmed
Okay there is one more question so from russian he says visual testing are non-judgmental could you please brief ones hey thanks for your question
Shueb Ahmed
Russian uh yeah so as i said see when we talk about uh judgment thing or non-judgmental so this is something see when we talk
Shueb Ahmed
About functional testing behavior here we are pretty much judging based on the functionality of that particular use case right whether it's passing at that
Shueb Ahmed
Particular point whether if you're able to achieve that scenario right and you are purely judging based on the facts there based on the uh
Shueb Ahmed
Behavior of the application for example if you are trying to login um right log into application with um with your credentials and um you
Shueb Ahmed
See uh with the proper username and the password you are able to log in on that so you are just testing the functionality here
Shueb Ahmed
Whether if you are able to login so that's judgmental correct you very well you make it better if that scenario passed or not but
Shueb Ahmed
Whereas in case of visual testing this is something where you cannot really judge based on the behavior of the software or behavior of the
Shueb Ahmed
Application it is based on uh visual visual elements that has been on the screen correct
Shueb Ahmed
You tend to spot the differences of course you could do it manually but it takes a lot of time consuming so when you are
Shueb Ahmed
Executing uh when you are implementing it through the uh automation scripts so that's when the benefit of ei comes in under automation right and
Shueb Ahmed
This will quickly highlight the um the issue the visual bugs that will try to compare it with the other image and just give you
Shueb Ahmed
A different image altogether with the highlighted so hence we call this as a nudge and non-judgmental we are not judging based on the behavior
Shueb Ahmed
But on the visual appearance on the ui screen right
Shueb Ahmed
Yeah i hope to answer your question russian thank you
Shueb Ahmed
Yeah again there is a question can the same script be tested against different devices against the same question from regina i think i tried
Shueb Ahmed
Answering uh this to one of the user uh named but yeah i'll try to answer yes the same script can be tested on a
Shueb Ahmed
Different devices parallely at the same time you can parameterize with the different number of devices based on the number of licenses that you have
Shueb Ahmed
You can just execute it so but you have to make sure that those devices are available right so it can be two different devices
Shueb Ahmed
Three different devices theoretically there is no limit as such all right you can execute on n number of devices
Shueb Ahmed
That is also possible i hope i have answered your question
Shueb Ahmed
Well then uh spot on thanks um for your time thanks for your queries very interesting um session because uh i believe and i hope
Shueb Ahmed
This session was very informative uh so in case if you guys have any queries uh feel free to reach us out
Shueb Ahmed
We are there to happy to help you uh with any use cases with that i conclude
Shueb Ahmed
And once again thank you so much we look forward or to work with you all and collaborate
Shueb Ahmed
Thanks again have a good day you
