如何在页面对象模式下突出显示 Selenium-Java 中的元素？

Question

我正在使用 POM 在 Java 中执行 Selenium 自动化。我需要突出显示以下网页上的元素。但它根本没有任何效果，虽然我没有收到任何错误消息，但它根本没有突出显示我选择的元素。

当我使用 POM 模式时，我有一个单独的类，包括所有元素功能方法，例如单击、写入文本等。

package pageObjects;

import org.openqa.selenium.Alert;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;

public class BasePage {
    public WebDriver driver;
    public WebDriverWait wait;

    // Constructor
    public BasePage (WebDriver driver) {
        this.driver = driver;
        wait = new WebDriverWait(driver, 15);
    }

    // Click Method
    public void click (By elementBy) {
        waitVisibility(elementBy);
        driver.findElement(elementBy).click();
    }  

我有如下高亮元素方法。

// Element highlighter method
public static void highLightElement(WebDriver driver, By elementBy) {
    JavascriptExecutor js = (JavascriptExecutor)driver; 
    js.executeScript("arguments[0].setAttribute('style', 'background: yellow; border: 2px solid red;');", elementBy);

    try {
        Thread.sleep(1000);
    } catch (InterruptedException e) {
        System.out.println(e.getMessage());
    } 

    js.executeScript("arguments[0].setAttribute('style','border: solid 2px white');", elementBy);  
}

我已经改变了我的点击方法如下。

public void click_2 (By elementBy) {
    waitVisibility(elementBy);
    highLightElement(driver,elementBy);
    driver.findElement(elementBy).click();
}

并在包含所有页面方法的单独类中使用它。

package pageObjects;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.Select;

public class HomePage extends BasePage {

    // Constructor
    public HomePage (WebDriver driver) {
        super(driver);
    }

    // Page Variables 
    String baseURL = "https://www.bookdepository.com/";

    // Web Elements 

    // --- Sign In UI ---
    By signInJoin_button = By.xpath("//div[@class='page-slide']//ul[@class='right-nav mobile-nav-content']//li[3]//a[1]");
    By signOut_button = By.xpath("/html/body/div[4]/div[1]/div/ul[2]/li[5]/a");

    // Page Methods ---
    public HomePage goToBookDepositoryHomePage (){
        driver.get(baseURL);
        pause();
        return this;
    }

    public LoginPage goToLoginPage (){
        click_2(signInJoin_button);
        pause();
        return new LoginPage(driver);
    }

我在这里做错了什么？

Answer 1

您应该使用WebElement 而不是By 来更改样式。试试下面的代码：

public static void highLightElement(WebDriver driver, By elementBy) {
    WebElement webElement = driver.findElement(elementBy);
    String originalStyle = webElement.getAttribute("style");

    JavascriptExecutor js = (JavascriptExecutor) driver; 
    js.executeScript("arguments[0].setAttribute(arguments[1], arguments[2]", webElement, "style", originalStyle + "border: 2px solid red;");

    //Do something e.g. make a screenshot

    //Reset style
    js.executeScript("arguments[0].setAttribute(arguments[1], arguments[2])", webElement, "style", originalStyle);
}

我认为保留原始样式并添加边框是有意义的。在对突出显示的元素执行某些操作后，例如创建屏幕截图，您应该重置样式。当您返回原始样式时，您可以在单独的方法中删除重置部分。

Answer 2

试试下面的代码。这将突出显示测试页面的所有 Web 元素。 我正在使用 EventFiringWebDriver 来突出显示以下代码中的 web 元素。

import java.util.concurrent.TimeUnit;
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.openqa.selenium.support.events.AbstractWebDriverEventListener;
import org.openqa.selenium.support.events.EventFiringWebDriver;

public class HighLighterEventListener extends AbstractWebDriverEventListener {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "./libs/chromedriver 4");
        WebDriver webdriver=new ChromeDriver();

        EventFiringWebDriver driver = new EventFiringWebDriver(webdriver);
        webdriver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        driver.get("https://yosuva.com");
        driver.register(new HighLighterEventListener());

        driver.findElement(By.xpath("//span[text()='Home']"));
        driver.findElement(By.xpath("//span[text()='About']"));
        driver.findElement(By.xpath("//span[text()='Tools']"));
        driver.findElement(By.xpath("//span[text()='News']"));
        driver.findElement(By.xpath("//span[text()='Events']"));
        driver.findElement(By.xpath("//span[text()='Contact']"));

        driver.quit();
    }

    @Override
    public void afterFindBy(By by, WebElement element, WebDriver driver) {
        ((JavascriptExecutor)driver).executeScript(
            "arguments[0].style.border='3px solid green'",element
        );
    }
}