Runtime issue: TypeError: Cannot read property 'cells' of undefined

[benNek]

Expectation: Color contrast checker step goes smoothly and reports the errors

Actual: Color contrast checker throws error instead

Motivation: Lighthouse accessibility audit is not ran properly because of this issue

axe-core version: 4.0.2
axe-webdriver, extension or other integration version: 4.6.1

Browser and Assistive Technology versions

For Tooling issues:
- Node version: XX  
- Platform:  MacOS

<< Please describe how you encountered this issue >>

This was first reported to Lighthouse issues (GoogleChrome/lighthouse#11721), but apparently it's related to axe tool instead.

This error happens when running axe on https://www.kayak.com/Cheap-New-York-Car-Rentals.15830.cars.ksp mobile version.

TypeError: Cannot read property 'cells' of undefined
    at g (chrome-extension://lhdoppojpmngadmnindnejefpokejbdd/vendor.bundle.js:33:117574)
    at g (chrome-extension://lhdoppojpmngadmnindnejefpokejbdd/vendor.bundle.js:33:117746)
    at t.default (chrome-extension://lhdoppojpmngadmnindnejefpokejbdd/vendor.bundle.js:33:112534)
    at t.default (chrome-extension://lhdoppojpmngadmnindnejefpokejbdd/vendor.bundle.js:33:105919)
    at t.default (chrome-extension://lhdoppojpmngadmnindnejefpokejbdd/vendor.bundle.js:33:101530)
    at t.default (chrome-extension://lhdoppojpmngadmnindnejefpokejbdd/vendor.bundle.js:33:103754)
    at t.default (chrome-extension://lhdoppojpmngadmnindnejefpokejbdd/vendor.bundle.js:33:102856)
    at Object.t.default (chrome-extension://lhdoppojpmngadmnindnejefpokejbdd/vendor.bundle.js:33:15179)
    at c.run (chrome-extension://lhdoppojpmngadmnindnejefpokejbdd/vendor.bundle.js:33:187710)
    at chrome-extension://lhdoppojpmngadmnindnejefpokejbdd/vendor.bundle.js:33:205329

[straker]

Thanks for the issue. We'll look into getting it fixed.

[straker]

Note about the issue: For some reason the <div class="RVNB-menu-item-title">Sign in</div> element is inside of a scroll container, but the scroll container itself does not have a _grid. If I were to guess, it's because the scroll parent <div class="l32f l32f-v2"> does not have a width/height so we are excluding it from the grid while its children are being included. So even though the elements are not visible, we are checking color-contrast of them.

[jonkeegan]

I am experiencing the same error with this page: https://coronavirus.dc.gov/vaccinatedc

"axe-core Error: Cannot read property 'cells' of undefined"

This was via Lighthouse 7.2.0
Axe version 4.1.2

[paulirish]

Another page that repros this cleanly: https://zenbears.co.uk/

[davidstellini]

Another page that repros this issue: https://allfront.io

https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fallfront-marketing-site-qa.web.app%2F

I'm seeing this on web.dev, chrome 94 (canary) as well as Chrome 92.

[jrpool]

I usually get a similar error, Evaluation failed: TypeError: Cannot read property 'level' of undefined, when running the getViolations method of axe-playwright, with empty axe-options, on one particular URL (https://www.cvs.com/photo/photo-landing). That is using chromium in playwright.

But, if I use firefox in playwright, then I get page.evaluate: Evaluation failed: o[a] is undefined instead.

If I use webkit in playwright, then I do not get any error.

[straker]

So I'm finally able to get around to looking at this issue. I've tested the latest axe-core v4.3.3 on each of the sites listed in this issue thread but I was unable to get the error to throw on any of the pages (just opening the page and running await axe.run()). Is this issue still appearing for everyone who posted a URL?

[paulirish]

Here's my repro:

1. build axe 4.2.3
2. open a tab in chrome stable (m94)
3. take the unminified axe.js and pop it into chrome devtools snippets
4. open https://allfront-marketing-site-qa.web.app/fintech
5. flip on the devtools' Device Toolbar and set it to Responsive. (wait for the page to refresh)
6. evaluate the snippet
7. run this in the console:

axe.run(document, {
    elementRef: true,
    runOnly: {
      type: 'tag',
      values: ['wcag2a','wcag2aa',],
    },
    resultTypes: ['violations', 'inapplicable']
}).then(ret => {
  console.log(ret);
  window.axeret = ret;
})

hopefully you see this:

axeret.incomplete[0].error

and here's more of the results object:

[paulirish]

Also.. i noticed that when i invoke axe.run i spot some __zone stuff in the console:

This is probably zone.js which does some very aggressive promise polyfilling and something that Lighthouse had to work around before. (At least in a previous version…) it redefined Promise.prototype.then which made our uses of Promise within the page to work as expected. We dealt with this problem multiple times over the past couple years, but here's two early introductions: GoogleChrome/lighthouse#1000 GoogleChrome/lighthouse#1037

I'm not 100% sure zone plays a role for this particular bug, but bringing it up cuz it's been a doozy for us

[straker]

@paulirish Thanks for that. It appears it only happens on mobile viewport sizes. Now that I can reproduce I can make sure I fix the issue for that site as well.

[straker]

Confirmed that #3172 does not error for https://allfront-marketing-site-qa.web.app/fintech

[padmavemulapati]

Validated with the latest axe-core develop branch code base, not seeing any error in "lighthouse" accessibility issues