java - org.openqa.selenium.JavascriptException: javascript error: $ is not defined 使用 ChromeDriver Selenium 与 A​​shot 进行坐标截图时出错

Question

我在使用AShot. Ashot对于整个 screenShots 工作正常，但在选择性 screenShot 时它是BAD。在获取元素坐标时，它会在CoordsProvider类中引发错误。我是否使用了错误的构建或产品？

public abstract class CoordsProvider implements Serializable {

public abstract Coords ofElement(WebDriver driver, WebElement element);

public Set<Coords> ofElements(WebDriver driver, Iterable<WebElement> elements) {
    Set<Coords> elementsCoords = new HashSet<>();
    for (WebElement element : elements) {
        ***Coords elementCoords = ofElement(driver, element);  //fails here***
        if (!elementCoords.isEmpty()) {
            elementsCoords.add(elementCoords);
        }
    }
    return Collections.unmodifiableSet(elementsCoords);
}

@SuppressWarnings("UnusedDeclaration")
public Set<Coords> ofElements(WebDriver driver, WebElement... elements) {
    return ofElements(driver, Arrays.asList(elements));
}

@SuppressWarnings("UnusedDeclaration")
public Set<Coords> locatedBy(WebDriver driver, By locator) {
    return ofElements(driver, driver.findElements(locator));
}
}

堆栈跟踪

org.openqa.selenium.JavascriptException: javascript error: $ is not defined
  (Session info: chrome=79.0.3945.130)
Build info: version: '3.14.0', revision: 'aacccce0', time: '2018-08-02T20:19:58.91Z'
System info: host: 'OPTIMIZEQ-LTP03', ip: '192.168.99.1', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '11.0.2'
Driver info: org.openqa.selenium.remote.RemoteWebDriver
Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 79.0.3945.130, chrome: {chromedriverVersion: 78.0.3904.105 (60e2d8774a81..., userDataDir: C:\Users\SHAILE~1.SIN\AppDa...}, goog:chromeOptions: {debuggerAddress: localhost:61006}, javascriptEnabled: true, networkConnectionEnabled: false, pageLoadStrategy: normal, platform: XP, platformName: XP, proxy: Proxy(manual, http=localhos..., setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, webdriver.remote.sessionid: f5a47b27537f019dacb73462732...}
Session ID: f5a47b27537f019dacb734627324a790
    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method) ~[na:na]
    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62) ~[na:na]
    at java.base/jdk.internal.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45) ~[na:na]
    at java.base/java.lang.reflect.Constructor.newInstance(Constructor.java:490) ~[na:na]
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.createException(W3CHttpResponseCodec.java:187) ~[selenium-remote-driver-3.14.0.jar:na]
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:122) ~[selenium-remote-driver-3.14.0.jar:na]
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:49) ~[selenium-remote-driver-3.14.0.jar:na]
    at org.openqa.selenium.remote.HttpCommandExecutor.execute(HttpCommandExecutor.java:158) ~[selenium-remote-driver-3.14.0.jar:na]
    at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:548) ~[selenium-remote-driver-3.14.0.jar:na]
    at org.openqa.selenium.remote.RemoteWebDriver.executeScript(RemoteWebDriver.java:485) ~[selenium-remote-driver-3.14.0.jar:na]
    at ru.yandex.qatools.ashot.util.JsCoords.findCoordsWithJquery(JsCoords.java:30) ~[ashot-1.5.2.jar:na]
    at ru.yandex.qatools.ashot.coordinates.JqueryCoordsProvider.ofElement(JqueryCoordsProvider.java:13) ~[ashot-1.5.2.jar:na]
    at ru.yandex.qatools.ashot.coordinates.CoordsProvider.ofElements(CoordsProvider.java:21) ~[ashot-1.5.2.jar:na]
    at ru.yandex.qatools.ashot.AShot.takeScreenshot(AShot.java:115) ~[ashot-1.5.2.jar:na]
    at ru.yandex.qatools.ashot.AShot.takeScreenshot(AShot.java:132) ~[ashot-1.5.2.jar:na]
    at com.optq.main.util.SeleniumDriverUtility.captureAShotElement(SeleniumDriverUtility.java:563) ~[classes/:na]

欢迎任何关于 Ashot 的帮助或替代方案，请帮助我解决这个问题。

Answer 1

此错误消息...

org.openqa.selenium.JavascriptException: javascript error: $ is not defined
  (Session info: chrome=79.0.3945.130)
