Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added an option to support displaying screenshot of the element #17

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

zhenyanghua
Copy link

@zhenyanghua zhenyanghua commented Jul 28, 2021

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:

image

@lpelypenko
Copy link
Owner

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
Copy link
Owner

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

@danimalweb
Copy link

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
Copy link

This for sure would be a great to have

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants