截图没有取正确元素的截图。

Question

我正试着在一个网页上截图表格。以及我在代码中提供的相同元素xpath，但是，截图代码正在捕获其他位置的屏幕截图。

我也尝试过其他的截图代码，

Screenshot screenshot = new AShot().takeScreenshot(driver,driver.findElement(By.xpath(webElementXpath)));

但是它给了我错误，我能够通过阅读这个链接：https://github.com/pazone/ashot/issues/93来修复这个错误，然后我使用了下面的代码：

WebElement myWebElement = driver.findElement(By.xpath("//center/table/tbody/*"));
        Screenshot fpScreenshot = new AShot()
                .coordsProvider(new WebDriverCoordsProvider()).takeScreenshot(driver,myWebElement);

         ImageIO.write(fpScreenshot.getImage(),"PNG",new File("/Users/sanatkumar/eclipse-workspace/com.ScreenshotUtility/Screenshots/error.png"));

请帮助，因为这段代码是给我截图的一些随机部分的网页。我也试图捕捉其他元素，但同样没有得到正确的屏幕截图：

请注意，我的表格不是完全可见在网页上，手动我必须向下滚动来查看完整的表格。是否需要编写其他代码才能获得表的完整屏幕截图？？

另外，我的网站是基于角度的，我正在尝试使用selenium实现自动化。我之所以这么做，是因为在量角器中，我会找到任何API，比如Ashot。如果有人知道，请告诉我。

Answer 1

通过添加一个shootingStrategy，我能够只捕获这个页面底部带有id =“post”属性的form元素。

来自https://github.com/pazone/ashot的文档

不同的WebDrivers以不同的方式截图。一些WebDrivers提供整个页面的屏幕截图，而另一些则只处理视图。 ..。 在ShootingStrategies中有针对不同用例的内置策略。

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;
import javax.imageio.ImageIO;
import java.io.File;

public class Main
{
    public static void main(String args[]) throws Exception
    {
        System.setProperty("webdriver.gecko.driver", "./geckodriver");
        System.setProperty("webdriver.firefox.bin", "/usr/bin/firefox");
        WebDriver driver = new FirefoxDriver();
        driver.get("https://stackoverflow.com/questions/54724963/ashot-is-not-taking-screenshot-of-correct-element");
        Thread.sleep(2000);
        WebElement webElement = driver.findElement(By.id("post-form"));
        Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(100)).takeScreenshot(driver,webElement);
        ImageIO.write(screenshot.getImage(),"PNG",new File("/home/dan/ElementScreenshot.png"));
        Thread.sleep(2000);
        driver.quit();
    }
}

产出：

​

Answer 2

这种功能与量角器是可能的，也需要一个NPM模块，如‘量角器-图像比较’。例如，如果您想捕获侧边栏上的相关文章，可以使用以下代码。

注意:我还没有用超出浏览器视图范围的大型元素来测试这个包，因此无法说明它们将如何处理。

规范文件

describe('simple test', () => {
    it('will save image', async () => {
        await browser.get("https://stackoverflow.com/questions/54724963/ashot-is-not-taking-screenshot-of-correct-element");
        await browser.driver.sleep(10 * 1000);

        let related_questions_sidebar = element(by.className('module sidebar-related'));
        await browser.executeScript('arguments[0].scrollIntoView();', related_questions_sidebar);
        await browser.driver.sleep(3 * 1000);

        // saveElement
        await browser.protractorImageComparison.saveElement(related_questions_sidebar, 'sidebar-image');
    });
});

Conf.js-在您的OnPrepare中

onPrepare: async () => {
    // await jasmine.getEnv().addReporter(new dbReporter());
    const protractorImageComparison = require('protractor-image-comparison');
    browser.protractorImageComparison = new protractorImageComparison(
        {
            baselineFolder: './screen-compare/baselines/',
            screenshotPath: './screen-compare/screenshots/'
        }
    ); 
); 

图像保存

​

​