c# - 如何在 C# 中将 html2canvas JavaScript 与 Selenium Webdriver 结合使用

Question

使用 selenium webdriver，我会测试 html2canvas JS 脚本直接在浏览器上截取网页或部分网页的“屏幕截图”。我写了一段 C# 代码来测试它，但 obj 始终为 null。

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 注入(inject)的回调函数。异步方法在注入(inject)方法后返回被调用，或者 scriptTimeout 完成。因此，最好将超时设置为更高的值(只是为了确保应用程序按预期运行，稍后您可以设置在生产系统中使用的值)。

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