Display screenshots on the same page

[jdelucaa]

I would like to customize the Geb artifacts section a little bit, like removing the links to the dom snapshot file and have the screenshot displayed on the same page instead of being a link, is it possible?

[tilmanginzel]

Hi @jdelucaa, I was actually thinking about adding thumbnails a long time ago, but never took the time to look into it. But you can achieve this quite easily in the meantime:

1. Copy the spec-template.html to your projects test resource folder
2. Make sure the reference to the template is correct in the spock-reports config
3. Now you can make the adjustments in the spec-template.html according to your preferences

The geb artifacts table is generated in lines 248 to 274, so you could replace it with something like the code below. I do not know how performant it is to simply add the full images inline (only scaled-down by css), but for anything less than a few dozen images on a single page, I don't think it will be a major issue. Instead of inlining css, you can also provide a custom css file.

<table>
    <thead>
    <tr>
        <th>Label</th>
        <th>Image</th>
        <th>Page object</th>
    </tr>
    </thead>
    <tbody>
    <% gebArtifacts.sort { it.number }.each { artifact ->
    def label = artifact.label?.replaceFirst(name+"-", '')
    def trCssClass = label.endsWith('-failure') ? 'geb-failure' : ''
    def imageFile = "./" + artifact.files.find { it.endsWith('png') }
    %>
    <tr class="$trCssClass">
        <td>$label</td>
        <td><a href="$imageFile" target="_blank"><img src="$imageFile" alt="$label" style="max-width: 120px;" /></a></td>
        <td>${artifact.pageObject}</td>
    </tr>
    <%
    } %>
    </tbody>
</table>

Result:

Hope this helps. :) I would keep the issue open for now, as adding configurable thumbnails to the library would be a great addition.

[jdelucaa]

Hey @tilmanginzel , this was really helpful and it works!
Thanks for the quick response :D

Let's keep this open then, so it can be configurable.