Question

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

还是有其他方法可以做到。

感谢

Answer 1

没有本地方法可以做到这一点，但是因为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 });

（虽然有更多的方法，但我只是为了让它更清晰而最为冗长）

Answer 2

感谢Arran我刚刚修改了你的答案..

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

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

Answer 3

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

Answer 4

在类文件

中写下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测试用例调用上述方法以突出显示网页元素。查看以下代码，了解它是如何完成的。使用searchBox作为参数调用elementHighlight方法。

@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();

    }

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

如何在selenium webdriver中突出显示元素

4 个答案: