javascript - Testing CSS ':hover' pseudo-class -

i'm having real trouble testing behaviour of css :hover pseudoclass. i've tried following approach, wrapping test.assertequals in event listener casper.on('mouse.move', function(){test.assertequals(...);}) no avail. i've tried multiple combinations of casper.mouse.move , casper.mouseevent('mouseover', rightarrowid); no result either.

the relevant part of tests following. i'm testing webpage running on localhost , other tests run fine.

... var rightarrowid = "#right"; casper.test.begin("on hover, navigation widgets change opacity", function(test) {   casper.then(function() {     casper.capture("abouttomove.png");     casper.mouse.move(rightarrowid);     test.assertequals(customasserts.isopaque(rightarrowid), true, "on hover, 'right' widget becomes opaque"); });   casper.then(function() {     casper.capture("aftermove.png"); });  casper.run(function() {     test.done(); }); ... 

var customasserts = {     isopaque: function(selector) {         return casper.evaluate(function(selector) {             return (document.queryselector(selector).style.opacity === "1");         }, selector);     } }; 

in addition, screenshots show mouse moving, since can see hover effect in second picture not in first one.

the relevant css, gets loaded when page loaded, this:

#right {     opacity: 0.35; }  #right:hover {     opacity: 1; } 

element.style accesses style defined throught style attribute on element. want use getcomputedstyle():

isopaque: function(selector) {     return casper.evaluate(function(selector) {         return getcomputedstyle(document.queryselector(selector)).opacity === "1";     }, selector); }