Assert Altis QM panels from raw response, drop UI clicks for QM v4

[mikelittle]

Summary

• Rewrite DevToolsCest::testQueryMonitor to assert against the raw server response rather than the live DOM, since Query Monitor v4 renders its UI client-side in a shadow DOM and Codeception can't reach it.
• Narrow the scope to the three Altis-specific panel outputters: Altis Config, ElasticPress, and AWS X-Ray.
• Drop the Hooks & Actions assertion — that's a built-in QM panel and not Altis dev-tools' responsibility to test.

Background

QM 4.0 changed how panels are rendered:

1. The PHP outputters still emit their HTML, but into a hidden <div id="query-monitor-fallbacks"> block.
2. A React app mounts inside <div id="query-monitor-container"> using a shadow root, then moves the fallback nodes into the shadow tree.

That broke the existing test in three different ways:

• $I->see('Module', 'th') walks only the light DOM — by the time it runs, the <th> is in the shadow tree, so "no <th> found".
• The data-qm-href tab buttons no longer exist (tabs are <button role="tab"> inside the shadow DOM with no data-qm-href attribute, and they're behind the shadow boundary anyway).
• seeInPageSource() also won't work — WebDriver::getPageSource() returns the post-React serialized DOM, where the fallback nodes have already been moved out.

Caught by product-dev nightly CI (run 25669000209).

Approach

Use executeJS to run a synchronous XMLHttpRequest against the current URL inside the authenticated browser session. That gives us the raw server response (before any React mutation), which is what we actually want to verify — the three Altis-specific panel PHP outputters are wired up and emitting the expected markup. QM owns its own client-side rendering and is tested upstream.

Synchronous XHR is technically deprecated but still works in Chrome and avoids needing to thread session cookies into a separate PHP HTTP client.

Test plan

• composer dev-tools codecept run -p vendor/altis/dev-tools/tests/ -- acceptance DevToolsCest passes locally — 6 assertions across the three panels.

🤖 Generated with Claude Code

[johnbillion]

Query Monitor v4 mounts its UI in a React app inside a shadow DOM (#query-monitor-container) and moves the server-rendered panel HTML from <div id="query-monitor-fallbacks">

The server-rendered panel gets moved into the shadow DOM when a user clicks on the corresponding menu item, not when the QM component mounts. That should mean you can directly inspect the #qm-altis-config-container element without having to perform the ajax request as it's in the normal DOM with display:none applied until its menu item gets clicked.

[mikelittle]

Claude mentioned that Codeception can't see anything display:none either. And as it originally simulated a click to then check the panels, the move happened at that point.

[johnbillion]

Ah that's annoying

[vladislavhmn]

LGTM