test: migrate a11y snapshot tests to ax helper assertions

Replace raw snapshot property access (deep.equal, children?.find,
children?.filter) with ax helper assertions (axContainRole, axContainQuery,
axContainName, axTreeFocusedNode, querySnapshot, querySnapshotAll).

This makes tests resilient to snapshot format differences between
browser automation backends (Puppeteer includes extra properties like
backendNodeId, loaderId that Playwright did not).

Also fixes chai `.not` flag bleeding through `.and` chaining in
combobox-controller tests by splitting into separate expect() calls.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: bennypowers

core/pfe-core/controllers/test/combobox-controller.spec.ts

@@ -176,10 +176,9 @@ abstract class TestCombobox extends ReactiveElement {
             });
 
             it('collapses the listbox', async function() {
-              expect(await a11ySnapshot())
-                  .to.not.axContainRole('listbox')
-                  .and
-                  .to.axContainQuery({ role: 'combobox', expanded: false });
+              const snapshot = await a11ySnapshot();
+              expect(snapshot).to.not.axContainRole('listbox');
+              expect(snapshot).to.axContainQuery({ role: 'combobox', expanded: false });
             });
           });
         });
@@ -189,10 +188,9 @@ abstract class TestCombobox extends ReactiveElement {
           beforeEach(updateComplete);
 
           it('collapses the listbox', async function() {
-            expect(await a11ySnapshot())
-                .to.not.axContainRole('listbox')
-                .and
-                .to.axContainQuery({ role: 'combobox', expanded: false });
+            const snapshot = await a11ySnapshot();
+            expect(snapshot).to.not.axContainRole('listbox');
+            expect(snapshot).to.axContainQuery({ role: 'combobox', expanded: false });
           });
 
           it('maintains DOM focus on the combobox', async function() {

elements/pf-v5-back-to-top/test/pf-back-to-top.spec.ts

@@ -5,10 +5,7 @@ import { setViewport, sendKeys } from '@web/test-runner-commands';
 import { allUpdates } from '@patternfly/pfe-tools/test/utils.js';
 
 import { PfV5BackToTop } from '../pf-v5-back-to-top.js';
-import { type A11yTreeSnapshot, a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
-
-const takeProps = (props: string[]) => (obj: object) =>
-  Object.fromEntries(Object.entries(obj).filter(([k]) => props.includes(k)));
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
 
 describe('<pf-v5-back-to-top>', function() {
   it('imperatively instantiates', function() {
@@ -33,7 +30,6 @@ describe('<pf-v5-back-to-top>', function() {
 
   describe('when rendered in a viewport with a height smaller then content length', function() {
     let element: PfV5BackToTop;
-    let snapshot: A11yTreeSnapshot;
 
     beforeEach(async function() {
       await setViewport({ width: 320, height: 640 });
@@ -46,30 +42,29 @@ describe('<pf-v5-back-to-top>', function() {
         </div>
       `);
       element = container.querySelector('pf-v5-back-to-top')!;
-      snapshot = await a11ySnapshot();
-
       await allUpdates(element);
     });
 
-    it('should be hidden on init', function() {
-      const { children } = snapshot;
-      expect(children).to.be.undefined;
+    it('should be hidden on init', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot).to.not.axContainRole('link');
     });
 
-    it('should not be accessible', function() {
-      expect(snapshot.children).to.be.undefined;
+    it('should not be accessible', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot).to.not.axContainName('Back to top');
     });
 
     describe('when scrolled 401px', function() {
       beforeEach(async function() {
         window.scrollTo({ top: 401, behavior: 'instant' });
         await nextFrame();
         await allUpdates(element);
-        snapshot = await a11ySnapshot();
       });
 
-      it('should be visible', function() {
-        expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
+      it('should be visible', async function() {
+        expect(await a11ySnapshot())
+            .to.axContainQuery({ role: 'link', name: 'Back to top' });
       });
 
       it('should be accessible', async function() {
@@ -95,11 +90,11 @@ describe('<pf-v5-back-to-top>', function() {
         await nextFrame();
         element.alwaysVisible = true;
         await allUpdates(element);
-        snapshot = await a11ySnapshot();
       });
 
-      it('should be visible', function() {
-        expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
+      it('should be visible', async function() {
+        expect(await a11ySnapshot())
+            .to.axContainQuery({ role: 'link', name: 'Back to top' });
       });
 
       it('should be accessible', async function() {
@@ -122,32 +117,29 @@ describe('<pf-v5-back-to-top>', function() {
       beforeEach(async function() {
         element.scrollDistance = 1000;
         await allUpdates(element);
-        snapshot = await a11ySnapshot();
       });
 
-      it('should be hidden', function() {
-        const { children } = snapshot;
-        expect(children).to.be.undefined;
+      it('should be hidden', async function() {
+        expect(await a11ySnapshot()).to.not.axContainRole('link');
       });
 
       describe('when scrolled 1001px', function() {
         beforeEach(async function() {
           window.scrollTo({ top: 1001, behavior: 'instant' });
           await nextFrame();
           await allUpdates(element);
-          snapshot = await a11ySnapshot();
         });
 
-        it('should be visible', function() {
-          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
+        it('should be visible', async function() {
+          expect(await a11ySnapshot())
+              .to.axContainQuery({ role: 'link', name: 'Back to top' });
         });
       });
     });
   });
 
   describe('when rendered in an element with an overflowed height', function() {
     let element: PfV5BackToTop;
-    let snapshot: A11yTreeSnapshot;
 
     beforeEach(async function() {
       window.scrollTo({ top: 0, behavior: 'instant' });
@@ -160,13 +152,11 @@ describe('<pf-v5-back-to-top>', function() {
       `);
       element = container.querySelector('pf-v5-back-to-top')!;
       await allUpdates(element);
-
-      snapshot = await a11ySnapshot({ selector: 'pf-v5-back-to-top' });
     });
 
-    it('should be hidden on init', function() {
-      const { children } = snapshot;
-      expect(children).to.be.undefined;
+    it('should be hidden on init', async function() {
+      const snapshot = await a11ySnapshot({ selector: 'pf-v5-back-to-top' });
+      expect(snapshot?.children).to.not.be.ok;
     });
 
     describe('when scrolled 401px', function() {
@@ -176,18 +166,17 @@ describe('<pf-v5-back-to-top>', function() {
         scrollableElement.dispatchEvent(new Event('scroll'));
         await nextFrame();
         await allUpdates(element);
-        snapshot = await a11ySnapshot();
       });
 
-      it('should be visible', function() {
-        expect(snapshot.children?.at(0)?.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
+      it('should be visible', async function() {
+        expect(await a11ySnapshot())
+            .to.axContainQuery({ role: 'link', name: 'Back to top' });
       });
     });
   });
 
   describe('when no text is provided', function() {
     let element: PfV5BackToTop;
-    let snapshot: A11yTreeSnapshot;
 
     describe('as a link', function() {
       beforeEach(async function() {
@@ -209,11 +198,11 @@ describe('<pf-v5-back-to-top>', function() {
           window.scrollTo({ top: 401, behavior: 'instant' });
           await nextFrame();
           await allUpdates(element);
-          snapshot = await a11ySnapshot();
         });
 
-        it('should have a label of "Back to top"', function() {
-          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
+        it('should have a label of "Back to top"', async function() {
+          expect(await a11ySnapshot())
+              .to.axContainQuery({ role: 'link', name: 'Back to top' });
         });
       });
     });
@@ -238,19 +227,18 @@ describe('<pf-v5-back-to-top>', function() {
           window.scrollTo({ top: 401, behavior: 'instant' });
           await nextFrame();
           await allUpdates(element);
-          snapshot = await a11ySnapshot();
         });
 
-        it('should have a label of "Back to top"', function() {
-          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'button', name: 'Back to top' }]);
+        it('should have a label of "Back to top"', async function() {
+          expect(await a11ySnapshot())
+              .to.axContainQuery({ role: 'button', name: 'Back to top' });
         });
       });
     });
   });
 
   describe('when a label is provided', function() {
     let element: PfV5BackToTop;
-    let snapshot: A11yTreeSnapshot;
 
     describe('as a link', function() {
       beforeEach(async function() {
@@ -272,11 +260,11 @@ describe('<pf-v5-back-to-top>', function() {
           window.scrollTo({ top: 401, behavior: 'instant' });
           await nextFrame();
           await allUpdates(element);
-          snapshot = await a11ySnapshot();
         });
 
-        it('should have a label of "Return to top"', function() {
-          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Return to top' }]);
+        it('should have a label of "Return to top"', async function() {
+          expect(await a11ySnapshot())
+              .to.axContainQuery({ role: 'link', name: 'Return to top' });
         });
       });
     });
@@ -301,11 +289,11 @@ describe('<pf-v5-back-to-top>', function() {
           window.scrollTo({ top: 401, behavior: 'instant' });
           await nextFrame();
           await allUpdates(element);
-          snapshot = await a11ySnapshot();
         });
 
-        it('should have a label of "Return to top"', function() {
-          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'button', name: 'Return to top' }]);
+        it('should have a label of "Return to top"', async function() {
+          expect(await a11ySnapshot())
+              .to.axContainQuery({ role: 'button', name: 'Return to top' });
         });
       });
     });

elements/pf-v5-chip/test/pf-chip-group.spec.ts

@@ -71,7 +71,7 @@ describe('<pf-v5-chip-group>', async function() {
           beforeEach(updateComplete);
           it('should show all chips', async function() {
             const snapshot = await a11ySnapshot();
-            expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(4);
+            expect(querySnapshotAll(snapshot, { name: /^Chip/ })).to.have.length(4);
           });
           it('should show collapse button', async function() {
             const snapshot = await a11ySnapshot();
@@ -104,11 +104,8 @@ describe('<pf-v5-chip-group>', async function() {
 
     beforeEach(updateComplete);
     it('should have close button', async function() {
-      const snapshot = await a11ySnapshot();
-      const last = snapshot.children?.at(-1);
-      expect(last?.name).to.equal('Close');
-      expect(last?.role).to.equal('button');
-      expect(last?.description).to.not.be.ok;
+      expect(await a11ySnapshot())
+          .to.axContainQuery({ role: 'button', name: 'Close' });
     });
 
     describe('clicking close button', function() {
@@ -118,7 +115,7 @@ describe('<pf-v5-chip-group>', async function() {
       beforeEach(updateComplete);
       it('should remove element', async function() {
         const snapshot = await a11ySnapshot();
-        expect(snapshot.children).to.not.be.ok;
+        expect(snapshot).to.not.axContainRole('button');
       });
     });
   });
@@ -146,8 +143,7 @@ describe('<pf-v5-chip-group>', async function() {
     });
 
     it('has accessible label', function() {
-      const [offscreen] = snapshot.children!;
-      expect(offscreen?.name).to.equal('My Chip Group');
+      expect(snapshot).to.axContainName('My Chip Group');
     });
 
     it('is accessible', async function() {
@@ -185,7 +181,7 @@ describe('<pf-v5-chip-group>', async function() {
     });
     it('only 2 chips should be visible', async function() {
       const snapshot = await a11ySnapshot();
-      expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(2);
+      expect(querySnapshotAll(snapshot, { name: /^Chip/ })).to.have.length(2);
     });
   });
 
@@ -206,7 +202,7 @@ describe('<pf-v5-chip-group>', async function() {
 
     it('all 4 chips should be visible', async function() {
       const snapshot = await a11ySnapshot();
-      expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(4);
+      expect(querySnapshotAll(snapshot, { name: /^Chip/ })).to.have.length(4);
     });
 
     describe('keyboard navigating with arrow keys to third chip and pressing enter', function() {
@@ -218,7 +214,7 @@ describe('<pf-v5-chip-group>', async function() {
 
       it('should remove third chip', async function() {
         const snapshot = await a11ySnapshot();
-        expect(snapshot.children?.find(x => x.name === 'Chip 3')).to.not.be.ok;
+        expect(snapshot).to.not.axContainName('Chip 3');
       });
 
       it('should focus on close button', async function() {

elements/pf-v5-chip/test/pf-chip.spec.ts

@@ -3,7 +3,7 @@ import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 import { PfV5Chip } from '../pf-v5-chip.js';
 import { sendKeys } from '@web/test-runner-commands';
 
-import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { a11ySnapshot, querySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
 import { clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';
 
 
@@ -47,17 +47,17 @@ describe('<pf-v5-chip>', async function() {
       beforeEach(() => element.focus());
       it('should focus', async function() {
         const snapshot = await a11ySnapshot();
-        expect(snapshot.children?.at(0)?.name).to.equal(element.accessibleCloseLabel);
-        expect(snapshot.children?.at(0)?.focused).to.be.true;
+        const focused = querySnapshot(snapshot, { focused: true });
+        expect(focused).to.have.property('name', element.accessibleCloseLabel);
       });
     });
 
     describe('pressing Tab', function() {
       beforeEach(press('Tab'));
       it('should focus', async function() {
         const snapshot = await a11ySnapshot();
-        expect(snapshot.children?.at(0)?.name).to.equal(element.accessibleCloseLabel);
-        expect(snapshot.children?.at(0)?.focused).to.be.true;
+        const focused = querySnapshot(snapshot, { focused: true });
+        expect(focused).to.have.property('name', element.accessibleCloseLabel);
       });
 
       describe('pressing Enter', async function() {
@@ -85,7 +85,7 @@ describe('<pf-v5-chip>', async function() {
 
     it('should not have a close button', async function() {
       const snapshot = await a11ySnapshot();
-      expect(snapshot.children?.find(x => x.name === 'Close')).to.not.be.ok;
+      expect(snapshot).to.not.axContainName('Close');
     });
 
     describe('calling focus', function() {
@@ -133,7 +133,7 @@ describe('<pf-v5-chip>', async function() {
 
     it('should not have a button', async function() {
       const snapshot = await a11ySnapshot();
-      expect(snapshot.children).to.be.undefined;
+      expect(snapshot).to.not.axContainRole('button');
     });
   });
 });