26.2 Visual QA Testing in Opkey

Visual QA Testing?

Visual QA Testing can be described as the process of inspecting the user interface of a web application and ensuring it is presented as required. The main objective of the Visual QA Testing is to find visual errors like misalignment of objects, layout, font, etc. Visual QA Testing helps user to verify the web content (charts, graphs, dashboards, etc.) on a web page, which makes it worthwhile for a website having high graphical functionality.

Quick Screencast:

Visual QA Testing using OpKey:

OpKey is now capable of testing & analyzing visual quality of the websites. It has now been integrated with few Visual QA specific keywords which help in automated testing of look & feel of responsive websites & different browser sizes. You just need to define your own tags for devices and sizes while using these keywords to write checks for each element on a page.

Visual Testing specific keywords are as follows:

1. VisualCheckPointSetting
2. VisualCheckPointForObjects
3. VisualCheckPointForPage
4. VisualComparisonForPage

For details about these keyword, please refer:

https://www.opkey.com/Help/docs/opkey-help/opkey-keyword-documentation/selenium-js-keywords/

Scenario:

Let us automate a website, Lifetime Fitness (https://www.lifetime.life/) using OpKey Web by using OpKey Visual QA keywords. Let us create a Test Case with Visual QA OpKey keywords, as described below.

Before using these OpKey keywords you must ensure that you have fetched all the required objects of the web application to be mapped with test steps, as required.

Steps to be followed:

Let us add test steps using Visual QA Testing specific keywords in the Test Case.

• Add a Test Step using OpenBrowser keyword. Provide Browser name & website URL .

• VisualCheckPointSetting

This keyword is used to set prerequisites for visual QA. It doesn’t take any object input argument but it takes some data input arguments as described below.

Data Input Arguments:

SpecFileName – Provide the name of File to be created with .spec file extension. It will also create a Folder with the same name which will contain all the fetched objects in objects sub-folder. It also contains a full web page image within pageimages subfolder.

SpecFolderPath – Create a new folder and provide the folder path.

Platform – Provide platform name for which you are performing test such as Desktop, Mobile or Tablet (Here Desktop).

ValidateBaseline – Set False (you need to set it False for the first iteration of the test)

Approximation Range – Provide the range of visual checkpoints which can be ignored. Beyond the approximation range, they will be considered as errors (bugs).

• VisualCheckPointForObjects

This keyword is used to create and compare different layout among objects. It takes up to 10 objects input arguments. It also takes some data input arguments as described below.

Object Input Arguments:

Here, you can provide up to 10 object input arguments. The alignment of these objects will be tested in this visual QA testing. You can also provide Object Output and Dynamic objects instead of Objects from your Object Repository.

1. Object1
2. Object2
3. Object3
4. Object4
5. Object5
6. Object6
7. Object7
8. Object8
9. Object9
10. Object10

Data Input Arguments:

SpecName – Provide the SpecName which collect information about the fetched objects within the created SpecFile.

SpecFolderPath – Provide path of the created folder. It is optional; if you don’t provide SpecFolderPath, it takes path of the folder given with earlier keyword, VisualCheckPointSetting.

• VisualCheckPointForPage

This is Visual plugin keyword which is used to compare the page image by breaking an image into given numbers of rows and columns. It doesn’t take any objects input arguments. It takes some data input arguments as described below.

First of all, it fetches a full image of the web page and saves it. At runtime, it fetches web images and break as per given rows and columns and then compares these images one by one with the earlier fetched image

Data Input Arguments:

ImageName – Provide the name of image to be created.

ShouldOverlay – Provide Yes/No. Yes: Checked; No: Unchecked

If Yes then both compared images will overlay each other, if No then compared images will not overlay each other (Here True as Yes).

NumberofRows – Provide the no of rows into which image has to be broken (Here blank)

NumberofColumns – Provide the no of columns into which image has to be broken (Here blank)

• SetViewPort

This keyword sets the Page Layout according to the given dimensions. It is basically used to open any website/browser in the Mobile View. It takes no object input argument but it takes height and width (resolution) of the site as data input argument.

Data Input Arguments:

Width – Provide the width of the web page.

Height – Provide the height of the web page.

In fact, width*Height is resolution of the browser in which you want to perform visual testing.

• VisualComparisonForPage

This Keyword is used to compare the specified web page with the same web page at runtime based on the specified parameters. It doesn’t take any object input argument. It takes data as data input arguments.

Data Input Arguments:

ImageName –  Provide Image name which will be created during iteration 1.

ImagePath – Provide Image path to be created during iteration 1.

ValidateBaseline – Set False (you need to set it False for the first iteration of the test)

FullPageScreenshot – Set False.

There would be two Test Iterations. First iteration is used to fetch Website visual attributes while second iteration compares previous fetched visual attributes (iteration 1) with the current visual attributes and prepares Visual QA Report.

Iteration 1:

Once all required Object and Data Input arguments are provided correctly, save your Test Case.

Let us execute this Test Case. Click on Run Now (F5) to begin execution process.

The execution process may take a while; you need to wait.

Here, you can view the execution logs.

Once, it has completed successfully, you can view the execution result.

Go to the set path location and view your folder. Here, you can view that there is a folder named as abc (as specified in the data input argument) and with an abc.spec file (as specified file name in the data input argument).

Folder named as abc, contains two other folders named as objects and pageimages.

Objects folder contains the mapped objects along with a full screen of the web page and another image named as view-port.

Folder named as pageimages, contains two images with names as specified in the test step.

Another important content is Spec File which is created as per the specified SpecFileName. You can open it on a Notepad or any other supported editor to view content.

Spec File reflects key information about the web page attributes regarding their alignment, location, size (width & height) etc.

Iteration 2:

Let us perform second iteration of the Test to visually compare the website.

There are few required changes you need to make. Set True status of ValidateBaseline data input argument under VisualCheckPointSetting keyword test step.

Set True status of ValidateBaseline data input argument under VisualCompareForPage keyword test step.

Let us execute this Test Case. Click on Run Now (F5) to begin execution process.

The execution process may take a while; you need to wait.

Once, it has completed successfully, you can view the execution result.

Go to the set path location and view your folder. Here, you can view a new folder named as VisualQAReport along with other file/folder.

VisualQAReport folder contains another folder which contains vital information about the performed visual test result.

VisualQAReport folder content are shown below:

Let us open the html file named as “1-opkey-seleniumjsplugin-test-desktop-1024×800-” to view test result.

There is detailed visual test result information regarding the objects, mapped by you.

You can further expand Layout and Home page to view spec information of the mapped web page objects.

You can expand folders to view the complete information about the corresponding object, its child & other details.

Heat Map: Heat Map contains all the images of the object in highlighted view, we have mapped in the test.

Each statement of the report works as a link. You can click on the given image link and open to analyze it.

The VisualQA Report contains the same information as information stored by the Spec File.

Open Report html file to view report information in details. The link of OpKey Visual QA Report file opens.

Click on the given link to get redirected to the details report page, as shown below. You can expand it to view detailed information, as described above.