如何突出显示硒网络驱动程序中的元素

本文关键字：元素 驱动程序 网络 何突出 显示 | 更新日期: 2023-09-27 18:31:07

我正在尝试使用 C# 突出显示（在边框周围）在 selenium webdriver 中找到的元素。我在网上搜索了我找到的都是 java 代码，但在 C# 中需要它。

或者有没有其他方法可以做到这一点。

谢谢

如何突出显示硒网络驱动程序中的元素

没有原生的方法可以做到这一点，但是因为Selenium允许你用来执行Javascript，所以你可以通过更多的工作来完成它：

因此，问题变成了"如何在 Javascript 中更改元素边框？

如果你使用jQuery，它会更容易一些，你可以找到元素，然后设置一些边框属性。 jQuery有一个简洁的小css属性，它允许你传入一个JSON值字典，它将为你设置它们，一个例子是这样的：

jQuery('div.tagged > a:first').css({ "border-width" : "2px", "border-style" : "solid", "border-color" : "red" });

这将找到一个元素，并将其边框设置为solid宽度2px，边框颜色为 red 。

但是，如果你已经有一个元素的IWebElement实例（可能），你可以从jQuery/Javascript中承担"查找"的责任，并使其再次更简单。

这将执行如下：

var jsDriver = (IJavaScriptExecutor)driver;
var element = // some element you find;
string highlightJavascript = @"$(arguments[0]).css({ ""border-width"" : ""2px"", ""border-style"" : ""solid"", ""border-color"" : ""red"" });";
jsDriver.ExecuteScript(highlightJavascript, new object[] { element });

如果你只需要基本的Javascript，那么你可以使用.cssText属性，它允许你给出一个完整的CSS样式字符串，而不是单独添加它们（尽管我不知道它是如何跨浏览器支持的）：

var jsDriver = (IJavaScriptExecutor)driver;
var element = // some element you find;
string highlightJavascript = @"arguments[0].style.cssText = ""border-width: 2px; border-style: solid; border-color: red"";";
jsDriver.ExecuteScript(highlightJavascript, new object[] { element });

（虽然方法更多，但我只是为了更清楚而选择了最冗长的方法）

C# 扩展方法：在 3 秒内突出显示和清除。

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Remote;
using System.Reactive.Linq;
public static class SeleniumUtil
{
   public static void Highlight(this  IWebElement context)
    {
        var rc = (RemoteWebElement)context;
        var driver = (IJavaScriptExecutor)rc.WrappedDriver;
        var script = @"arguments[0].style.cssText = ""border-width: 2px; border-style: solid; border-color: red""; ";
        driver.ExecuteScript(script, rc);
        Observable.Timer(new TimeSpan(0, 0, 3)).Subscribe(p =>
        {
            var clear = @"arguments[0].style.cssText = ""border-width: 0px; border-style: solid; border-color: red""; ";
            driver.ExecuteScript(clear, rc);
        });
    }
}

谢谢阿兰，我刚刚修改了你的答案。 

var jsDriver = (IJavaScriptExecutor)driver;
var element = //element to be found
string highlightJavascript = @"arguments[0].style.cssText = ""border-width: 2px; border-style: solid; border-color: red"";";
jsDriver.ExecuteScript(highlightJavascript, new object[] { element });

它完美地工作...再次感谢。

在你的

类文件中写下下面的JavaScript Executor代码 

public void elementHighlight(WebElement element) {
            for (int i = 0; i < 2; i++) {
                JavascriptExecutor js = (JavascriptExecutor) driver;
                js.executeScript(
                        "arguments[0].setAttribute('style', arguments[1]);",
                        element, "color: red; border: 5px solid red;");
                js.executeScript(`enter code here`
                        "arguments[0].setAttribute('style', arguments[1]);",
                        element, "");
            }

从Selenium测试用例调用上述方法来突出显示网页元素。查看下面的代码，其中显示了它是如何完成的。elementHighlight 方法以 searchBox 作为参数调用。

@Test
    public void GoogleSearch() throws Exception, SQLException {
        driver.findElement(By.xpath("//center/div[2]")).click();
        WebElement searchBox = driver.findElement(By.xpath("//div[3]/div/input"));
        elementHighlight(searchBox);
        driver.findElement(By.xpath("//div[3]/div/input")).clear();
        driver.findElement(By.xpath("//div[3]/div/input")).sendKeys("Test");
        driver.findElement(By.xpath("//button")).click();
    }

在执行上述测试时，硒测试将突出显示Google主页上的搜索框。您可以重用 elementHighlight 方法来突出显示网页上的任何元素。

相关文章：