test: add readiness checks to target page e2es before interacting with visualizations

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

@@ -11,6 +11,7 @@ export const TargetPageInjectedComponentSelectors = {
 export const TabStopShadowDomSelectors = {
  svg: 'svg',
  lines: 'line',
- ellipse: 'ellipse',
+ opaqueEllipse: 'ellipse:not([fill="transparent"])',
+ transparentEllipse: 'ellipse[fill="transparent"]',
  text: 'text',
 };

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

@@ -181,12 +181,18 @@ export class Page {
  });
  }
 
- public async getShadowRootOfSelector(selector: string): Promise<Puppeteer.ElementHandle<Element>> {
- return await this.screenshotOnError(async () =>
- (
- await this.underlyingPage.evaluateHandle(selectorInEval => document.querySelector(selectorInEval).shadowRoot, selector)
- ).asElement(),
- );
+ public async waitForShadowRootOfSelector(selector: string): Promise<Puppeteer.ElementHandle<Element>> {
+ return await this.screenshotOnError(async () => {
+ const shadowRootHandle = await this.underlyingPage.waitForFunction(
+ selectorInEval => {
+ const container = document.querySelector(selectorInEval);
+ return container == undefined ? undefined : container.shadowRoot;
+ },
+ { timeout: DEFAULT_PAGE_ELEMENT_WAIT_TIMEOUT_MS },
+ selector,
+ );
+ return shadowRootHandle.asElement();
+ });
  }
 
  public async clickSelector(selector: string): Promise<void> {

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

@@ -31,12 +31,25 @@ export class TargetPage extends Page {
  super(underlyingPage, options);
  }
 
- public async getShadowRoot(): Promise<ElementHandle<Element>> {
- return await this.getShadowRootOfSelector('#insights-shadow-host');
+ public async waitForSelectorInShadowRoot(
+ selector: string,
+ options?: Puppeteer.WaitForSelectorOptions,
+ ): Promise<Puppeteer.JSHandle<any>> {
+ const shadowRoot = await this.waitForShadowRoot();
+ return this.waitForDescendentSelector(shadowRoot, selector, options);
  }
 
- public async getShadowRootHtmlSnapshot(): Promise<Node> {
- const shadowRoot = await this.getShadowRoot();
+ public async clickSelectorInShadowRoot(selector: string): Promise<void> {
+ const shadowRoot = await this.waitForShadowRoot();
+ await this.clickDescendentSelector(shadowRoot, selector, { visible: true });
+ }
+
+ public async waitForShadowRoot(): Promise<ElementHandle<Element>> {
+ return await this.waitForShadowRootOfSelector('#insights-shadow-host');
+ }
+
+ public async waitForShadowRootHtmlSnapshot(): Promise<Node> {
+ const shadowRoot = await this.waitForShadowRoot();
  return await formatChildElementForSnapshot(shadowRoot, '#insights-shadow-container');
  }
 }

src/tests/end-to-end/tests/popup/adhoc-panel.test.ts

@@ -65,7 +65,7 @@ describe('Popup -> Ad-hoc tools', () => {
  await popupPage.enableToggleByAriaLabel(toggleAriaLabel);
 
  await targetPage.bringToFront();
- expect(await targetPage.getShadowRootHtmlSnapshot()).toMatchSnapshot();
+ expect(await targetPage.waitForShadowRootHtmlSnapshot()).toMatchSnapshot();
  },
  );
 });

src/tests/end-to-end/tests/target-page/issue-dialog.test.ts

@@ -31,9 +31,7 @@ describe('Target Page issue dialog', () => {
 
  await targetPage.bringToFront();
 
- const shadowRoot = await targetPage.getShadowRoot();
- await targetPage.clickDescendentSelector(shadowRoot, TargetPageInjectedComponentSelectors.failureLabel, { visible: true });
-
+ await targetPage.clickSelectorInShadowRoot(TargetPageInjectedComponentSelectors.failureLabel);
  await targetPage.waitForSelector(TargetPageInjectedComponentSelectors.issueDialog);
 
  const results = await scanForAccessibilityIssues(targetPage, TargetPageInjectedComponentSelectors.issueDialog);

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

@@ -1,14 +1,12 @@
 // 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 { TabStopShadowDomSelectors } 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', () => {
+describe('Tab stops visualization', () => {
  let browser: Browser;
  let targetPage: TargetPage;
  let popupPage: PopupPage;
@@ -24,36 +22,35 @@ describe('tabstop tests', () => {
  }
  });
 
- test('works when tabstop is triggered from adhoc panel', async () => {
+ it('should show the expected visuals in the target page after enabling from popup and tabbing through target page', async () => {
  popupPage = await browser.newPopupPage(targetPage);
  await popupPage.gotoAdhocPanel();
  await popupPage.enableToggleByAriaLabel('Tab stops');
 
  await targetPage.bringToFront();
+ await targetPage.waitForShadowRoot();
 
+ // Should highlight first element with a transparent circle
  await targetPage.keyPress('Tab');
+ await targetPage.waitForSelectorInShadowRoot(TabStopShadowDomSelectors.svg);
+ await targetPage.waitForSelectorInShadowRoot(TabStopShadowDomSelectors.transparentEllipse);
+
+ // Should highlight second element with a transparent circle and change first element's
+ // highlight to an opaque circle with a "1" in it, connected by a line
  await targetPage.keyPress('Tab');
+ await targetPage.waitForSelectorInShadowRoot(TabStopShadowDomSelectors.svg);
+ await targetPage.waitForSelectorInShadowRoot(TabStopShadowDomSelectors.transparentEllipse);
+ await targetPage.waitForSelectorInShadowRoot(TabStopShadowDomSelectors.opaqueEllipse);
+ await targetPage.waitForSelectorInShadowRoot(TabStopShadowDomSelectors.lines);
+ await targetPage.waitForSelectorInShadowRoot(TabStopShadowDomSelectors.text);
+
+ // Only 2 focusable elements on this test page, so should move focus to the browser chrome
+ // without changing the visualizations
  await targetPage.keyPress('Tab');
-
- const shadowRoot = await targetPage.getShadowRoot();
- await targetPage.waitForDescendentSelector(shadowRoot, TargetPageInjectedComponentSelectors.tabStopVisulizationStart, {
- visible: true,
- });
-
- await validateTabStopVisualizationOnTargetPage(shadowRoot);
+ await targetPage.waitForSelectorInShadowRoot(TabStopShadowDomSelectors.svg);
+ await targetPage.waitForSelectorInShadowRoot(TabStopShadowDomSelectors.transparentEllipse);
+ await targetPage.waitForSelectorInShadowRoot(TabStopShadowDomSelectors.opaqueEllipse);
+ await targetPage.waitForSelectorInShadowRoot(TabStopShadowDomSelectors.lines);
+ await targetPage.waitForSelectorInShadowRoot(TabStopShadowDomSelectors.text);
  });
-
- 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);
- }
 });

src/tests/end-to-end/tests/target-page/visualization-boxes.test.ts

@@ -31,10 +31,7 @@ describe('Target Page visualization boxes', () => {
  it.each(adhocTools)('for adhoc tool "%s" should pass accessibility validation', async adhocTool => {
  await popupPage.enableToggleByAriaLabel(adhocTool);
 
- const shadowRoot = await targetPage.getShadowRoot();
- await targetPage.waitForDescendentSelector(shadowRoot, TargetPageInjectedComponentSelectors.insightsVisualizationBox, {
- visible: true,
- });
+ await targetPage.waitForSelectorInShadowRoot(TargetPageInjectedComponentSelectors.insightsVisualizationBox, { visible: true });
 
  const results = await scanForAccessibilityIssues(targetPage, TargetPageInjectedComponentSelectors.insightsRootContainer);
  expect(results).toHaveLength(0);