如何在 C# 中使用 html2canvas JavaScript 和 Selenium webdriver

How to use html2canvas JavaScript with Selenium webdriver in C#

本文关键字：JavaScript html2canvas Selenium webdriver      更新时间：2023-09-26

使用Selenium webdriver，我会测试html2canvas JS脚本，以直接在浏览器上拍摄网页或部分网页的"屏幕截图"。我有一个编写的 C# 代码来测试它，但 obj 始终为空。

供参考的 C# 代码 

        IWebDriver Driver = new FirefoxDriver();
        Driver.Navigate().GoToUrl("http://www.monsite.com");
        string scriptJS = File.ReadAllText("html2canvas.js");
        scriptJS += @"
            html2canvas(document.body, {
                onrendered: function(canvas) {
                    var img = canvas.toDataURL("image/png");
                    return img;
                }
            });";
        IJavaScriptExecutor executorJS = Driver as IJavaScriptExecutor;
        var obj = executorJS.ExecuteScript(scriptJS);

有两种想法是错误的：

  1. return img是由onrendered函数重新生成的值。这意味着html2canvas()调用不会像代码中预期的那样返回图像。

  2. executorJS.ExecuteScript返回 IWebElement， Int64， Boolean， String， List<IWebElement|Int64|布尔值|字符串>或空。因此，您无法将此图像作为返回值获取，有关更多详细信息，请参阅文档。

如果您需要网站的屏幕截图，可以使用使用((ITakesScreenshot) driver).GetScreenshot();(doc(。

如果你在这个网站需要图像，你必须把它实现到onrendered函数中。

更新 (25.10.2013(

你可以打电话给executorJS.ExecuteAsyncScript。javascript 函数调用中的最后一个参数将是 webdriver 注入的回调函数。异步方法在注入方法后返回被调用，或者脚本超时完成。因此，最好将超时设置为更高的值(只是为了确保应用程序按预期运行，稍后您可以放置生产系统中使用的值(。

    Driver.Manage().Timeouts().SetScriptTimeout(TimeSpan.FromSeconds(5));
    scriptJS += @"
        var webDriverCallback = arguments[arguments.length - 1];
        html2canvas(document.body, {
            onrendered: function(canvas) {
                var img = canvas.toDataURL('image/png').replace('data:image/png;base64,', '');;
                webDriverCallback(img);
            }
        });";
    IJavaScriptExecutor executorJS = Driver as IJavaScriptExecutor;
    var obj = executorJS.ExecuteAsyncScript(scriptJS);

结果是 base64 编码的图像作为字符串。

相关文章：