Migrate test/e2e/elements/accessibility-pane_test.ts

Fixed: 416404283
Change-Id: I9d9f9f45adde9bec67cae4df9be35a7dfe62892b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6718829
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>
Auto-Submit: Liviu Rau <[email protected]>

Author: Liviu Rau

test/e2e/elements/BUILD.gn

@@ -6,7 +6,6 @@ import("../../../scripts/build/typescript/typescript.gni")
 
 node_ts_library("elements") {
   sources = [
-    "accessibility-pane_test.ts",
     "add-view-transition-pseudo-styles_test.ts",
     "at-function-sections_test.ts",
     "at-property-sections_test.ts",

test/e2e/elements/accessibility-pane_test.ts

@@ -11,7 +11,6 @@ import {
   $,
   $$,
   click,
-  clickElement,
   clickMoreTabsButton,
   drainFrontendTaskQueue,
   getTextContent,
@@ -20,7 +19,6 @@ import {
   summonSearchBox,
   typeText,
   waitFor,
-  waitForAria,
   waitForFunction,
 } from '../../shared/helper.js';
 import {getBrowserAndPagesWrappers} from '../../shared/non_hosted_wrappers.js';
@@ -1050,26 +1048,31 @@ export const assertSelectedNodeClasses =
   }
 };
 
-export const toggleAccessibilityPane = async () => {
-  let a11yPane = await $('Accessibility', undefined, 'aria');
+export const toggleAccessibilityPane = async (devToolsPage: DevToolsPage) => {
+  let a11yPane = await devToolsPage.$('Accessibility', undefined, 'aria');
   if (!a11yPane) {
-    const elementsPanel = await waitForAria('Elements panel');
-    await clickMoreTabsButton(elementsPanel);
-    a11yPane = await waitForAria('Accessibility');
-    await expectVeEvents([
-      veClick('Panel: elements > Toolbar: sidebar > DropDown: more-tabs'),
-      veImpressionsUnder(
-          'Panel: elements > Toolbar: sidebar > DropDown: more-tabs',
-          [veImpression('Menu', undefined, [veImpression('Action', 'accessibility.view')])]),
-    ]);
+    const elementsPanel = await devToolsPage.waitForAria('Elements panel');
+    await devToolsPage.clickMoreTabsButton(elementsPanel);
+    a11yPane = await devToolsPage.waitForAria('Accessibility');
+    await expectVeEvents(
+        [
+          veClick('Panel: elements > Toolbar: sidebar > DropDown: more-tabs'),
+          veImpressionsUnder(
+              'Panel: elements > Toolbar: sidebar > DropDown: more-tabs',
+              [veImpression('Menu', undefined, [veImpression('Action', 'accessibility.view')])]),
+        ],
+        undefined, devToolsPage);
   }
-  await clickElement(a11yPane);
-  await waitFor('.source-order-checkbox');
-  await expectVeEvents([
-    veClick('Panel: elements > Toolbar: sidebar > DropDown: more-tabs > Menu > Action: accessibility.view'),
-    veImpressionsUnder('Panel: elements > Toolbar: sidebar', [veImpression('PanelTabHeader', 'accessibility.view')]),
-    veImpressionForAccessibilityPane(),
-  ]);
+  await devToolsPage.click('aria/Accessibility');
+  await devToolsPage.waitFor('.source-order-checkbox');
+  await expectVeEvents(
+      [
+        veClick('Panel: elements > Toolbar: sidebar > DropDown: more-tabs > Menu > Action: accessibility.view'),
+        veImpressionsUnder(
+            'Panel: elements > Toolbar: sidebar', [veImpression('PanelTabHeader', 'accessibility.view')]),
+        veImpressionForAccessibilityPane(),
+      ],
+      undefined, devToolsPage);
 };
 
 function veImpressionForAccessibilityPane() {

test/e2e/helpers/elements-helpers.ts

@@ -6,6 +6,7 @@ import("../../../scripts/build/typescript/typescript.gni")
 
 ts_e2e_library("elements") {
   sources = [
+    "accessibility-pane_test.ts",
     "accessibility-tree_test.ts",
     "adornment_test.ts",
     "classes-pane_test.ts",

test/e2e_non_hosted/elements/BUILD.gn

@@ -0,0 +1,30 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {toggleAccessibilityPane} from '../../e2e/helpers/elements-helpers.js';
+
+describe('Accessibility Pane in the Elements Tab', function() {
+  it('displays the partial accessibility tree', async ({devToolsPage, inspectedPage}) => {
+    await inspectedPage.goToResource('elements/accessibility-simple-page.html');
+    await toggleAccessibilityPane(devToolsPage);
+    await devToolsPage.waitForAria('Accessibility Tree');
+  });
+
+  it('shows computed name from contents for title element', async ({devToolsPage, inspectedPage}) => {
+    await inspectedPage.goToResource('elements/accessibility-simple-page.html');
+    await toggleAccessibilityPane(devToolsPage);
+    const titleElement = await devToolsPage.waitForAria('<h1>');
+    await devToolsPage.clickElement(titleElement);
+    await devToolsPage.waitForAria('Contents:\xa0"Title"');
+  });
+
+  it('shows name from label for span element', async ({devToolsPage, inspectedPage}) => {
+    await inspectedPage.goToResource('elements/accessibility-simple-page.html');
+    await toggleAccessibilityPane(devToolsPage);
+    const a11yPane = await devToolsPage.waitForAria('Accessibility panel');
+    const spanElement = await devToolsPage.waitForElementWithTextContent('span-name');
+    await devToolsPage.clickElement(spanElement);
+    await devToolsPage.waitForAria('Name:\xa0"span-name"', a11yPane);
+  });
+});