Asserting the CSS Style for the Border of a Table Using Selenium with Eclipse (Java)


I'm testing a form and part of the test is leaving mandatory fields blank and checking that the field gets a red border indicating that the field is mandatory and should be filled before proceeding is possible. I've got the following code so far:

driver=new FirefoxDriver();

/** Test: Open page*/
driver.get ("URL with form");

/** the following confirms a text above the form stating what fields are mandatory and not filled */
driver.findElement("nextbutton")).click(); /** leave all fields blank and click on next below form */
assertEquals("The following fields are mandatory", driver.findElement(By.cssSelector("p")).getText());
assertEquals("Field 1 is mandatory", driver.findElement(By.xpath("//form[@id='genericform']/div[2]/ul/li")).getText());
assertEquals("Field 2 is mandatory", driver.findElement(By.xpath("//form[@id='genericform']/div[2]/ul/li[2]")).getText());
assertEquals("Field 3 is mandatory", driver.findElement(By.xpath("//form[@id='genericform']/div[2]/ul/li[3]")).getText());

assertTrue(isElementPresent("Field1.Value"))); /** confirms the first mandatory field is present */

Now I want to confirm/assert that the mandatory field has a red border and an icon where the none-mandatory fields do not have a red border or icon.

border-color: #E04228; background: #FFF url("../img/icon-field-error.png") no-repeat scroll right center / 28px 22px;

I'm using Eclipse with Selenium webdriver

Use getCssValue() method to get border-bottom-color, border-top-color, border-left-color and border-right-color CSS properties:

assertEquals("rgba(224, 66, 40)", element.getCssValue("border-bottom-color"));

Note that border-color is computed and cannot be retrieved this way.

You may also convert the rgba value to HEX format to make it more readable and convenient.

Alternatively, you may just check if the input element has error and input-validation-error classes:

assertEquals("block error input-validation-error", element.getAttribute("class"));