I am currently using Storybook v8.6.7 and Cypress v.14.2.0 with cypress-axe v1.6.0.

Most tests run without problem, but sometimes i get an Axe is already running. Use await axe.run() to wait for the previous run to finish before starting a new run. error.

For instance for this test:

describe('Calendar page a11y', () => {
    beforeEach(() => {
        cy.visit('/iframe.html?viewMode=story&id=components-calendar-pages--calendar-');
        cy.injectAxe();
    });

    it('single day inline has no detectable a11y violation on load', () => {
        cy.get(CALENDAR_PAGE_SELECTORS.SINGLE_DAY_INLINE);
        cy.checkA11y(CALENDAR_PAGE_SELECTORS.SINGLE_DAY_INLINE);
    });

    it('single day no time has no detectable a11y violation on load', () => {
        cy.get(CALENDAR_PAGE_SELECTORS.SINGLE_DAY_NO_TIME);
        cy.checkA11y(CALENDAR_PAGE_SELECTORS.SINGLE_DAY_NO_TIME);
    });

    it('single day with time has no detectable a11y violation on load', () => {
        cy.get(CALENDAR_PAGE_SELECTORS.SINGLE_DAY_WITH_TIME);
        cy.checkA11y(CALENDAR_PAGE_SELECTORS.SINGLE_DAY_WITH_TIME);
    });
})

I have tried awaiting for the tests to end like this (but also doesn't seem to work):

it('single day with time has no detectable a11y violation on load', async () => {
        cy.get(CALENDAR_PAGE_SELECTORS.SINGLE_DAY_WITH_TIME);
        await cy.checkA11y(CALENDAR_PAGE_SELECTORS.SINGLE_DAY_WITH_TIME);
    });

I have tried rewritting it like this (which seems to work):

describe('Calendar page a11y', () => {
    beforeEach(() => {
        cy.visit('/iframe.html?viewMode=story&id=components-calendar-pages--calendar-');
        cy.injectAxe();
    });

    [
        { name: 'single day inline', selector: CALENDAR_PAGE_SELECTORS.SINGLE_DAY_INLINE },
        { name: 'single day no time', selector: CALENDAR_PAGE_SELECTORS.SINGLE_DAY_NO_TIME },
        { name: 'single day with time', selector: CALENDAR_PAGE_SELECTORS.SINGLE_DAY_WITH_TIME },
        { name: 'multi day no time', selector: CALENDAR_PAGE_SELECTORS.MULTI_DAY_NO_TIME },
        { name: 'multi day with time', selector: CALENDAR_PAGE_SELECTORS.MULTI_DAY_WITH_TIME }
    ].forEach(({ name, selector }) => {
        it(`${name} has no detectable a11y violation on load`, () => {
            cy.get(selector).should('exist').should('be.visible');

            cy.window().then(async (win) => {
                if (!win.axe) {
                    throw new Error('Axe is not loaded');
                }

                while (win.axe._running) {
                    await new Promise((resolve) => setTimeout(resolve, 50));
                }

                cy.checkA11y(selector);
            });
        });
    });
});

This seems to work, but feels strange to have to do it like this.

Are there any other better ways to do this?