使用 C# Selenium WebDriver html2canvas 捕获全屏屏幕截图 returns null

Question

我在 Chrome 中从 html2canvas JS 库获取由 selenium 自动化的输出时遇到问题。响应始终为空，但我可以在 Chrome 控制台中看到代码执行成功并且屏幕截图已被编码

public byte[] TakeScreenshot(string fileName)
    {
        this.logger.Debug($"Taking screenshot");
        var seleniumDownloadPath = this.seleniumEngine.GetDownloadPath();
        IJavaScriptExecutor js = Driver as IJavaScriptExecutor;
        var html2canvasJs = System.IO.File.ReadAllText(Path.Combine(Path.GetDirectoryName(new Uri(Assembly.GetExecutingAssembly().CodeBase).LocalPath), this.seleniumEngine.GetHtml2CanvasPath()));
        var wait = new WebDriverWait(Driver, TimeSpan.FromSeconds(60));
        var response = new object { };

        js.ExecuteScript(html2canvasJs);

        string generateScreenshotJS =
             var canvasImgContentDecoded;
             @"function genScreenshot () {
             html2canvas(document.body).then(function(canvas) {
             window.canvasImgContentDecoded = canvas.toDataURL(""image/png"");
             console.log(window.canvasImgContentDecoded);
             return window.canvasImgContentDecoded;
             });
             }
             genScreenshot();";

        response = js.ExecuteScript(generateScreenshotJS);
}

我也尝试了这个 Here 的解决方案，但是行为不稳定（例如，当运行实时我得到空值错误，但是如果运行使用断点，我有时会得到结果)

Answer 1

发现执行脚本需要更多时间并且变量为空后，终于找到了解决方案。因此添加了等待函数以在其填充后检索 - window.canvasImgContentDecoded

public byte[] TakeScreenshot(string fileName)
    {
        this.logger.Debug($"Taking screenshot");
        var seleniumDownloadPath = this.seleniumEngine.GetDownloadPath();
        IJavaScriptExecutor js = Driver as IJavaScriptExecutor;
        var html2canvasJs = System.IO.File.ReadAllText(Path.Combine(Path.GetDirectoryName(new Uri(Assembly.GetExecutingAssembly().CodeBase).LocalPath), this.seleniumEngine.GetHtml2CanvasPath()));
        var wait = new WebDriverWait(Driver, TimeSpan.FromSeconds(60));
        var response = new object { };

        js.ExecuteScript(html2canvasJs);

        string generateScreenshotJS =
             @"
             var canvasImgContentDecoded;
             function genScreenshot () {
             html2canvas(document.body).then(function(canvas) {
             window.canvasImgContentDecoded = canvas.toDataURL(""image/png"");
             console.log(window.canvasImgContentDecoded);
             });
             }
             genScreenshot();";

        response = js.ExecuteScript(generateScreenshotJS);

        string getSCreenShot = "return window.canvasImgContentDecoded;";

        var encodedPngContent = new object { };
        
        /*ADDED WAIT FUNCTION*/
        wait.Until(
        wd =>
        {
            encodedPngContent = js.ExecuteScript(getSCreenShot);
            if (encodedPngContent != null)
            {
                return true;
            }
            return false;
        });

        string pngContent = encodedPngContent.ToString();
        pngContent = pngContent.Replace("data:image/png;base64,", string.Empty);
        string fileSavePath = this.seleniumEngine.GetDownloadPath() + fileName;
        File.WriteAllBytes(fileSavePath, Convert.FromBase64String(pngContent));
        byte[] fileByte = System.IO.File.ReadAllBytes(fileSavePath);
        File.Delete(fileSavePath);
        return fileByte;
    }

使用 C# Selenium WebDriver html2canvas 捕获全屏屏幕截图 returns null

Capturing full screen screenshot using C# Selenium WebDriver html2canvas returns null

c#

selenium

html2canvas