Build info: version: '3.14.0', revision: 'aacccce0', time: '2018-08-02T20:19:58.91Z'
System info: host: 'OPTIMIZEQ-LTP03', ip: '192.168.99.1', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '11.0.2'
Driver info: org.openqa.selenium.remote.RemoteWebDriver
Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 79.0.3945.130, chrome: {chromedriverVersion: 78.0.3904.105 (60e2d8774a81..., userDataDir: C:\Users\SHAILE~1.SIN\AppDa...}, goog:chromeOptions: {debuggerAddress: localhost:61006}, javascriptEnabled: true, networkConnectionEnabled: false, pageLoadStrategy: normal, platform: XP, platformName: XP, proxy: Proxy(manual, http=localhos..., setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, webdriver.remote.sessionid: f5a47b27537f019dacb73462732...}

...意味着ChromeDriver无法与浏览上下文交互，即Chrome 浏览器会话。

---

深潜

根据ReferenceError: "x" is not defined中的文档，此错误意味着在DOM Tree中某处引用了一个不存在的变量。需要声明此变量，或者您需要确保它在当前脚本或范围内可用。

提示：加载库（如 jQuery）时，请确保在访问库变量（如“$”）之前加载它。将加载库的标签放在使用它的代码之前。

根据讨论JavaScript/jQuery - “$ is not defined-$function()” 错误@Ketan 提到当您没有使 jQuery 可用于您的脚本时会发生此错误，即可能JavaScript / jQuery / AJAX尚未完成渲染HTML DOM。

---

解决方案

在这些情况下，有 3（三种）不同的方法可用于解决问题，如下所示：

• jQuery库是一个单独的JavaScript 文件，您可以<script>在该部分中使用 HTML 标记来引用它，<head>如下所示：

  <head>
      <script src="jquery-3.4.1.min.js"></script>
  </head> 
  

  这出去并从源代码获取jQuery代码。

注意：您不必包含type="text/javascript"在<script>标签内，因为这在 HTML5 中不是必需的。JavaScript 是 HTML5 和所有现代浏览器中的默认脚本语言。

• 您还可以下载jQuery库并在服务器上本地引用它。
• 您可以将WebDriverWait与ExpectedConditions结合使用，以使元素的期望状态为存在/可见/可交互。

您可以在 Selenium 中找到详细讨论：硒如何识别可见或不可见的元素？是否有可能在 DOM 中加载但未在 UI 上呈现？

---

这个用例

正如您所提到的，以下行失败：

Coords elementCoords = ofElement(driver, element);

此方法将参数之一（最后一个）作为element，但在定义时您似乎将其视为元素列表，如下所示：

@SuppressWarnings("UnusedDeclaration")
public Set<Coords> ofElements(WebDriver driver, WebElement... elements) {
    return ofElements(driver, Arrays.asList(elements));
}   

这里的参数类型似乎有些不匹配。

---

其他注意事项

您还需要注意以下几点：

• 您正在使用chromedriver=78.0.3904.105
• chromedriver=78.0的发行说明清楚地提到了以下内容：

支持Chrome 版本 78

• 您正在使用chrome=79.0
• ChromeDriver v79.0的发行说明清楚地提到了以下内容：

支持Chrome 版本 79

• 您的Selenium 客户端版本是2018-08-02T20 : 19:58.91Z的 3.14.0 ，大约早1.5年。
• 您的JDK 版本是11.0.2。

因此JDK v8u111、Selenium Client v3.3.1、ChromeDriver v2.41和Chrome 浏览器 v79.0之间存在明显的不匹配

---

解决方案

确保这件事：

• JDK升级到当前级别JDK 8u241。
• Selenium升级到当前级别版本 3.141.59。
• ChromeDriver已更新到当前的ChromeDriver v80.0级别。
• Chrome已更新到当前的Chrome 版本 80.0级别。（根据ChromeDriver v80.0 发行说明）

Answer 2

我在这里找到了一个解决方案，https://medium.com/virtualmind-io/jquery-injection-for-selenium-automation-tests-f6121ea57993。基本上它将 jquery 注入到页面中。所以我按照这些步骤创建了我在调用 AShot 方法之前使用的这个方法，并且可以解决这个问题，将代码留在这里：

        JavascriptExecutor js = (JavascriptExecutor) driver;
        if(!(Boolean) js.executeScript("return (typeof jQuery != \"undefined\")")) {
            js.executeScript(
                    "var headID = document.getElementsByTagName('head')[0];" +
                            "var newScript = document.createElement('script');" +
                            "newScript.type = 'text/javascript';" +
                            "newScript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';" +
                            "headID.appendChild(newScript);");
            WebDriverWait waitJQ = new WebDriverWait(driver, 30);
            Function<WebDriver, Boolean> jQueryAvailable = WebDriver -> (
                    (Boolean) js.executeScript("return (typeof jQuery != \"undefined\")")
            );
            waitJQ.until(jQueryAvailable);
        }