Auto Annotations

How to annotate images using the include-image plugin visuals/image-annotations was covered previously . Now let's automate the screenshot and annotations assignment process. PageElement signIn = $("#gb_70"); PageElement input = $(".gsfi"); PageElement search = $("[name='btnK']"); browser.open("http://google.com"); browser.doc.withAnnotations( browser.doc.badge(signIn), browser.doc.highlight(input).withColor("green"), browser.doc.arrow(search, "Click This").withColor("yellow")).capture("test"); Example above is using a Selenium-based framework to automatically take a screenshot and retrieve annotations positions. Once we have the information we can include the annotated image in our documentation. :include-image: test.png {annotationsPath: 'test.json'} The result is below: