A bit of a small audience for this one, but a project I was put on wanted us to use the Galen Framework to test their UI. For people who do not know what this framework is, it is a method of writing acceptance code that matches up to the output in the browser window. This can be coded to work for all different device, sizes and URLs. One hard space I came to was to action the hover state of an element and then test it.
If you would like to read up more about the Galen Framework first then you can find all the information you need on the website.
To test you can either run it in the Galen syntax to run in the Command Prompt or you can also run it using JavaScript. I opted of the Galen Syntax for no real reason, but there was a method to action the hover in the JavaScript version.
Ivan Shubin, the creator of the Galen Framework, point me here for the example.
load("init.js");
load("pages/WelcomePage.js");
testOnAllDevices("Welcome page", "/", function (driver, device) {
new WelcomePage(driver).waitForIt();
checkLayout(driver, "specs/welcomePage.gspec", device.tags);
});
testOnDevice($galen.devices.desktop, "Menu Highlight", "/", function (driver, device) {
var welcomePage = new WelcomePage(driver).waitForIt();
logged("Checking color for menu item", function () {
checkLayout(driver, "specs/menuHighlight.gspec", ["usual"]);
})
logged("Checking color for highlighted menu item", function () {
welcomePage.hoverFirstMenuItem();
checkLayout(driver, "specs/menuHighlight.gspec", ["hovered"]);
});
});
You can see the ‘hoverFirstMenuItem’ that actions the hover. This is built into the Framework that comes with the JavaScript. You can find more about the API and the ‘hover’ method on the Reference Guide for JavaScript.
However I was trying to use the Galen Framework in the command prompt, which can inject JavaScript into the page that runs once the page has loaded. The first idea I had then was to run a ‘hover’ action, which because the site I was running it on has Jquery loaded I could use like below:
$(document).ready(function () {
//hover links
$('a').trigger('mouseenter');
$('a').trigger('mouseover');
$('a').trigger('hover');
$('a').hover();
});
Though as you can see I went a bit overboard trying these all out as none of them seemed to work. I knew the Jquery was working as I was able to run other method to do click events and other thing. After some searching I found a method.
I found a way to get all the style sheets and then search through them. Once I could search them I could find out what the ‘hovered’ styling was for that element. Then I could extract the styling and inject it onto the element, so now its standard style becomes its hovered style.
You can see the below method that I use ‘document.styleSheet’ to loop through each style sheet, then get each rule and loop them. If the class I am looking for is found the I user ‘cssText’ to get all the styling from the rule. This does come back as ‘{background-color:blue}’ so the response text is stripped down to just the CSS.
function getStyle(className) {
var c = '';
for (var i = 0; i < document.styleSheets.length; i++) {
try{
var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
if (classes) {
for (var x = 0; x < classes.length; x++) {
try {
if (classes[x].selectorText.indexOf(className) > -1) {
var s = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;
s = s.substring(s.indexOf("{") + 1);
c += s.substring(0, s.indexOf("}"));
}
} catch (ex) {
}
}
}
} catch (ex) {
}
}
return c;
}
You will notice there is a few try catches in the loops, these are because some style sheets it picks up are not accessible so they create an error in the JavaScript. The try catches mean it can keep looping on through the ones it can access instead of breaking out. Another bug fix is where it uses ‘rules’ or ‘cssRules’ and ‘.cssText’ or ‘.style.cssText’. This is due to different browser standards, some of the browsers use one set and some use the other, this prepares for either case when your tests run.
Below is how the full code sits together and can be used. You can see I invoke the method by passing ‘a:hover’ as it is the hover state I need to access to the link.
$(document).ready(function () {
function getStyle(className) {
var c = '';
for (var i = 0; i < document.styleSheets.length; i++) {
try{
var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
if (classes) {
for (var x = 0; x < classes.length; x++) {
try {
if (classes[x].selectorText.indexOf(className) > -1) {
var s = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;
s = s.substring(s.indexOf("{") + 1);
c += s.substring(0, s.indexOf("}"));
}
} catch (ex) {
}
}
}
} catch (ex) {
}
}
return c;
}
//all links
$('a').attr('style', getStyle('a:hover'));
});
