dequelabs / axe-core-npm

Mozilla Public License 2.0
616 stars 68 forks source link

Cannot read properties of null (reading 'children') in `frame.evaluate` causing flaky tests #1137

Open RemainCurly opened 3 weeks ago

RemainCurly commented 3 weeks ago

Product

playwright

Product Version

4.10.0

Latest Version

Issue Description

Expectation

Consistently pass when there are no accessibility violations instead of failing with the error pictured below

Actual

Fails about 50%+ of the time due to the below error

How to Reproduce

  // Accessibility.e2e.ts
  const getViolations = async (page: Page) =>
    (await new AxeBuilder({ page }).withTags(TAGS).exclude(EXCLUDED_ELEMENTS).analyze()).violations;
  // ...
  test('Dashboard - View', async ({ paPageHelper }) => {
    await paPageHelper.goto(`/program/${E2E_PROGRAM_ID}`);
    // my attempt at making this less flaky
    await paPageHelper.page.getByText('Loading...').waitFor({ state: 'hidden' });

    expect(await getViolations(paPageHelper.page)).toEqual([]);
  });
// utils.ts
export const test = base.extend<{loginHelper: LoginHelper}>({
    // ...
    paPageHelper: async ({ loginHelper }, use) => {
    const { pageHelper } = await loginHelper.loggedInAs(PROGRAM_ADMIN_CI_V2);
    await use(pageHelper);
    await pageHelper.page.close();
  },
// LoginHelper.ts
export class LoginHelper {
  private helpers: Record<string, TestHelpers> = {};

  constructor(
    private browser: Browser,
    private clientUrl: string,
    private testId: string,
  ) {}

  async loggedInAs(user: AuthUser) {
    const helpers = this.helpers[user.userId];
    if (helpers) {
      return helpers;
    }

    const browserContext = await this.browser.newContext({ storageState: buildStorageStateFileName(user) });
    const browserCookies = await browserContext.cookies();

    const page = await browserContext.newPage();
    await blockThirdPartyReqs(page);
    const pageHelper = new PageHelper(this.clientUrl, page, this.testId);

    const token = browserCookies.find((c: any) => c.name === 'access_token')?.value;
    const apiHelper = new ApiHelper(token ?? '', this.testId);

    const newHelpers = { pageHelper, apiHelper };
    this.helpers[user.userId] = newHelpers;
    return newHelpers;
  }
}

(I can provide more context if needed)

Additional context

Here's a screenshot of the error: Image