Added an option to support displaying screenshot of the element

[zhenyanghua]

Liliia (@lpelypenko), thanks for this useful project, it allows us to generate customized report with the foundation you have built.

One thing we love to have is the ability to display a screenshot of an element that has the violation to the specified rules. Because different clients may use different browser driver, with an option to pass in a custom function that returns the processed screenshots will be ideal for broader adaption.

In our case, with this proposed option, we are able to do this:

 // Axe-core reporting
    const results = await new AxePuppeteer(page).analyze();

    await createHtmlReport({
        results,
        options: {
            screenshotFunction: async selector => await (await page.$(selector))?.screenshot({encoding: 'base64'})
        }
    });

    await browser.close();

Which allows us to display an image like this:

[lpelypenko]

Hi @zhenyanghua,

I am so sorry for the delay, I will try to look on how this feature works for me locally this week and release by the weekends.

[lpelypenko]

Hi @zhenyanghua,
can you please provide full example of screenshotFunction usage that I can run it locally?

[danimalweb]

I am also interested in this functionality. We need to pass reports back to a Design Team, and without screenshots it's more tricky.

[marcusNumminen]

This for sure would be a great to have

[huehnerlady]

that would be awesome, please look further into it :)