chore: include child nodes when parsing snapshot (#34318)

packages/playwright-core/src/utils/isomorphic/ariaSnapshot.ts

@@ -180,8 +180,9 @@ export function parseAriaSnapshot(yaml: YamlLibrary, text: string, options: yaml
 
       // - role "name":
       //   - child
-      const valueIsSequence = value instanceof yaml.YAMLSeq ;
+      const valueIsSequence = value instanceof yaml.YAMLSeq;
       if (valueIsSequence) {
+        container.children.push(childNode);
         convertSeq(childNode, value as yamlTypes.YAMLSeq);
         continue;
       }

packages/trace-viewer/src/ui/inspectorTab.tsx

@@ -60,6 +60,7 @@ export const InspectorTab: React.FunctionComponent<{
     <div style={{ margin: '0 10px 10px', flex: 'auto' }}>
       <CodeMirrorWrapper
         text={highlightedElement.ariaSnapshot || ''}
+        language='yaml'
         wrapLines={false}
         highlight={ariaSnapshotErrors}
         onChange={onAriaEditorChange} />

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

@@ -670,3 +670,15 @@ test('should not unshift actual template text', async ({ page }) => {
     - heading "title" [level=1]
 - heading "title 2" [level=1]`);
 });
+
+test('should not match what is not matched', async ({ page }) => {
+  await page.setContent(`<p>Text</p>`);
+  const error = await expect(page.locator('body')).toMatchAriaSnapshot(`
+    - paragraph:
+      - button "bogus"
+  `).catch(e => e);
+  expect(stripAnsi(error.message)).toContain(`
+- - paragraph:
+-   - button "bogus"
++ - paragraph: Text`);
+});