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

时间:2021-06-28 05:54:25

标签: java selenium ashot visual-testing

我正在尝试打开 this url 并使用 Ashot library 截取 继续浏览 按钮的屏幕截图,如下图所示。

enter image description here

这是我对 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();

 
  }
}

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

这是我的截图:

enter image description here

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

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

1 个答案:

答案 0 :(得分: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"));

这是图片:

enter image description here