WebElementMaterializingFucntions.storeElementScreenshot.accept() should add width and height of the image as the attributes of Material object

[kazurayam]

Let me start with showing an examle report:

Left

Right

Diff

The actual image of the left has width of 100px, while the right as width of 200px. The images were resized. However, the report itself shows the images resized to fit to the parent <div>. Therefore it is difficult to see the fact that these 2 images have different width in pixel.

The report uses Bootstrap image-fluid class; which always resizes the image. I can not stop it.

I want to show the width value of the images in the report somehow.

targetList.eachWithIndex { target, index ->
    println "accessing " + target.getUrl().toExternalForm()
    WebUI.navigateToUrl(target.getUrl().toExternalForm())
    TestObject handle = toTestObject(target)
    // println "target=" + target.toString()
    // println "handle=" + handle.toString()
    WebUI.verifyElementPresent(handle, 10)

    // take Element screenshot
    WebElementMaterializingFunctions emf = new WebElementMaterializingFunctions(store, jobName, jobTimestamp)
    emf.setScrollTimeout(1000)
    Map<String, String> attributes = ["step": String.format("%02d", index + 1)]

    // save as PNG
    Material png = emf.storeElementScreenshot.accept(driver, target, attributes, target.getHandle().getBy())
    assert Files.exists(png.toPath())
}

The emf.storeElementScreenshot.accept() method should be able to get the values of width and height of the image, and add them as the attributes of the returned Material png.

Once width and height are added into the attributes, it would be automatically rendered in the report:

![Uploading Screenshot 2023-12-05 at 22.36.06.png…]()

[kazurayam]

Done.

Sample output from com.kazurayam.inspectus.materialize.selenium.WebElementMaterializingFunctionsTest:

b5d1a0de7155be8db686b1c4a8b828b18fcc1609    png {"description":"GitHub/kazurayam", "image-height":"48", "image-width":"296", "URL.host":"github.com", "URL.path":"/kazurayam", "URL.port":"80", "URL.protocol":"https"}

Sample output from com.kazurayam.inspectus.materialize.selenium.WebPageMaterializingFunctionsTest:

5e4eea8c605126d95f6e70b8340e355ded2965d3    png {"description":"GitHub/kazurayam", "image-height":"3096", "image-width":"1024", "URL.host":"github.com", "URL.path":"/kazurayam", "URL.port":"80", "URL.protocol":"https"}

[kazurayam]

done at v0.11.0-SNAPSHOT