如何在 C# 中将 html2canvas JavaScript 与 Selenium webdriver 一起使用

Question

使用 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);

Answer 1

有两个想法是错误的：

1. return img 是由onrendered 函数返回的值。这意味着 html2canvas() 调用不会像您在代码中所期望的那样返回图像。

2. executorJS.ExecuteScript 返回 IWebElement、Int64、Boolean、String、List 或 null。所以你不能把这张图片作为返回值，更多详情请看doc。

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

如果您需要本站的图片，您必须将其实现到onrendered函数中。

---

更新（2013 年 10 月 25 日）

您可以拨打executorJS.ExecuteAsyncScript。 javascript函数调用中的最后一个参数将是webdriver注入的回调函数。注入方法后异步方法返回 被调用，或者 scriptTimeout 完成。出于这个原因，将 timeout 设置为更高的值是个好主意（只是为了确保应用程序按预期运行，稍后您可以设置用于生产系统的值）。

    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编码的图像作为字符串。