chore: fix webkit visibility check in aria matcher (#33102)

packages/playwright-core/src/server/injected/ariaSnapshot.ts

@@ -16,7 +16,7 @@
 
 import { escapeWithQuotes } from '@isomorphic/stringUtils';
 import { beginAriaCaches, endAriaCaches, getAriaRole, getElementAccessibleName, isElementIgnoredForAria } from './roleUtils';
-import { isElementVisible } from './domUtils';
+import { isElementVisible, isElementStyleVisibilityVisible } from './domUtils';
 
 type AriaNode = {
   role: string;
@@ -59,11 +59,7 @@ export function generateAriaTree(rootElement: Element): AriaNode {
       return;
 
     const visible = isElementVisible(element);
-    const hasVisibleChildren = element.checkVisibility({
-      opacityProperty: true,
-      visibilityProperty: true,
-      contentVisibilityAuto: true
-    });
+    const hasVisibleChildren = isElementStyleVisibilityVisible(element);
 
     if (!hasVisibleChildren)
       return;

tests/page/to-match-aria-snapshot.spec.ts

@@ -94,8 +94,20 @@ test('should allow text nodes', async ({ page }) => {
   `);
 });
 
+test('details visibility', async ({ page, browserName }) => {
+  await page.setContent(`
+    <details>
+      <summary>Summary</summary>
+      <div>Details</div>
+    </details>
+  `);
+
+  await expect(page.locator('body')).toMatchAriaSnapshot(`
+    - group: Summary
+  `);
+});
+
 test('integration test', async ({ page, browserName }) => {
-  test.fixme(browserName === 'webkit');
   await page.setContent(`
     <h1>Microsoft</h1>
     <div>Open source projects and samples from Microsoft</div>