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

我试图通过Javascript加载一系列内容（幻灯片）的页面截图。我可以使用Firefox Devtools截取单个项目的截图。不过手工操作很繁琐。Firefox开发人员工具多个屏幕截图

我可以在一个循环想到几个选项 -

运行“屏幕截图”的命令，并调用JS函数在每个循环加载下一个内容。不过，我找不到任何文档来编写开发人员工具的脚本或从其中调用JS函数。
在页面上运行JS脚本以每隔一段时间加载内容并调用devtools每次截屏。但我找不到任何关于从网页中调用JS的devtools的文档。
有Devtools采取屏幕截图响应页面事件。但是我也找不到任何文档。

我该怎么做？

来源

2017-10-05 Agnibho Mondal

您的第一个问题是，如何以编程的方式使用javascript截图：使用selenium Webdriver来引导浏览器，而不是尝试编写特定浏览器的开发人员工具脚本。

使用WebdriverJS作为框架，您可以编写Webdriver本身需要的任何内容。

你的第二个问题是，如何脚本FF开发工具： - 没有从我身边的答案 -

来源

2017-10-05 05:42:55

我将第二拉尔夫的r推荐使用的，而不是试图缠斗火狐devtools的webdriver。

下面是一个webdriverjs脚本，该脚本转到带有慢速加载轮播的网页，并在我请求的图像完全加载后立即进行截图（使用此轮播，我告诉它等到css opacity为1）。您只需循环播放您的幻灯片图片即可。

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'); 
});

来源

2017-10-05 19:43:56 codemon

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

回答

相关问题