The report takes around 20 second to open on chromium browsers

[razvanccr]

Hello,

I've noticed that on chrome the report takes a lot to load the page. I suspect that its because of some resources that are 404:

Failed to load resource: net::ERR_FILE_NOT_FOUND highlight.min.js:1
Failed to load resource: net::ERR_FILE_NOT_FOUND reportName.html:1430 Uncaught ReferenceError: hljs is not defined at reportName.html:1430:9

Is it possible to add the https:// in the href for the stackoverflow-light.min.css and highlight.min.js ? as following:

<link  rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/stackoverflow-light.min.css"  />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>

Many thanks! Ps: I can create a new MR with the changes if needed.

[stephyswe]

Anyone found a fix? Have same issue. issues happen when not founding two files. stack-overflow-light.min.css & highlight.min.js

Scenario: Using package version 2.2.3 - "axe-html-reporter": "^2.2.3",

Generating AXE HTML Reporter as following

import { Then } from '@cucumber/cucumber'
import {getViolations, injectAxe} from 'axe-playwright'
import { ScenarioWorld } from './setup/world'
import { getCurrentPageId } from "../support/navigation-behavior"
import {createHtmlReport} from "axe-html-reporter"
import {env} from "../env/parseEnv"
import { logger } from "../logger"

Then(
    /^I inject axe accessibility engine$/,
    async function(this: ScenarioWorld) {
        const {
            screen: { page },
        } = this

        logger.log(`I inject axe accessibility engine`)

        await injectAxe(page)
    }
)

Then(
    /^I generate an accessibility analysis report$/,
    async function (this: ScenarioWorld) {
        const {
            screen: { page },
            globalConfig,
        } = this

        const pageId = getCurrentPageId(page, globalConfig)

        logger.log(`I generate a ${pageId} page accessibility analysis report`)

        createHtmlReport({ results: { violations: await getViolations(page)},
            options: {
                outputDir: `${env('ACCESSIBILITY_REPORT_PATH')}`,
                reportFileName: `${pageId}_${env('HTML_ACCESSIBILITY_FILE')}`,
            }
        })
    }
)

[RJKeane2000]

Those two files in question are missing "https:" in front of them in the report. One way to get around it is to have createHtmlReport return the html by setting the option doNotCreateReportFile to true. Then fix the urls like this before writing the file out.

const myReport = createHtmlReport(results);
const fixedReport = myReport.replaceAll('"//cdnjs', '"https://cdnjs');
fs.writeFileSync('accessibilityReport.html', fixedReport);