javascript - 如何在 selenium webdriver 中使用 JavaScript 从脚本标签获取元素详细信息？

Question

My problem lies on this page

此页面上有一个 Canvas 元素，它是一个具有数字的图像，每当您刷新页面或在页面上执行任何需要重新加载的操作时，该图像都会发生变化。

在源代码中我看到的只是这样:

<div class="row">
      <div class="large-10 columns">
        <canvas id="canvas" width="599" height="200" style="border:1px dotted;"></canvas>
      </div>
    </div>

简而言之，我对外部 html 上的此信息无能为力，但是当我转到网络部分并看到响应代码时，我发现了此使用 javascript 的代码:

    <script>var canvas_el = document.getElementById('canvas');
var canvas = canvas_el.getContext('2d');
canvas.font = '60px Arial';
canvas.strokeText('Answer: 19403',90,112);
</script>

现在我的问题是如何在 selenium webdriver 中编写 javascript(我不太了解 javascript)来获取脚本标记下的详细信息(特别是中风文本)，否则源代码中不存在这些详细信息。我正在寻找使用 JavascriptExecutor 的解决方案。

Answer 1

您对于使用 JavascriptExecutor 的想法是正确的。我找到了基本策略here 。

final By SCRIPT = By.tagName("script");

List<WebElement> scripts = new WebDriverWait(driver, 5)
        .until(ExpectedConditions.presenceOfAllElementsLocatedBy(SCRIPT));

JavascriptExecutor js = (JavascriptExecutor) driver;
String query = "return document.getElementsByTagName(\"script\")[arguments[0]].innerHTML;";     
Pattern p = Pattern.compile("canvas.strokeText\\('Answer: \\d+'");
Pattern p2 = Pattern.compile("\\d+");

String number = IntStream.range(0, scripts.size())
        .mapToObj(i -> (String)js.executeScript(query, i))
        .map(string -> p.matcher(string))
        .filter(m -> m.find())
        .map(m -> p2.matcher(m.group()))
        .filter(m -> m.find())
        .map(m -> m.group())
        .findFirst()
        .orElse(null);
System.out.println(number);  // prints the number rendered on the page