如何在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，字符串，List <IWebElement | Int64 | Boolean | String>或null。 因此，您無法獲得此圖像作為返回值，有關更多詳細信息，請參閱doc 。

如果您需要網站的屏幕截圖，則可以使用use ((ITakesScreenshot) driver).GetScreenshot(); （ doc ）。

如果在此站點中需要圖像，則必須將其實現為onrendered函數。

---

更新（25.10.2013）

您可以調用executorJS.ExecuteAsyncScript 。 javascript函數調用中的最后一個參數將是由webdriver注入的回調函數。 調用注入方法或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編碼的圖像作為String。