Search code examples
javascriptseleniumintern

Take Full Page Screenshots with Intern JS

I'm pretty new to JavaScript programming when it comes to UI automation and have come from a Java based Selenium background. I'm currently trying to get my head around InternJS and how to use it to take full page screenshots of any URL that I wish and on any device. The end goal is to take screenshots of a specific website on multiple devices for manual visual verification purposes and using a Sauce Labs account.

I was able to separate the takeScreenshot() functionality into a re-usable method as follows:

MyFile.prototype.takeScreenshotAndWriteToFile = function (fileName) {
  return function () {
    return this.parent
      .takeScreenshot()
      .then(function (fileAsBuffer) {
        fileSystem.writeFile(fileName, fileAsBuffer, 'base64');
      })
      .catch(function (error) {
        console.log(error);
      });
  };
};

However when I run this on various devices / browsers via our Sauce Labs account, I am getting the following results:

  • Desktop with Chrome and Firefox (latest versions on Windows 10) only takes a screenshot of what's immediately visible in the browser window at the time I make the request.
  • The same result as above applies to testing on Mobile devices and Tablets.
  • Oddly, Safari Version 11 (on Mac) does take a full page screenshot. Same method. Same implementation. Different result.

I'm completely confused as to why something so simple as wishing to take a full page screenshot is proving to be such a complicated issue... could anyone please point me in the right direction as to what I can do to achieve my goal?

Or if anyone knows of a better alternative to Intern JS in this case? I'm open to any ideas / advice at this stage.

Solution

  • As Florent pointed out, screenshots are actually handled by the driver that's interfacing with the browser (e.g. chromedriver) rather than Intern, which is interfacing with the driver. According to the WebDriver spec, a screenshot will only be of the viewport, not the full page. The JSON wire protocol (the precursor to WebDriver) is a bit vaguer on the subject. In any case, different browser drivers can and do behave differently in many situations.

    Any testing system that uses WebDriver/Selenium to manage browsers (which is most of them, particularly the popular open source ones) is going to be subject to the capabilities of the driver, and may not support this feature out-of-the-box. However, it could probably be implemented in the testing system (higher level than the WebDriver), so it would be worth filing a feature request with Intern (or whichever WebDriver-based testing system you might be using) if it seems worthwhile.