Reading CSS properties using Watir-WebDriver

There was recently a question on Stack Overflow about how you read a CSS property of an element that is defined in a stylesheet using Watir-WebDriver.

It’s really quite simple:

require 'watir-webdriver'
b = Watir::Browser.start ''
puts b.div(:id => 'g1minesRemaining100s').style 'background-image'

Author: Alister Scott

Alister is an Excellence Wrangler for Automattic.

3 thoughts on “Reading CSS properties using Watir-WebDriver”

  1. It is great to use style attribute to verify an element’s style. However, I just found an annoying issue. Different browsers may return slightly different values.
    For example, for the same element,
    Firefox and IE return the color style like ‘rgba(51,51,51,1)’
    Chrome returns the color style like ‘rgb(51, 51, 51)’
    I have to add some very ugly browser type check logic in my library or step definition. :-(

    Does anybody have an idea to handle this issue?


  2. I know this is long after you might already have an answer, but a Regular Expression like this might do the trick without having to know which browser:

    rgb1 = ‘rgba(51,51,51,1)’
    rgb2 = ‘rgb(51, 51, 51)’
    rgb1 =~ /rgba?\((\d+),\s*(\d+),\s*(\d+)\)/
    red = $1
    grn = $2
    blu = $3

    More Rubyish:
    color_match = rgb2.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)\)/)
    red = color_match[1]
    grn = color_match[2]
    blu = color_match[3]



Comments are closed.