Question

我将Watir / Firefox自动化堆栈升级到最新版本，并添加了geckodriver。我很惊讶地看到，现在屏幕截图只是默认情况下的视口。

require 'watir'
require 'mini_magick'

b = Watir::Browser.new :firefox
b.goto "https://daringfireball.net"
base = b.screenshot.base64
blob = Base64.decode64(base)
image = MiniMagick::Image.read(blob)
image.height
 => 1760 # macOS 'Retina' resolution doubling
b.execute_script "return window.innerHeight"
 => 880 # 880 * 2 = 1760
b.execute_script "return document.documentElement.scrollHeight"
 => 34692

geckodriver does not have any API for full page screenshots, though reintroducing this feature is planned (on an infinite timescale).

如何在不回滚我的环境的情况下使用Watir驱动Firefox获取整页的屏幕截图？

Answer 1

我在C＃中解决了这个问题。但我认为可以用任何语言重写解决方案。我使用了一个名为HTML2Canvas的JavaScript库来生成整页截图。这是C＃代码：

[Test]
public void TakingHTML2CanvasFullPageScreenshot()
{
    using (var driver = new ChromeDriver())
    {
        driver.Manage().Timeouts().PageLoad = TimeSpan.FromSeconds(5);
        driver.Navigate().GoToUrl(@"https://automatetheplanet.com");
        IJavaScriptExecutor js = driver;
        var html2canvasJs = File.ReadAllText($"{GetAssemblyDirectory()}html2canvas.js");
        js.ExecuteScript(html2canvasJs);
        string generateScreenshotJS = @"function genScreenshot () {
                                            var canvasImgContentDecoded;
                                            html2canvas(document.body, {
                                                onrendered: function (canvas) {                                          
                                                    window.canvasImgContentDecoded = canvas.toDataURL(""image/png"");
                                            }});
                                        }
                                        genScreenshot();";
        js.ExecuteScript(generateScreenshotJS);
        var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
        wait.IgnoreExceptionTypes(typeof(InvalidOperationException));
        wait.Until(
            wd =>
            {
                string response = (string)js.ExecuteScript
                    ("return (typeof canvasImgContentDecoded === 'undefined' || canvasImgContentDecoded === null)");
                if (string.IsNullOrEmpty(response))
                {
                    return false;
                }
                return bool.Parse(response);
            });
        wait.Until(wd => !string.IsNullOrEmpty((string)js.ExecuteScript("return canvasImgContentDecoded;")));
        var pngContent = (string)js.ExecuteScript("return canvasImgContentDecoded;");
        pngContent = pngContent.Replace("data:image/png;base64,", string.Empty);
        byte[] data = Convert.FromBase64String(pngContent);
        var tempFilePath = Path.GetTempFileName().Replace(".tmp", ".png");
        Image image;
        using (var ms = new MemoryStream(data))
        {
            image = Image.FromStream(ms);
        }
        image.Save(tempFilePath, ImageFormat.Png);
    }
}

您可以在article中找到更多示例和解释。

Answer 2

使用Watir的.execute_script，可以在移动滚动位置时重复截取视口的屏幕截图。然后可以使用MiniMagick将图像拼接在一起。

我开发了the watir-screenshot-stitch gem来封装我解决这个问题的最佳方法，尽管它附带了警告，你可以在那里阅读。它也是内存密集型的，可能很慢。

这不是一个真正的整页截图解决方案，我很乐意接受任何改进的方法。

Answer 3

现在可以在Firefox中使用geckodriver功能来执行此操作。据我所知，此功能尚未植入Selenium中，也可能不是W3C规范的一部分。

require 'watir'

browser = Watir::Browser.new :firefox
bridge = browser.driver.session_storage.instance_variable_get(:@bridge)

server_uri = bridge.instance_variable_get(:@http).instance_variable_get(:@server_url)
sid = bridge.instance_variable_get(:@session_id)
driver_path = "session/#{sid}/moz/screenshot/full"
request_url = server_uri.to_s + driver_path

url = URI.parse(request_url)
req = Net::HTTP::Get.new(request_url)
raw = Net::HTTP.start(url.host, url.port) {|http| http.request(req) }.body

base64_screenshot = JSON.parse(raw, symbolize_names: true)[:value]

the watir-screenshot-stitch gem中现在也可以使用这种方法：

require 'watir-screenshot-stitch'
b = Watir::Browser.new :firefox
b.goto "https://github.com/mozilla/geckodriver/issues/570"
base64_screenshot = b.base64_geckodriver

如何使用Watir和geckodriver + Firefox获取整页截图？

3 个答案: