Full page capture

[bendoh]

Great extension, just what I wanted, but is there any way to capture the full contents of the browser window, not just the visible viewport?

This is a tricky problem because the browser driver is only going to render and deliver the viewport, so the only way to really do this is to cause the browser to scroll through the page and capture viewport-sized chunks of them (plus the remainder) and stitch them together into the final image. Do you have any intention of doing this, or perhaps accepting a PR that does this?

It involves javascript injection black magic. But it can work...

[elvetemedve]

Hi @bendoh, The whole page content is captured, not only the viewport region. I've tested this with PhantomsJS 2.1.1 browser and Firefox 45.3.0 + Selenium 2.53.1 setup and both captured the full page content.

Is your website available for the public? If yes, I can check that as well.

[bendoh]

Hey @elvetemedve , thanks for getting back.

I'm using Chromedriver 2.23 (0c4084804897ac45b5ff65a690ec6583b97225c0) with Selenium 2.53.0 on mac OS, so definitely a different environment. It's an internal project, unfortunately. I'll dig in a little deeper.

[elvetemedve]

@bendoh FYI, I've tested this on Linux using ChromeDriver 2.23.409687 (c46e862757edc04c06b1bd88724d15a5807b84d1) and Google Chrome 52.0.2743.116 and I run into the same issue as you. Image has even a scrollbar on the right side, while in case of Firefox or PhantomJS there is no scrollbar rendered on the image.

It's a known bug in ChromeDriver, see https://bugs.chromium.org/p/chromedriver/issues/detail?id=294

[bendoh]

Yep, though unclear if bug, as the webdriver spec states that the output from chromedriver is technically correct:

https://w3c.github.io/webdriver/webdriver-spec.html#

There are ways around this, one thing being https://www.assertthat.com/posts/selenium_shutterbug_make_custom_screenshots_with_selenium_webdriver, (found from your link), which do what I was suggesting: Move the page around within the viewport with JavaScript evaluations and stitch together the set of screenshots from that. But it's a lot of extra code and not totally reliable.

[elvetemedve]

I believe it has been resolved in Google Chrome / Chromium version 59. See the release notes: https://developers.google.com/web/updates/2017/04/devtools-release-notes#screenshots

[mxr576]

I do not see this working, can somebody confirm and maybe share the setup that s/he is using? I am using Chrome driver in a container, maybe that is the problem?

[mxr576]

Okay, so it is working with the https://gitlab.com/DMore/chrome-mink-driver after my patch is applied https://gitlab.com/DMore/chrome-mink-driver/-/merge_requests/79

[t4k]

Would anyone be willing to post the relevant parts of a behat.yml file? I'd like to use DMore\ChromeExtension\Behat\ServiceContainer\ChromeExtension without Selenium.

[jbatista-ciandt]

A good approach would be to resize the whole page height to the current one, before the screenshot, then take only one screenshot.

    $pageHeight = (string) $this->getSession()->evaluateScript('return document.body.scrollHeight');
    $pageWidth = '1920'; // for Desktop for example

    $this->getSession()->resizeWindow(
      $pageWidth,
      $pageHeight,
      'current'
    );
    $this->getSession()->executeScript("document.body.style.zoom=0.9"); // to make sure you are get the whole page

    $screenshot = $this->getSession()->getScreenshot();