Topic 34: Reading Font Properties using .getCssValue()

Chào các bạn đã đến với chủ đề tiếp theo của mình. Hôm nay, mình sẽ tiếp tục hướng dẫn các bạn cách get font properties của element trên website trong Selenium Webdriver. Ví dụ như font size, font family, font color …

Trong Selenium webdriver, để get được các giá trị này, chúng ta sẽ sử dụng hàm .getCssValue(). Thông thường thì chúng ta sẽ không test phần này, mà chỉ focus vào test chức năng để tìm bug là chính. Tuy nhiên, cũng có trường hợp chúng ta sẽ verify nó, tùy theo scope test như thế nào nữa.

Với hàm trên, các bạn có thể truyền các property name như font-family, font-size, font-weight … để get các giá trị mong muốn.

Ví dụ:

package org.example.Topic34;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

import java.awt.*;
import java.time.Duration;

public class GetCSSValue {
    WebDriver driver;

    @BeforeClass
    public void beforeClass() {
        driver = new ChromeDriver();
        driver.get("https://the-internet.herokuapp.com/");
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
        driver.manage().window().maximize();
    }

    @Test
    public void readFontProperty(){
        //Locate text string element to read It's font properties.
        WebElement text = driver.findElement(By.xpath("//h2[text()='Available Examples']"));

        //Read font-size property and print It In console.
        String fontSize = text.getCssValue("font-size");
        System.out.println("Font Size -> " + fontSize);

        //Read color property and print It In console.
        String fontColor = text.getCssValue("color");
        System.out.println("Font Color RGBA -> " + fontColor);
        fontColor = convertRGBAToHex(fontColor);
        System.out.println("Font Color Hex -> " + fontColor);

        //Read font-family property and print It In console.
        String fontFamily = text.getCssValue("font-family");
        System.out.println("Font Family -> " + fontFamily);


        //Read font-weight property and print It In console.
        String fontWeight= text.getCssValue("font-weight");
        System.out.println("Font Weight -> " + fontWeight);

        //Read font-style property and print It In console.
        String fontStyle= text.getCssValue("font-style");
        System.out.println("Font Style -> " + fontStyle);
    }

    public static String convertRGBAToHex(String color) {
        String[] hexValue = color.split("[, rgba()]+");

        int hexValue1 = Integer.valueOf(hexValue[1]);
        int hexValue2 = Integer.valueOf(hexValue[2]);
        int hexValue3 = Integer.valueOf(hexValue[3]);

        String result = String.format("#%02x%02x%02x", hexValue1, hexValue2, hexValue3);
        return result;
    }

    @AfterClass
    public void afterClass() {
        driver.quit();
    }
}

Kết quả:

Font Size -> 37px
Font Color RGBA -> rgba(34, 34, 34, 1)
Font Color Hex -> #222222
Font Family -> "Helvetica Neue", Helvetica, Helvetica, Arial, sans-serif
Font Weight -> 700
Font Style -> normal

Các bạn hãy xem lại ví dụ trên và làm lại để hiểu bài hơn nhé. Cảm ơn các bạn đã theo dõi bài viết của mình. Hẹn gặp lại các bạn ở những chủ đề tiếp theo.