Firefox开发人员工具的多个屏幕截图

Question

I am trying take screenshots of a page that loads a series of content (slideshow) via Javascript. I can take screenshots of individual items with Firefox Devtools just fine. However it's tedious to do so by hand.

I can think of a few options-

1. Run the 'screenshot' command in a loop and call a JS function in each loop to load the next content. However I can't find any documentation to script the developer tools or call JS functions from within it.

2. Run a JS script on the page to load the contents at an interval and call the devtools to take a screenshot each time. But I can't find any documentation on calling devtools from JS in webpage.

3. Have Devtools take screenshots in response to a page event. But I can't find any documentation on this either.

How do I do this?

Answer 1

Your first questions is, how to take screenshots with javascript in a programmed way: use selenium Webdriver to steer the browser instead of trying to script the developer tools of a specific browser.

Using WebdriverJS as framework you can script anything you need around the Webdriver itself.

Your second question is, how to script the FF dev tools: - no answer from my side -

Answer 2

I will second Ralf R's recommendation to use webdriver instead of trying to wrangle the firefox devtools.

Here's a webdriverjs script that goes to a webpage with a slow loading carousel, and takes a screenshot as soon as the image I request is fully loaded (with this carousel, I tell it to wait until the css opacity is 1). You can just loop this through however many slide images you have.

var webdriver = require('selenium-webdriver');
var By = webdriver.By;
var until = webdriver.until;
var fs = require("fs");
var driver = new webdriver.Builder().forBrowser("chrome").build();

//Go to website
driver.get("http://output.jsbin.com/cerutusihe");

//Tell webdriver to wait until the opacity is 1
driver.wait(function(){
  //first store the element you want to find in a variable.
  var theEl = driver.findElement(By.css(".mySlides:nth-child(1)"));
  //return the css value (it can be any value you like), then return a boolean (that the 'result' of the getCssValue request equals 1)
  return theEl.getCssValue('opacity').then(function(result){
    return result == 1;
  })
}, 60000) //specify a wait of 60 seconds.

//call webdriver's takeScreenshot method.
driver.takeScreenshot().then(function(data) {
  //use the node file system module 'fs' to write the file to your disk. In this case, it writes it to the root directory of my webdriver project.
  fs.writeFileSync("pic2.png", data, 'base64');
});