Selenium-WebDriver 如何使用 javascript 和 firefox 浏览器突出显示元素答案

【问题标题】：Selenium-WebDriver how to highlight element using javascript and firefox browserSelenium-WebDriver 如何使用 javascript 和 firefox 浏览器突出显示元素
【发布时间】：2023-03-19 12:41:03
【问题描述】：

我在创建将突出显示网页上某些已定义元素的有效函数时遇到问题。请注意，我是编码初学者，问题可能是简单的环境设置问题，或者缺乏 javascript/selenium 功能的主要知识。

我在 Eclipse Neon 中创建我的脚本。为了设置环境，我安装了 node.js 和 geckodriver，以便能够在 firefox 浏览器上运行。我的脚本的开头是：

var webdriver = require('selenium-webdriver'),
    By = webdriver.By

var driver = new webdriver.Builder().forBrowser('firefox').build();

我使用driver.get(); 打开网页，然后使用 xPath ex. 简单地定义元素位置：

var element = driver.findElement(By.xpath("xPath goes here"));

现在问题开始了，我应该怎么做才能让 WebDriver 用 for ex 突出显示这个指定的元素。红色边框？在浏览 Stack 和其他类似页面时，我发现的唯一答案是在 Java 语法中使用 JavaScript Executor，或者使用一些 webdriver 函数

element.style.backgroundColor = 'red'

但我得到控制台错误，style 或语法的其他部分不是函数。在这一点上，我没有解决方案如何做到这一点，我慢慢怀疑，我是否能够在不了解 html5/java 的情况下完成这项任务。也许有人遇到过这样的困难并会分享线索？

https://jsfiddle.net/osav574j/

干杯！佩克勒

【问题讨论】：

标签： javascript node.js firefox selenium-webdriver highlight

【解决方案1】：

您应该尝试使用executeScript()，如下所示：-

var element = driver.findElement(By.xpath("xPath goes here"));
driver.executeScrip‌t("arguments[0].style.backgroundColor = 'red'", element);

【讨论】：

完美运行！ driver.executeScript();是我一直在寻找的东西。谢谢你 Saurabh！

【解决方案2】：

这是突出显示元素的 Javascript 代码。 Selenium 没有任何本地方法来突出显示，因此唯一的出路是使用类似于此的代码：

JavascriptExecutor js=(JavascriptExecutor)driver;
js.executeScript("arguments[0].setAttribute('style','border: solid 2px red')", username);

这里的 username 是 web 元素的名称。

【讨论】：

当我尝试实施此类解决方案（或任何类似解决方案）时，我收到与“js”相关的错误“SyntaxError: Unexpected identifier”。也许我缺少一些库，或者在使用 JavascriptExecutor 之前我错过了在我的脚本中调用一些重要的东西？
JavascriptExecutor 属于这个包 - org.openqa.selenium 你使用 selenium 的语言是什么？
我正在用 JavaScript 编写，并使用 Eclipse Neon（为 JavaScript 构建）。我发现，Java 需要调用 org.openqa.selenium，但在 JavaScript 中，我所要做的就是使用 var webdriver = require('selenium-webdriver') 打开我的应用程序代码，然后像 Saurbh Gaur 所建议的那样，使用 driver.executeScrip‌t(); 简单地调用 JavascriptExecutor .

【解决方案3】：

这是闪烁元素的解决方案，以闪烁 google 搜索输入字段的示例为例。您可以参数化闪烁的样式，以及时间间隔/频率。

const browsertype = 'chrome';
//const browsertype = 'firefox';
const { Builder, By, Key, until} = require('selenium-webdriver');
require( browsertype + 'driver' );
//require('selenium-webdriver/' + browsertype);
const link = 'https://www.google.hu/';
const btx = '//input[@name="q"]';

var browser = new Builder().forBrowser( browsertype ).build();

browser.navigate().to( link );
//browser.get( link );

var element = browser.findElement( By.xpath( btx ) );

blink( browser, element );

async function blink( browser, element ) {
  var i, 
  blink = { wait: 500,
            duration: 3000,
            //on: "arguments[0].style.backgroundColor = 'purple'",
            //off: "arguments[0].style.backgroundColor = 'white'",
            on: "arguments[0].setAttribute('style','border: solid 2px yellow;')",
            off: "arguments[0].setAttribute('style','border: solid 0px white;')"
          }
  blink.loop = Math.floor( blink.duration / blink.wait );
  blink.loop += blink.loop % 2;
  for(i=0;i<blink.loop;i++){

    await browser
    .executeScript( blink[ i%2==0 ? "on" : "off"], 
                    element );

    await browser.sleep( blink.wait );

  }

}

//driver.quit();

【讨论】：