捕获带有粘页眉的硒中的完整网页屏幕截图 [英] Capture full webpage screenshot in selenium that has sticky header

问题描述

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

I want to capture a full page screenshot of a webpage that has a sticky header. Say for example https://www.flipkart.com/ site has the sticky header. I am using Ashot and it took the screenshot like the one below. https://www.flipkart.com/

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

You can see the header is appearing between the image

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

It would be really helpful if I could find any ideas on how to achieve

推荐答案

尝试使用 shutterbug 您可以使用很多选项来裁剪页面.

There is a lot of options that you can use to crop the page.

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

First solution Try with ignore-parts of the screen like 10px from top. You have to play with the tuneup.

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

Second solution is to edit CSS of the header element, the idea is to change his position to 'relative' so it will not be on top when scrolling.

这就是我的方法. 禁用顶部标头:

This is how I did it. Disable on-top header:

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

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

这篇关于捕获带有粘页眉的硒中的完整网页屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！