How to check if an element behind a modal <dialog> is clickable?

I'm trying to write an automated test for my front end code. The scenario is relatively simple, as shown in the screenshot: I have a webpage with two modals, one stacked on top of the other. I want to check that you can't click on anything behind the top-most modal, but I'm not sure how to check that.

Testcafe is my test framework. I can use any CSS selector to get information from the elements and get attribute information, too. I just don't know what I would look for to check that one.

MDN says there is an

inert

inert

html attribute: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert That's what I would look for if I could, but the

dialog

dialog

documentation (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) says, "When using <dialog> along with the HTMLDialogElement.showModal() method, this behavior is provided by the browser." Based on my tests (FF only), that means

inert

inert

attributes are not set on the other elements.

Any ideas?

HTMLElement: inert property - Web APIs | MDN

The HTMLElement property inert reflects the value of the element's inert attribute. It is a boolean value that, when present, makes the browser "ignore" user input events for the element, including focus events and events from assistive technologies. The browser may also ignore page search and text selection in the element. This can be useful wh...