Ashot 屏幕截图无法正确裁剪屏幕截图中的元素

Question

我正在尝试打开此 url并使用Ashot library截取Keep browser按钮的屏幕截图，如下图所示。

这是我对 pom.xml 的依赖：

<dependencies>
    <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
    <dependency>
      <groupId>org.seleniumhq.selenium</groupId>
      <artifactId>selenium-java</artifactId>
      <version>3.141.59</version>
    </dependency>

    <dependency>
      <groupId>ru.yandex.qatools.ashot</groupId>
      <artifactId>ashot</artifactId>
      <version>1.5.4</version>
    </dependency>
  </dependencies>

这是我的代码：

public class Main {

  public static void main(String[] args) throws InterruptedException, IOException {
    System.setProperty("webdriver.chrome.driver", "C:\\selenium-driver\\chromedriver.exe");
    WebDriver driver = new ChromeDriver();
    String baseUrl = "https://www.immoweb.be/en/search/house/for-sale?countries=BE&page=1&orderBy=relevance";
    driver.get(baseUrl);
    Thread.sleep(3000);


    WebElement element = driver.findElement(By.xpath("//*[@id='uc-btn-accept-banner']"));
    Screenshot screenshot = new AShot().coordsProvider(new WebDriverCoordsProvider())
        .takeScreenshot(driver, element);

    File actualFile = new File("C:\\baseImage\\dashboardActual.png");
    ImageIO.write(screenshot.getImage(), "png", actualFile);

    driver.close();

 
  }
}

但是当我执行代码时，截取的屏幕截图不正确。

这是我的截图：

更新：阅读此问题后，我添加了 shotStartegy，这也没有帮助：

Screenshot screenshot =
    new AShot()
        .shootingStrategy(ShootingStrategies.viewportPasting(100))
        .coordsProvider(new WebDriverCoordsProvider())
        .takeScreenshot(driver, element);

Answer 1

我认为，AShot 库没有足够的文档。 但是，您不需要 AShot 来截取元素的屏幕截图，但需要它来比较两个不同的图像。 这是我建议的解决方案：

  public static String URL = "https://www.immoweb.be/en/search/house/for-sale?countries=BE&page=1&orderBy=relevance";
  // Notice that the ELEMENT_ID  might change as the website is dynamic
  public static String ELEMENT_ID = "//article[@id='classified_9408324']";
  public static String BUTTON_ID =  "//*[@id='uc-btn-accept-banner']";
  public static int DELAY_IN_MILLI_SECONDS = 5000;

    System.setProperty("webdriver.chrome.driver", "C:\\selenium-driver\\chromedriver.exe");
    WebDriver driver = new ChromeDriver();
    
    driver.manage().window().maximize();
    
    driver.get(URL);
    Thread.sleep(DELAY_IN_MILLI_SECONDS);
    
    driver.findElement(By.xpath(BUTTON_ID)).click();
    
    WebElement element = driver.findElement(By.xpath(ELEMENT_ID));
    
    File actualFile = element.getScreenshotAs(OutputType.FILE);
    BufferedImage  actualImage = ImageIO.read(actualFile);
    FileUtils.copyFile(actualFile, new File("C:\\baseImage\\dashboardActual.png"));
    
    File expectedFile = new File("C:\\baseImage\\6.png");
    BufferedImage  expectedImage = ImageIO.read(expectedFile);
    
    // Compare two images for visual testing
    ImageDiff diff = new ImageDiffer().makeDiff(actualImage, expectedImage);
    BufferedImage diffImage = diff.getMarkedImage();
    
    File diffFile = new File("C:\\baseImage\\Diff.png");
    ImageIO.write(diffImage, "jpg", diffFile);
    
    Assert.assertFalse("Images are not equal",diff.hasDiff());
    
    driver.close();

因此，简而言之，以下由 Selenium 工作的行可以截取元素的屏幕截图，您可以将其用作视觉测试的基础图像：

WebElement element = driver.findElement(By.xpath(ELEMENT_ID));

File actualFile = element.getScreenshotAs(OutputType.FILE);
BufferedImage  actualImage = ImageIO.read(actualFile);
FileUtils.copyFile(actualFile, new File("C:\\baseImage\\dashboardActual.png"));

这是图像：