Checking an element's attribute and CSS values

Developers configure various attributes of elements displayed on the web page during design or at runtime to control the behavior or style of elements when they are displayed in the browser. For example, the <input> element can be set to read-only by setting the readonly attribute.

We can retrieve and check an element's attribute using the getAttribute() method of the WebElement interface.

Various styles are applied on elements displayed in a web application so that they look neat and become more usable. Developers add these styles using Cascading Style Sheets (CSS). This can be done using the WebElement class's getCSSValue() method, which returns the value of a specified style attribute.

In this recipe, we will use the getCSSValue() function to check the style attribute defined for an element.

In this recipe, we will check the attribute value of an element by using the getAttribute() method.

@Test
public void testElementAttribute() {
  WebElement message = driver.findElement(By.id("message"));
  assertEquals("justify", message.getAttribute("align"));
}

@Test
public void testElementStyle() {
  WebElement message = driver.findElement(By.id("message"));
  String width = message.getCssValue("width");
  assertEquals("150px", width);
}

assertEquals("justify", message.getAttribute("align"));

String width = message.getCssValue("width");