org.openqa.selenium.JavascriptException: javascript：$是未定义的错误，使用ChromeDriver Selenium获取与ChromeDriver截图的坐标截图

Question

我在使用AShot时遇到了一个奇怪的问题。Ashot适用于整个screenShots，但选择性screenShot却是坏。它在获得元素的协调时在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]

欢迎您的任何帮助或其他选择，请帮助我。

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...}

...implies表示，ChromeDriver无法与浏览上下文(即Chrome浏览器会话)交互。

深潜

根据ReferenceError:未定义"x“中的文档，此错误意味着在DOM树中某个地方引用了一个不存在的变量。需要声明此变量，或者需要确保它在当前脚本或作用域中可用。

提示：在加载库(如jQuery)时，确保在访问库变量(如"$“)之前加载了它。将加载库的标记放在使用它的代码之前。

正如讨论中所述，JavaScript/jQuery -“$是未定义的-$function()”错误 @Ketan提到，当您没有将jQuery提供给您的脚本时就会发生此错误，也就是说，JavaScript / jQuery / 阿贾克斯可能还没有完成HTML DOM的呈现。

解决方案

在这些情况下，可采用3(3)种不同的办法来解决这一问题，具体如下：

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

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

• 您还可以在服务器上本地图书馆和引用它。
• 您可以将WebDriverWait与ExpectedConditions结合起来，以使元素的所需状态出现/可见/可插入。

您可以在Selenium: selenium如何识别可见或不可见的元素？它是否有可能是在DOM中加载，而不是在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
• https://chromedriver.storage.googleapis.com/78.0.3904.70/notes.txt的发行说明清楚地提到了以下几点：

支持Chrome 78

• 您正在使用chrome=79.0
• https://chromedriver.storage.googleapis.com/79.0.3945.36/notes.txt的发行说明清楚地提到了以下几点：

支持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和ChromeDriver 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);
        }