To document how to use a User Interface we often take screenshots and annotate them. At the same time we need to make sure that the documented scenario works as advertised.With UI testing we can validate scenarios and at the same time capture screenshots with automatically placed annotations.
To capture screenshots use browser.doc[.withAnnotations][.withRoot].capture : search.submit("search this") browser.doc.withAnnotations( browser.doc.badge(search.box), browser.doc.badge(search.results)).capture("search") The result of the capture command is two files:captured screenshot search.json { "shapes" : [ { "type" : "badge", "text" : "1", "x" : 111, "y" : 78, "align" : "Center" }, { "type" : "badge", "text" : "2", "x" : 450, "y" : 166, "align" : "Center" } ], "pixelRatio" : 1 } https://testingisdocumenting.org/webtau WebTau documentation site is generated using https://github.com/testingisdocumenting/znai Znai. It has include-image plugin that supports annotations format generated by capture command. :include-image: doc-artifacts/search.png {fit: true, annotate: true}
Badge annotation is an easy-to-use one to tell a story. Numeric values help to bring the focus and explain a user a sequence of events.When annotation type is not specified, badge is used as the default. search.submit("search this") browser.doc.withAnnotations(search.box, search.results).capture("search-with-shortcut")
search.submit("search this") browser.doc.withAnnotations( browser.doc.badge(search.box), browser.doc.badge(search.results)).capture("search") browser.doc.withAnnotations( browser.doc.rect(search.box), browser.doc.rect(search.results, "covering text")).capture("search-rectangles") browser.doc.withAnnotations( browser.doc.arrow(search.box, search.results, "search result")).capture("search-arrow")
Use above , below , toTheLeft and toTheRight to put an annotation outside of element center. browser.doc.withAnnotations( browser.doc.badge(search.box).toTheRight(), browser.doc.badge(search.results).above()).capture("search-diff-placement")
Use to limit screenshot to a specific element search.submit("search this") browser.doc.withRoot(search.resultsArea) .withAnnotations(browser.doc.badge(search.results)) .capture("search-results-area")