java - org.openqa.selenium.JavascriptException : javascript error: $ is not defined error taking coordinate screenshot with Ashot using ChromeDriver Selenium

Question

我在使用 AShot 时遇到了一个奇怪的问题。Ashot 对于整个屏幕截图效果很好，但在选择性屏幕截图时则不好。在获取元素坐标时，它会在 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 浏览器 session )交互。

<小时/>

深入研究

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

Hint: When loading a library (such as jQuery), make sure it is loaded before you access library variables, such as "$". Put the tag that loads the library before your code that uses it.

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

<小时/>

解决方案

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

• jQuery 库是一个 JavaScript 文件，您可以使用 HTML <script> 引用它。 <head> 内的标签部分如下:

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

  这会从源代码中获取 jQuery 代码。

Note: You do not have to include type="text/javascript" inside the <script> tag as this is not required in HTML5. JavaScript is the default scripting language in HTML5 and in all modern browsers.

• 您还可以download the jQuery library并在服务器本地引用它。
• 您可以诱导WebDriverWait与 ExpectedConditions 结合使用元素的所需状态要么是存在/可见/可交互。

You can find a detailed discussion in Selenium: How selenium identifies elements visible or not? Is is possible that it is loaded in DOM but not rendered on UI?

<小时/>

这个用例

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

Coords elementCoords = ofElement(driver, 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 的发行说明明确提到以下内容:

Supports Chrome version 78

• 您正在使用chrome=79.0
• ChromeDriver v79.0 的发行说明明确提到以下内容:

Supports Chrome version 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 升级至当前级别 Version 3.141.59 .
• ChromeDriver 已更新为当前 ChromeDriver v80.0级别。
• Chrome 已更新至当前 Chrome 版本 80.0 级别。 (根据 ChromeDriver v80.0 release notes )