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.
The following code can be used to create a test that locates an element and checks its attribute value:
@Test
public void testElementAttribute() {
WebElement message = driver.findElement(By.id("message"));
assertEquals("justify", message.getAttribute("align"));
}Let's create a test that reads the CSS width attribute and verifies the value, using the following code:
@Test
public void testElementStyle() {
WebElement message = driver.findElement(By.id("message"));
String width = message.getCssValue("width");
assertEquals("150px", width);
}By passing the name of the attribute to the getAttribute()
method, it returns the value of the attribute back to the test. In this example, we are checking that the align attribute of the <p> element is set to justify:
assertEquals("justify", message.getAttribute("align"));By passing the name of CSS attribute to the getCSSValue() method, it returns the value of the CSS attribute. In this example, we are checking that the width attribute of the <div> element is set to 150px:
String width = message.getCssValue("width");