The Issue

We want to verify a CSS property (a.k.a. ‘style’) for an object (‘element’) on a web page in a Ruby Selenium Webdriver script.

A Solution

CSS properties are the HTML/DOM element attributes directly affected by the CSS style sheets loaded with the page or inline with the HTML.  

A comprehensive list is shown in any of the browser dev tools.  In Chrome that list is under the ‘Computed’ tab and the attributes in bold are those being set through CSS.

2016-10-20 19_08_14-Awetest_Demo - [C__3qilabs_Awetest_Demo] - ..._demo_project_web_cucumber_zoho_en

Our example is the ‘Categories’ button on this page.  The ‘button’ is actually a div in disguise associated with a select list.

2016-10-20 19_06_08-How To _ 3Qi Labs

We want to validate, in Ruby using Selenium Webdriver, whether the style values we are interested in contain the values we expect.   Here is a method that does this.


  • how    –  a string or symbol indicating the element’s identifying attribute
  • what    –  a string that the identifying attribute must contain.
  • style        –  the CSS property to be checked
  • expected – a string that the style value should contain.


Both examples will return true.

If you are looking for an exact match, as we most often are, use this very similar method.

The italicized text comprises the only difference between them.

Example 4 returns true like example 2.  Example 3 returns false because expected ‘muller’ is only part of the actual value ‘muller_regularregular’.

The Result

You now have methods, in Ruby with Selenium Webdriver, to verify the values in a DOM element’s CSS style attributes.  Enjoy!