Topic 32: Highlight element using Javascript executor

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 giới thiệu đến các bạn cách highlight element bằng cách sử dụng Javascript executor. Nếu bạn nào chưa biết cách sử dụng Javascript Executor trong Selenium, thì các bạn có thể click vào đây để xem lại nhé.

Thông thường, khi làm việc trong project, chúng ta thường không triển khai đoạn code này. Bởi vì khi chúng ta code, mục tiêu là để test case chạy passed và stable, chứ không phải là làm cho nó đẹp. Nhưng vì 1 lý do nào đó, ví dụ như vào 1 ngày đẹp trời, sếp bảo cần demo cho khách hàng xem, và cũng muốn xem rằng đoạn code chúng ta viết đang thực thi đến control nào trên màn hình. Thì đây là lúc mình sẽ cần đến nó.

Thôi không nói dài dòng nữa, mình bắt đầu code luôn nhé.

package org.example.Topic32;

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

public class HighlightElement {
    WebDriver driver;
    @BeforeClass
    public void beforeClass() {
        driver = new ChromeDriver();
        driver.get("http://the-internet.herokuapp.com/login");
        driver.manage().window().maximize();
    }

    @Test
    public void TC_01_Register() throws InterruptedException {
        // Input to username & password
        WebElement element_Username = driver.findElement(By.id("username"));
        highlightMyElement(element_Username);
        element_Username.sendKeys("tomsmith");


        WebElement element_Password = driver.findElement(By.id("password"));
        highlightMyElement(element_Password);
        element_Password.sendKeys("SuperSecretPassword!");

        // Click login button
        WebElement element_Login = driver.findElement(By.xpath("//button[@type='submit']"));
        highlightMyElement(element_Login);
        element_Login.click();

        // Get welcome message
        WebElement element_WelcomeMsg = driver.findElement(By.xpath("//h4"));
        highlightMyElement(element_WelcomeMsg);
        String welcomeMessage = element_WelcomeMsg.getText();
        Assert.assertEquals(welcomeMessage, "Welcome to the Secure Area. When you are done click logout below.");
    }

    public void highlightMyElement(WebElement element) throws InterruptedException {
        JavascriptExecutor js = (JavascriptExecutor) driver;

        // Get original style
        String orgStyle = element.getAttribute("style");

        // Set new style: border = red
        js.executeScript("arguments[0].setAttribute('style', arguments[1]);", element, "border: 2px solid red;");
        Thread.sleep(2000);

        // Back to original style
        js.executeScript("arguments[0].setAttribute('style', arguments[1]);", element, orgStyle);
        Thread.sleep(2000);
    }

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

Giải thích:

• Đầu tiên, khi bạn open url: http://the-internet.herokuapp.com/login, bạn sẽ thấy page login mở ra bình thường như hình sau:

• Nhưng khi thực thi đoạn code trên, nó sẽ bắt đầu highlight element trước khi thực hiện action. Lúc này, các bạn sẽ thấy khi code thực thi tới control nào, thì border của control đó sẽ chuyển sang màu đỏ như hình sau:

Các bạn hãy copy đoạn code trên và chạy thử để xem kết quả nhé. Chúc các bạn thành công.