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

[RemainCurly]

Product

playwright

Product Version

4.10.0

Latest Version

• I have tested the issue with the latest version of the product

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:

[jcaracciolo]

Seeing the same issue. Were you able to resolve this?

[RemainCurly]

Seeing the same issue. Were you able to resolve this?

Nope! Still waiting on a solution :)