Test the rendering of HTML and CSS

Question

I need to test if the following HTML code and the CSS of that page results into a red and line-through price like:

enter image description here

<div class="listOldPrice">
  <span>
    <span class="wasPriceEuroDestination">&euro;&nbsp;</span>
    719.
    <b>-</b>
  </span>
</div>

Can I do that with Selenium? How?

You can check the classes which are applied to element. AFAIK you cant check the visuals — xyz, Mar 20 '14 at 12:06
Would using the `getCssValue()` method help in this case perhaps? — Mark Rowlands, Mar 20 '14 at 12:46

score 1 · Accepted Answer · answered Mar 20 '14 at 14:59

This is the Ruby solution:

price = @driver.find_element(:class, 'wasPriceEuroDestination')
assert_equal(true, price.displayed?)
assert_equal("rgba(255, 0, 0, 1)", price.css_value('color'))
assert_equal("line-through", price.css_value('text-decoration'))

score 0 · Answer 2 · answered Mar 20 '14 at 12:28

0

That is usually handled by a class. Since classes aren't the prettiest to match on since they aren't very unique, it's difficult to give you a complete selector, but i'll put some placeholders in:

In Java, you could do something like:

assertTrue(driver.findElement(By.cssSelector("div#someParentOfThatPrice div.listOldPrice")).isDisplayed());

If this test fails, that means that it can't find the element, ergo, it's not crossed out.

answered Mar 20 '14 at 12:28

ddavison

25,442
12
70
96

I need a test which tests the visual display (red and line-through). It is a test to check if the CSS works correct. – wintermeyer Mar 20 '14 at 12:38

Test the rendering of HTML and CSS

2 Answers2