snapshot tests, cursor fix

Author: dgozman

packages/injected/src/ariaSnapshot.ts

@@ -698,5 +698,5 @@ function textContributesInfo(node: AriaNode, text: string): boolean {
 }
 
 function hasPointerCursor(ariaNode: AriaNode): boolean {
-  return ariaNode.box.style?.cursor === 'pointer';
+  return ariaNode.box.cursor === 'pointer';
 }

packages/injected/src/domUtils.ts

@@ -112,28 +112,29 @@ export type Box = {
   visible: boolean;
   inline: boolean;
   rect?: DOMRect;
-  style?: CSSStyleDeclaration;
+  cursor?: CSSStyleDeclaration['cursor'];
 };
 
 export function computeBox(element: Element): Box {
   // Note: this logic should be similar to waitForDisplayedAtStablePosition() to avoid surprises.
   const style = getElementComputedStyle(element);
   if (!style)
     return { visible: true, inline: false };
+  const cursor = style.cursor;
   if (style.display === 'contents') {
     // display:contents is not rendered itself, but its child nodes are.
     for (let child = element.firstChild; child; child = child.nextSibling) {
       if (child.nodeType === 1 /* Node.ELEMENT_NODE */ && isElementVisible(child as Element))
-        return { visible: true, inline: false, style };
+        return { visible: true, inline: false, cursor };
       if (child.nodeType === 3 /* Node.TEXT_NODE */ && isVisibleTextNode(child as Text))
-        return { visible: true, inline: true, style };
+        return { visible: true, inline: true, cursor };
     }
-    return { visible: false, inline: false, style };
+    return { visible: false, inline: false, cursor };
   }
   if (!isElementStyleVisibilityVisible(element, style))
-    return { style, visible: false, inline: false };
+    return { cursor, visible: false, inline: false };
   const rect = element.getBoundingClientRect();
-  return { rect, style, visible: rect.width > 0 && rect.height > 0, inline: style.display === 'inline' };
+  return { rect, cursor, visible: rect.width > 0 && rect.height > 0, inline: style.display === 'inline' };
 }
 
 export function isElementVisible(element: Element): boolean {

packages/playwright/src/mcp/browser/tab.ts

@@ -62,7 +62,6 @@ export class Tab extends EventEmitter<TabEventsInterface> {
     this.context = context;
     this.page = page as Page;
     this._onPageClose = onPageClose;
-    page.on('console', console.error);
     page.on('console', event => this._handleConsoleMessage(messageToConsoleMessage(event)));
     page.on('pageerror', error => this._handleConsoleMessage(pageErrorToConsoleMessage(error)));
     page.on('request', request => this._requests.add(request));

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

@@ -19,7 +19,7 @@ import { asLocator } from 'playwright-core/lib/utils';
 
 import { test as it, expect, unshift } from './pageTest';
 
-function snapshotForAI(page: any, options?: { timeout?: number }): Promise<string> {
+function snapshotForAI(page: any, options?: { timeout?: number, mode?: 'full' | 'incremental', track?: string }): Promise<string> {
   return page._snapshotForAI(options);
 }
 
@@ -448,3 +448,149 @@ it('should not remove generic nodes with title', async ({ page }) => {
     - generic "Element title" [ref=e2]
   `);
 });
+
+it('should create incremental snapshots on multiple tracks', async ({ page }) => {
+  await page.setContent(`<ul><li><button>a button</button></li><li><span>a span</span></li><li id=hidden-li style="display:none">some text</li></ul>`);
+
+  expect(await snapshotForAI(page, { track: 'first', mode: 'incremental' })).toContainYaml(`
+    - list [ref=e2]:
+      - listitem [ref=e3]:
+        - button "a button" [ref=e4]
+      - listitem [ref=e5]: a span
+  `);
+  expect(await snapshotForAI(page, { track: 'second', mode: 'incremental' })).toContainYaml(`
+    - list [ref=e2]:
+      - listitem [ref=e3]:
+        - button "a button" [ref=e4]
+      - listitem [ref=e5]: a span
+  `);
+  expect(await snapshotForAI(page, { track: 'first', mode: 'incremental' })).toContainYaml(`
+    - ref=e2 [unchanged]
+  `);
+
+  await page.evaluate(() => {
+    document.querySelector('span').textContent = 'changed span';
+    document.getElementById('hidden-li').style.display = 'inline';
+  });
+  expect(await snapshotForAI(page, { track: 'first', mode: 'incremental' })).toContainYaml(`
+    - list [ref=e2]:
+      - ref=e3 [unchanged]
+      - listitem [ref=e5]: changed span
+      - listitem [ref=e6]: some text
+  `);
+
+  await page.evaluate(() => {
+    document.querySelector('span').textContent = 'a span';
+    document.getElementById('hidden-li').style.display = 'none';
+  });
+  expect(await snapshotForAI(page, { track: 'first', mode: 'incremental' })).toContainYaml(`
+    - list [ref=e2]:
+      - ref=e3 [unchanged]
+      - listitem [ref=e5]: a span
+  `);
+  expect(await snapshotForAI(page, { track: 'second', mode: 'incremental' })).toContainYaml(`
+    - ref=e2 [unchanged]
+  `);
+
+  expect(await snapshotForAI(page, { track: 'second', mode: 'full' })).toContainYaml(`
+    - list [ref=e2]:
+      - listitem [ref=e3]:
+        - button "a button" [ref=e4]
+      - listitem [ref=e5]: a span
+  `);
+});
+
+it('should create incremental snapshot for attribute change', async ({ page }) => {
+  await page.setContent(`<button>a button</button>`);
+  await page.evaluate(() => document.querySelector('button').focus());
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - button "a button" [active] [ref=e2]
+  `);
+
+  await page.evaluate(() => document.querySelector('button').blur());
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - button "a button" [ref=e2]
+  `);
+});
+
+it('should create incremental snapshot for child removal', async ({ page }) => {
+  await page.setContent(`<li><button>a button</button><span>some text</span></li>`);
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - listitem [ref=e2]:
+      - button "a button" [ref=e3]
+      - text: some text
+  `);
+
+  await page.evaluate(() => document.querySelector('span').remove());
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - listitem [ref=e2]:
+      - ref=e3 [unchanged]
+  `);
+});
+
+it('should create incremental snapshot for child addition', async ({ page }) => {
+  await page.setContent(`<li><button>a button</button><span style="display:none">some text</span></li>`);
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - listitem [ref=e2]:
+      - button "a button" [ref=e3]
+  `);
+
+  await page.evaluate(() => document.querySelector('span').style.display = 'inline');
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - listitem [ref=e2]:
+      - ref=e3 [unchanged]
+      - text: some text
+  `);
+});
+
+it('should create incremental snapshot for prop change', async ({ page }) => {
+  await page.setContent(`<a href="about:blank">a link</a>`);
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - link "a link" [ref=e2] [cursor=pointer]:
+      - /url: about:blank
+  `);
+
+  await page.evaluate(() => document.querySelector('a').setAttribute('href', 'https://playwright.dev'));
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - link "a link" [ref=e2] [cursor=pointer]:
+      - /url: https://playwright.dev
+  `);
+});
+
+it('should create incremental snapshot for cursor change', async ({ page }) => {
+  await page.setContent(`<a href="about:blank">a link</a>`);
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - link "a link" [ref=e2] [cursor=pointer]:
+      - /url: about:blank
+  `);
+
+  await page.evaluate(() => document.querySelector('a').style.cursor = 'default');
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - link "a link" [ref=e2]:
+      - /url: about:blank
+  `);
+});
+
+it('should create incremental snapshot for name change', async ({ page }) => {
+  await page.setContent(`<button><span>a button</span></button>`);
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - button "a button" [ref=e2]
+  `);
+
+  await page.evaluate(() => document.querySelector('span').textContent = 'new button');
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - button "new button" [ref=e3]
+  `);
+});
+
+it('should create incremental snapshot for text change', async ({ page }) => {
+  await page.setContent(`<li><span>an item</span></li>`);
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - listitem [ref=e2]: an item
+  `);
+
+  await page.evaluate(() => document.querySelector('span').textContent = 'new text');
+  expect(await snapshotForAI(page, { mode: 'incremental' })).toContainYaml(`
+    - listitem [ref=e2]: new text
+  `);
+});