+ `);
+
+ // Wait for autofocus to take effect
+ await page.waitForFunction(() => document.activeElement?.id === 'btn2');
+
+ const snapshot = await snapshotForAI(page);
+
+ expect(snapshot).toContainYaml(`
+ - generic [ref=e1]:
+ - button "Button 1" [ref=e2]
+ - button "Button 2" [active] [ref=e3]
+ - generic [ref=e4]: Not focusable
+ `);
+});
+
+it('should update active element on focus', async ({ page }) => {
+ await page.setContent(`
+
+
+ `);
+
+ // Initially there shouldn't be an active element on the inputs
+ const initialSnapshot = await snapshotForAI(page);
+ expect(initialSnapshot).toContainYaml(`
+ - generic [active] [ref=e1]:
+ - textbox "First input" [ref=e2]
+ - textbox "Second input" [ref=e3]
+ `);
+
+ // Focus the second input
+ await page.locator('#input2').focus();
+
+ // After focus, the second input should be active
+ const afterFocusSnapshot = await snapshotForAI(page);
+
+ expect(afterFocusSnapshot).toContainYaml(`
+ - generic [ref=e1]:
+ - textbox "First input" [ref=e2]
+ - textbox "Second input" [active] [ref=e3]
+ `);
+});
+
+it('should mark iframe as active when it contains focused element', async ({ page }) => {
+ // Create a simple HTML file for the iframe
+ await page.setContent(`
+
+
+ `);
+
+ // Test 1: Focus the input inside the iframe
+ await page.frameLocator('iframe').locator('#iframe-input').focus();
+ const inputInIframeFocusedSnapshot = await snapshotForAI(page);
+
+ // The iframe should be marked as active when it contains a focused element
+ expect(inputInIframeFocusedSnapshot).toContain('iframe [active]');
+
+ // Also check that the input element inside the iframe is active
+ const iframeSnapshot = await page.frameLocator('iframe').locator('body').ariaSnapshot();
+ expect(iframeSnapshot).toContain('textbox "Input in iframe" [active]');
+});
diff --git a/tests/page/to-match-aria-snapshot-active.spec.ts b/tests/page/to-match-aria-snapshot-active.spec.ts
new file mode 100644
index 0000000000000..bfde62b51c605
--- /dev/null
+++ b/tests/page/to-match-aria-snapshot-active.spec.ts
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { test, expect } from './pageTest';
+
+test('should match active element', async ({ page }) => {
+ await page.setContent(`
+
+
+ `);
+
+ // Wait for autofocus to take effect
+ await page.waitForFunction(() => document.activeElement?.id === 'btn2');
+
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - button "Button 1"
+ - button "Button 2" [active]
+ `);
+});
+
+test('should match active element after focus', async ({ page }) => {
+ await page.setContent(`
+
+
+ `);
+
+ // Focus the second input
+ await page.locator('#input2').focus();
+
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - textbox "First input"
+ - textbox "Second input" [active]
+ `);
+});
+
+test('should match active iframe', async ({ page }) => {
+ await page.setContent(`
+
+
+ `);
+
+ // Focus the input inside the iframe
+ await page.frameLocator('iframe').locator('#iframe-input').focus();
+
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - textbox "Regular input"
+ - iframe [active]
+ `);
+
+ // Also check that the input element inside the iframe is active
+ await expect(page.frameLocator('iframe').locator('body')).toMatchAriaSnapshot(`
+ - textbox "Input in iframe" [active]
+ `);
+});
\ No newline at end of file