Introduction¶
Application layout validation is a very difficult task no matter the test automation tool. Some level of layout validation can be achieved even using tools which verify object properties and don't rely on screenshot comparison. For Qt applications it can be done by analyzing the minimumSizeHint property of Qt widgets. This property holds the recommended minimum size for the widget.
Solution¶
This article presents a JavaScript solution. Similar solutions can be implemented in other scripting languages supported by Squish. We'll start by implementing a function, which returns true if the current size of the given widget isn't less than the values in the minimumSizeHint property.
function isSufficientlySized(obj) {
var size = obj.size;
var minimum = obj.minimumSizeHint;
return size.width >= minimum.width && size.height >= minimum.height;
}
Next, we'll define a wrapper for above function, which calls the Squish API functions test.pass or test.fail depending on the isSufficientlySized result. This allows us to check the Squish Results for which widgets were analyzed and the outcome of the analysis.
function verifySize(obj) {
var name = objectMap.symbolicName(obj);
if ( isSufficientlySized(obj) ) {
test.pass("Sufficient size of " + name);
return true;
} else {
test.fail("Insufficient size of " + name);
return false;
}
}
Next we'll create a function which generates a list of all widgets contained in the given frame or window. Function fetchAllWidgets(obj) recursively traverses all widgets whose obj is an ancestor.
function fetchAllWidgets(obj)
{
var children = object.children(obj);
var widgets = [];
if (obj.isWidgetType())
widgets.push(obj);
if (children.length==0)
return widgets;
else
{
for (var i in children) {
var child = children[i];
widgets = widgets.concat(fetchAllWidgets(child));
}
return widgets;
}
}
Finally, we'll implement the verifyDialogLayout(dlg, output) function, which is called directly from the test case. It takes two arguments: main widget object reference (frame,window) and image filename, where the screenshot of the main widget is stored in the event the case validation for correct layout is not a positive value. All widgets whose size are not sufficient will have a yellow background on the captured screenshot. This is done using the setStyleSheet("background-color:yellow;") method. An alternative solution is to draw a border for the given widget using setStyleSheet("border:2px solid rgb(255, 0 , 0);")
function verifyDialogLayout(dlg, output) {
var widgets = fetchAllWidgets(dlg);
var ok = true;
for (var i in widgets) {
var w = widgets[i];
if (!verifySize(w)) {
ok = false;
w.setStyleSheet("background-color:yellow;");
}
}
if (!ok) {
var pix = grabWidget(dlg);
// Save image on the computer where the application is running.
// (Use object.grabScreenshot() to have the image on the
// computer where the Squish IDE (or squishrunner) is being
// executed. See https://doc.qt.io/squish/squish-api.html#object-grabscreenshot-function)
pix.save(output);
test.log("Wrote illustration to " + output);
}
}
Example¶
To present this solution in action we use Qt application AddressBook. First, we need to make some widget smaller than they should be. To do that we implement function messWithSizes(), which sets incorrect size for some widgets.
import * as names from 'names.js';
function messWithSizes()
{
foreNameEdit = waitForObject(names.forename_LineEdit);
foreNameEdit.setFixedHeight(8);
cancelButton = waitForObject(names.addressBook_Add_Cancel_QPushButton);
cancelButton.setFixedSize(20, 20);
foreNameLabel = waitForObject(names.addressBook_Add_Forename_QLabel);
foreNameLabel.setFixedWidth(50);
}
function main() {
startApplication("addressbook");
clickButton(waitForObject(names.addressBook_New_QToolButton));
clickButton(waitForObject(names.addressBook_Add_QToolButton));
type(waitForObject(names.forename_LineEdit), "MyName");
messWithSizes();
verifyDialogLayout(waitForObject(names.addressBook_AddDialog), "layout_check.png");
}
Additionally, the screenshot was generated with failed widgets marked as follows:
