Interview #127: Selenium: Automate a scenario to verify color, font, and position of an element

To automate a scenario where you need to verify the color, font, and position of an element on a webpage using Selenium with Java, you need to access the CSS properties and location of the WebElement. Selenium WebDriver provides methods to extract CSS values, location, and size of elements, which are useful for validating UI-related attributes.

Disclaimer: For QA-Testing Jobs, WhatsApp us @ 91-9606623245

Here's how you can approach it step-by-step:

1. Locate the WebElement

First, identify the element using any appropriate locator strategy (e.g., By.id, By.xpath, By.cssSelector, etc.).

WebElement element = driver.findElement(By.id("exampleElement"));        

2. Verify the Color

To check the color (e.g., font color, background color), you can use the getCssValue() method:

String fontColor = element.getCssValue("color");
String backgroundColor = element.getCssValue("background-color");
System.out.println("Font Color: " + fontColor);
System.out.println("Background Color: " + backgroundColor);        

These values are typically returned in RGBA format. If you need to compare them, ensure the expected values are also in the same format or convert them accordingly.

Example Assertion:

Assert.assertEquals(fontColor, "rgba(0, 0, 0, 1)");  // Black        

3. Verify the Font

To validate the font properties like font-family, font-size, font-weight, etc., again use getCssValue():

String fontFamily = element.getCssValue("font-family");
String fontSize = element.getCssValue("font-size");
String fontWeight = element.getCssValue("font-weight");

System.out.println("Font Family: " + fontFamily);
System.out.println("Font Size: " + fontSize);
System.out.println("Font Weight: " + fontWeight);

// Assertions
Assert.assertTrue(fontFamily.contains("Arial"));
Assert.assertEquals(fontSize, "16px");
Assert.assertEquals(fontWeight, "400");  // Normal weight        

4. Verify the Position

You can retrieve the position of an element using the getLocation() and getSize() methods:

Point location = element.getLocation();
Dimension size = element.getSize();

System.out.println("X Position: " + location.getX());
System.out.println("Y Position: " + location.getY());
System.out.println("Width: " + size.getWidth());
System.out.println("Height: " + size.getHeight());

// Example assertions
Assert.assertTrue(location.getX() > 0);
Assert.assertEquals(size.getWidth(), 200);        

If you want to verify that an element is within a specific area or aligned with other elements, you can get the location of multiple elements and compare their positions.

5. Optional: Use JavaScriptExecutor for Advanced Style Checks

In some cases, CSS styles applied dynamically via JavaScript might not be directly accessible through getCssValue(). In such cases, use JavaScriptExecutor to retrieve computed styles:

JavascriptExecutor js = (JavascriptExecutor) driver;
String color = (String) js.executeScript("return window.getComputedStyle(arguments[0]).color;", element);
System.out.println("Computed color: " + color);        

6. Putting It All Together in a Test Method

@Test
public void testElementStyleAndPosition() {
    WebElement element = driver.findElement(By.id("exampleElement"));

    // Color check
    String color = element.getCssValue("color");
    Assert.assertEquals(color, "rgba(0, 0, 0, 1)");

    // Font check
    String fontFamily = element.getCssValue("font-family");
    String fontSize = element.getCssValue("font-size");
    Assert.assertTrue(fontFamily.contains("Arial"));
    Assert.assertEquals(fontSize, "16px");

    // Position check
    Point location = element.getLocation();
    Dimension size = element.getSize();
    Assert.assertTrue(location.getX() > 0);
    Assert.assertEquals(size.getWidth(), 200);
}        

Conclusion

By using Selenium’s ability to fetch CSS values and element coordinates, you can effectively validate the visual properties of elements as part of your automated UI tests. While Selenium is primarily used for functional testing, combining it with visual validation techniques helps in catching critical UI regressions. For more advanced and pixel-perfect UI testing, tools like Applitools Eyes or Percy can complement Selenium.