Use fence plugin to display Image and manually provide badge coordinates Note: Color of badges change based on the background color image ```image testingisdocumenting.png {scale: 0.5} 840,600 1680,1400 ```

Hover mouse over image during Preview Mode to display coordinates under the cursor. Use the displayed coordinates to update the position.

Put ordered list right before or after an annotated image to associate text with the badges. Note: Hover over image annotations to display automatic tooltip. Hover over an item text to highlight the annotation on the image. Use automated testing to exercise happy paths and capture test artifacts Use captured test artifacts to supercharge your documentation 1. Use automated testing to exercise happy paths and capture test artifacts 2. Use captured test artifacts to supercharge your documentation ```image testingisdocumenting.png {scale: 0.5} 840,600 1680,1400 ```

Use to display HiDPI images and use logical coordinates for the annotations pixelRatio ```image testingisdocumenting.png {pixelRatio: 2} 420,300 840,700 ```

Use and as first column value to render arrow or rectangle annotation Add a text block after coordinates to provide tooltip data. Markdown is supported. Note: Hover over image annotations to display automatic tooltip. rect arrow ```image testingisdocumenting.png {pixelRatio: 2} rect,60,110,420,430 arrow,485,810,310,474 ``` ```image testingisdocumenting.png {pixelRatio: 2} rect,60,110,420,430,Note: zone description arrow,485,810,310,474,destination **description** ```

also supports file format :include-image: testingisdocumenting.png { annotationsPath: "testingisdocumenting.csv", pixelRatio: 2, } rect,60,110,420,430,Note: zone description arrow,485,810,310,474,destination **description** include-image JSON

You don't need to specify annotations path, if annotations file matches file name and path of the image and has or extension. Add to automatically use matching annotations file json csv annotate: true :include-image: testingisdocumenting.png { annotate: true, pixelRatio: 2, }

Use UI testing frameworks to automatically generate annotations file and capture screenshot. For example WebTau automatically generates an annotations file in addition to capturing a screenshot. Type question you want to be answered anonymously Scan through results and pick the most relevant one Note: WebTau captures additional data such as package webtauexamples import static org.testingisdocumenting.webtau.WebTauGroovyDsl.* def homeSearchInput = $('textarea[name="q"], input[name="q"]') def resultSearchInput = $("#search_form_input") def result = $('article[data-testid="result"]') scenario("capture screenshot") { browser.open("https://duckduckgo.com/") homeSearchInput.waitToBe visible homeSearchInput.setValue("testing is documenting") homeSearchInput.sendKeys(browser.keys.enter) result.waitTo visible browser.doc.withAnnotations(resultSearchInput, result) .capture("duckduckgo-search") } :include-image: doc-artifacts/duckduckgo-search.png {annotate: true} pixelRatio

Annotated images automatically participate in presentation mode. Annotations will appear one by one.