test: add end-to-end test to verify tab stops visualization works (#990)

- adds a e2e test for validating `tabstops` visualization on the target page when tabstops are started using adhoc tools.

.gitignore

@@ -7,3 +7,5 @@
 *.scss.d.ts
 # Dependency directories
 node_modules/
+.DS_STORE
+yarn-error.log

src/tests/end-to-end/common/element-identifiers/target-page-selectors.ts

@@ -5,4 +5,12 @@ export const TargetPageInjectedComponentSelectors = {
     failureLabel: '.failure-label',
     issueDialog: '.insights-dialog-main-container',
     insightsVisualizationBox: '.insights-highlight-container',
+    tabStopVisulizationStart: '.insights-tab-stops',
+};
+
+export const TabStopShadowDomSelectors = {
+    svg: 'svg',
+    lines: 'line',
+    ellipse: 'ellipse',
+    text: 'text',
 };

src/tests/end-to-end/common/page-controllers/page.ts

@@ -95,7 +95,7 @@ export class Page {
         return await this.screenshotOnError(async () => await this.underlyingPage.evaluate(fn, ...args));
     }
 
-    public async getMatchingElements<T>(selector: string, elementProperty: keyof Element): Promise<T[]> {
+    public async getMatchingElements<T>(selector: string, elementProperty?: keyof Element): Promise<T[]> {
         return await this.screenshotOnError(
             async () =>
                 await this.evaluate(
@@ -243,7 +243,9 @@ export class Page {
     }
 
     public async keyPress(key: string): Promise<void> {
-        await this.underlyingPage.keyboard.press(key);
+        await this.screenshotOnError(async () => {
+            await this.underlyingPage.keyboard.press(key);
+        });
     }
 
     public async getOuterHTMLOfSelector(selector: string): Promise<string> {

src/tests/end-to-end/tests/target-page/tabstop.test.ts

@@ -0,0 +1,59 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+import { ElementHandle } from 'puppeteer';
+
+import { Browser } from '../../common/browser';
+import { launchBrowser } from '../../common/browser-factory';
+import { TabStopShadowDomSelectors, TargetPageInjectedComponentSelectors } from '../../common/element-identifiers/target-page-selectors';
+import { PopupPage } from '../../common/page-controllers/popup-page';
+import { TargetPage } from '../../common/page-controllers/target-page';
+
+describe('tabstop tests', () => {
+    let browser: Browser;
+    let targetPage: TargetPage;
+    let popupPage: PopupPage;
+
+    beforeEach(async () => {
+        browser = await launchBrowser({ suppressFirstTimeDialog: true });
+        targetPage = await browser.newTargetPage({ testResourcePath: 'native-widgets/input-type-radio.html' });
+    });
+
+    afterEach(async () => {
+        if (browser) {
+            await browser.close();
+        }
+    });
+
+    test('works when tabstop is triggered from adhoc panel', async () => {
+        popupPage = await browser.newPopupPage(targetPage);
+        await popupPage.gotoAdhocPanel();
+        await popupPage.enableToggleByAriaLabel('Tab stops');
+
+        await targetPage.bringToFront();
+
+        await targetPage.keyPress('Tab');
+        await targetPage.keyPress('Tab');
+        await targetPage.keyPress('Tab');
+
+        const shadowRoot = await targetPage.getShadowRoot();
+        await targetPage.waitForDescendentSelector(shadowRoot, TargetPageInjectedComponentSelectors.tabStopVisulizationStart, {
+            visible: true,
+        });
+
+        await validateTabStopVisualizationOnTargetPage(shadowRoot);
+    });
+
+    async function validateTabStopVisualizationOnTargetPage(shadowRoot: ElementHandle<Element>): Promise<void> {
+        const svgs = await shadowRoot.$$(TabStopShadowDomSelectors.svg);
+        const ellipses = await shadowRoot.$$(TabStopShadowDomSelectors.ellipse);
+        const lines = await shadowRoot.$$(TabStopShadowDomSelectors.lines);
+        const texts = await shadowRoot.$$(TabStopShadowDomSelectors.text);
+
+        // 3 tabs produce 1 svg, 2 ellipses, 1 texts and 1 line between them
+
+        expect(svgs).toHaveLength(1);
+        expect(ellipses).toHaveLength(2);
+        expect(lines).toHaveLength(1);
+        expect(texts).toHaveLength(1);
+    }
+});