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"));

這是圖像：