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

我正在使用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();
}

我改变了我的点击方式如下

// 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();
}

并将其与所有page方法一起在单独的类中使用

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);
    }

---

我做错了什么？

您应该使用

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);
}

---

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

您应该使用

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);
}

---

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

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

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
        );
    }
}

---

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

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
        );
    }
}

---

或者直接到border属性：

参数[0]。style.border=“solid 2px red”

或者直接到border属性：

参数[0]。style.border=“solid 2px red”

有解决问题的答案吗？有解决问题的答案吗？