在具有粘页眉的硒中捕获完整的网页屏幕截图

Question

我要捕获具有粘性标头的网页的完整屏幕截图。 假设https://www.flipkart.com/网站具有粘性标头。我正在使用Ashot，它的屏幕截图如下图所示。 https://www.flipkart.com/

您可以看到标题出现在图片之间

如果我能找到实现目标的任何想法

Answer 1

尝试使用 shutterbug https://github.com/assertthat/selenium-shutterbug

您可以使用很多选项来裁剪页面。

第一个解决方案 尝试使用屏幕顶部的10px之类的忽略部分。您必须要进行调整。

第二个解决方案是编辑标头元素的css，其想法是将其位置更改为“相对”，这样在滚动时它就不会位于顶部。

这就是我的方法。 禁用顶部标头：

((JavascriptExecutor) driver).executeScript("$('.common-header').css('position', 'relative');");

BufferedImage img = Shutterbug.shootPage(driver, ScrollStrategy.BOTH_DIRECTIONS, 100, true)
                .getImage();

希望有帮助。祝你好运：）

Answer 2

使用ShutterBug拍摄整张屏幕截图

Shutterbug.shootPage(driver,ScrollStrategy.WHOLE_PAGE,500).withName("FullPageScreenshot").save("/Users/machinename/Desktop/Screen2");

所需罐子：  java-semver-0.7.0.jar，selenium-shutterbug-0.9.3.jar

Answer 3

这可能会对您有所帮助。 建议不要使用JAVASCRIPT删除或更改粘性标头的style属性，并采取可滚动的屏幕截图，因为这被认为是测试和生成丝网印刷的标准方法。

一种最佳方法是使用JS并找到整个页面的高度，视口的高度，粘性页眉的高度，然后滚动并截取屏幕截图。 您可以使用以下代码。

public void scrollTheStickyHeaderPage(){
/** This function scrolls and takes screenshot **/
JavascriptExecutor js = (JavascriptExecutor) driver;  
int fullPageHeight = Integer.parseInt(js.executeScript
    ("return document.documentElement.ScrollHeight").toString());
int viewportHeight = Integer.parseInt(js.executeScript("return Math.max
    (document.documentElement.clientHeight, window.innerHeight || 0)").toString());
int headerHeight = Integer.parseInt(js.executeScript("return Math.max
    (document.getElementsByTagName('/**element**/')[0].clientHeight,
    document.getElementsByTagName('/**element**/')[0].offsetHeight,
    document.getElementsByTagName('/**element**/')[0].scrollHeight || 0)").toString());
int numofScrolls = (fullPageHeight/viewportHeight);
/** call your screenshot function **/
 for(int i=1; i<=numofScrolls; i++){
  js.executeScript("window.scrollBy(0,"+(viewportHeight-headerHeight)+")");
  /** call your screenshot function **/  
 }
}

Answer 4

我已经通过在检查编辑器中将下面提到的 CSS 代码添加到标题粘性元素来解决这个问题。您可以在此页面上查看结果 https://icrmsoftware.com/project/corporate-business-consulting-business-html-template

margin-top: -200px !important