chore: treat input value as text in templates (#33388)

packages/html-reporter/src/headerView.spec.tsx

@@ -33,6 +33,11 @@ test('should render counters', async ({ mount }) => {
   await expect(component.locator('a', { hasText: 'Failed' }).locator('.counter')).toHaveText('31');
   await expect(component.locator('a', { hasText: 'Flaky' }).locator('.counter')).toHaveText('17');
   await expect(component.locator('a', { hasText: 'Skipped' }).locator('.counter')).toHaveText('10');
+  await expect(component).toMatchAriaSnapshot(`
+    - navigation:
+      - link "All 90"
+      - text: Passed 42 Failed 31 Flaky 17 Skipped 10
+  `);
 });
 
 test('should toggle filters', async ({ page, mount }) => {

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

@@ -141,6 +141,9 @@ function toAriaNode(element: Element): AriaNode | null {
   if (roleUtils.kAriaSelectedRoles.includes(role))
     result.selected = roleUtils.getAriaSelected(element);
 
+  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement)
+    result.children = [element.value];
+
   return result;
 }
 

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

@@ -411,3 +411,13 @@ it('should ignore presentation and none roles', async ({ page }) => {
     - list: hello world
   `);
 });
+
+it('should treat input value as text in templates', async ({ page }) => {
+  await page.setContent(`
+    <input value='hello world'>
+  `);
+
+  await checkAndMatchSnapshot(page.locator('body'), `
+    - textbox: hello world
+  `);
+});

tests/playwright-test/update-aria-snapshot.spec.ts

@@ -270,3 +270,32 @@ test('should update multiple files', async ({ runInlineTest }, testInfo) => {
      
 `);
 });
+
+test('should generate baseline for input values', async ({ runInlineTest }, testInfo) => {
+  const result = await runInlineTest({
+    'a.spec.ts': `
+      import { test, expect } from '@playwright/test';
+      test('test', async ({ page }) => {
+        await page.setContent(\`<input value="hello world">\`);
+        await expect(page.locator('body')).toMatchAriaSnapshot(\`\`);
+      });
+    `
+  });
+
+  expect(result.exitCode).toBe(0);
+  const patchPath = testInfo.outputPath('test-results/rebaselines.patch');
+  const data = fs.readFileSync(patchPath, 'utf-8');
+  expect(data).toBe(`--- a/a.spec.ts
++++ b/a.spec.ts
+@@ -2,6 +2,8 @@
+       import { test, expect } from '@playwright/test';
+       test('test', async ({ page }) => {
+         await page.setContent(\`<input value="hello world">\`);
+-        await expect(page.locator('body')).toMatchAriaSnapshot(\`\`);
++        await expect(page.locator('body')).toMatchAriaSnapshot(\`
++          - textbox: hello world
++        \`);
+       });
+     
+`);
+});