Screenshot Verification of a Button in a Pressed State

Standard buttons do not need to have their visual appearance tested as this is typically done by the vendor of the button control. A custom button control, however, will need to have its visual appearance tested in the various possible states of the button (enabled, disabled, mouse cursor not hovering over it, mouse cursor hovering over it). With Squish, to verify the visual appearance, Screenshot Verification Points (VPs) can be used.

The Problem

Creating Screenshot VPs for controls in a pressed state is not easily possible, because once the mouse button that is pressed on the button gets released again, the button changes back to the unpressed state and original visual appearance. If you check the box in the ‘Application Objects’ view to create a Screenshot VP for the button, there is not enough time to go back and press the button before the screenshot for the Verification Point gets taken and the screenshot is taken for the unpressed state.

A Script-based Solution

Here is how you can work around this issue of creating screenshot VPs for controls in their pressed state:

First, record your test script and create a Screenshot Verification Point as you normally would for the button to be tested.

Your recorded test script will look something like this:

import * as names from 'names.js';
function main() {
     startApplication("addressbook");
     activateItem(waitForObjectItem(names.addressBookQMenuBar, "File"));
     activateItem(waitForObjectItem(names.addressBookFileQMenu, "New"));
     //screenshot verification point for the button    
     test.vp("VP1");
}

Next, modify your test script to put the Verification Point statement testp.vp() between the mousePress() and mouseRelease() statements. Because these statements are not recorded, you can simulate the button pressed action by manually editing the recorded test script to contain these statements.

Your modified test script should look something like this:

import * as names from 'names.js';
function main() {
     startApplication("addressbook");
     activateItem(waitForObjectItem(names.addressBookQMenuBar, "File"));
     activateItem(waitForObjectItem(names.addressBookFileQMenu, "New"));

     //get the object reference of the button 
     add_button = waitForObject(names.addressBookUnnamedAddQToolButton)

     //Insert test.vp() betweem mousePress() and mouseRelease() statements
     mousePress(add_button)
     test.vp("VP1");
     mouseRelease(add_button)
}

Now, execute your test script. The verification will fail, and an error will be thrown. (In the test script, the screenshot is taken after the mouse is pressed, and therefore the image taken is that of the pressed button.)

This image is compared against the original image in in the Verification Point which was created for the unpressed state. Right click on the thrown error and, from the context menu, select the option “Use As Expected Result”. This will replace the original unpressed button image in the VP with the pressed button image and will be used for comparison for all future test runs.

The post Screenshot Verification of a Button in a Pressed State appeared first on froglogic.