Migrate test/e2e/issues/select-element-accessibility-issues_test.ts

Fixed: 416405468
Change-Id: I022119c4cc0a6841001ff0d7a800cafe25df4401
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6727254
Auto-Submit: Liviu Rau <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Liviu Rau <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: Liviu Rau

test/e2e/helpers/issues-helpers.ts

@@ -7,7 +7,6 @@ import type * as puppeteer from 'puppeteer-core';
 
 import type {DevToolsPage} from '../../e2e_non_hosted/shared/frontend-helper.js';
 import {
-  clickElement,
   matchStringTable,
   waitFor,
 } from '../../shared/helper.js';
@@ -125,8 +124,8 @@ export async function getAndExpandSpecificIssueByTitle(
     }
     return undefined;
   });
-  await clickElement(issueMessageElement);
-  await waitFor('.message');
+  await devToolsPage.clickElement(issueMessageElement);
+  await devToolsPage.waitFor('.message');
   return await getIssueByTitleElement(issueMessageElement);
 }
 

test/e2e/issues/BUILD.gn

@@ -12,7 +12,6 @@ node_ts_library("issues") {
     "partitioning-blob-url-issues_test.ts",
     "quota-issues_test.ts",
     "sab-issues_test.ts",
-    "select-element-accessibility-issues_test.ts",
     "user-reidentification-issues_test.ts",
   ]
 

test/e2e/issues/select-element-accessibility-issues_test.ts

@@ -24,6 +24,7 @@ ts_e2e_library("issues") {
     "privacy-sandbox-extensions-api_test.ts",
     "quirks-mode-issues_test.ts",
     "report-only_test.ts",
+    "select-element-accessibility-issues_test.ts",
   ]
   deps = [
     "../../e2e/helpers",

test/e2e_non_hosted/issues/BUILD.gn

@@ -0,0 +1,130 @@
+// Copyright 2025 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 {
+  ensureResourceSectionIsExpanded,
+  getAndExpandSpecificIssueByTitle,
+  getResourcesElement,
+  navigateToIssuesTab,
+  waitForTableFromResourceSectionContents,
+} from '../../e2e/helpers/issues-helpers.js';
+import {
+  assertNotNullOrUndefined,
+} from '../../shared/helper.js';
+
+describe('Select element accessibility issues test', () => {
+  it('should display issue when there is a disallowed child of a select element',
+     async ({devToolsPage, inspectedPage}) => {
+       await inspectedPage.goToResource('issues/select-element-accessibility-issue-DisallowedSelectChild.html');
+       await navigateToIssuesTab(devToolsPage);
+       const issueElement =
+           await getAndExpandSpecificIssueByTitle('Invalid element or text node within <select>', devToolsPage);
+       assertNotNullOrUndefined(issueElement);
+
+       const section = await getResourcesElement('1 element', issueElement, undefined, devToolsPage);
+       await ensureResourceSectionIsExpanded(section, devToolsPage);
+       const expectedTableRows = [
+         ['Disallowed descendant'],
+       ];
+       await waitForTableFromResourceSectionContents(section.content, expectedTableRows, devToolsPage);
+     });
+
+  it('should display issue when there is a disallowed child of an optgroup element',
+     async ({devToolsPage, inspectedPage}) => {
+       await inspectedPage.goToResource('issues/select-element-accessibility-issue-DisallowedOptGroupChild.html');
+       await navigateToIssuesTab(devToolsPage);
+       const issueElement =
+           await getAndExpandSpecificIssueByTitle('Invalid element or text node within <optgroup>', devToolsPage);
+       assertNotNullOrUndefined(issueElement);
+
+       const section = await getResourcesElement('1 element', issueElement, undefined, devToolsPage);
+       await ensureResourceSectionIsExpanded(section, devToolsPage);
+       const expectedTableRows = [
+         ['Disallowed descendant'],
+       ];
+       await waitForTableFromResourceSectionContents(section.content, expectedTableRows, devToolsPage);
+     });
+
+  it('should display issue when there is a non-phrasing child element of an option element',
+     async ({devToolsPage, inspectedPage}) => {
+       await inspectedPage.goToResource('issues/select-element-accessibility-issue-NonPhrasingContentOptionChild.html');
+       await navigateToIssuesTab(devToolsPage);
+       const issueElement =
+           await getAndExpandSpecificIssueByTitle('Non-phrasing content used within an <option> element', devToolsPage);
+       assertNotNullOrUndefined(issueElement);
+
+       const section = await getResourcesElement('1 element', issueElement, undefined, devToolsPage);
+       await ensureResourceSectionIsExpanded(section, devToolsPage);
+       const expectedTableRows = [
+         ['Disallowed descendant'],
+       ];
+       await waitForTableFromResourceSectionContents(section.content, expectedTableRows, devToolsPage);
+     });
+
+  it('should display issue when there is an interactive child element of an option element',
+     async ({devToolsPage, inspectedPage}) => {
+       await inspectedPage.goToResource('issues/select-element-accessibility-issue-InteractiveContentOptionChild.html');
+       await navigateToIssuesTab(devToolsPage);
+       const issueElement =
+           await getAndExpandSpecificIssueByTitle('Interactive element inside of an <option> element', devToolsPage);
+       assertNotNullOrUndefined(issueElement);
+
+       const section = await getResourcesElement('1 element', issueElement, undefined, devToolsPage);
+       await ensureResourceSectionIsExpanded(section, devToolsPage);
+       const expectedTableRows = [
+         ['Disallowed descendant'],
+       ];
+       await waitForTableFromResourceSectionContents(section.content, expectedTableRows, devToolsPage);
+     });
+
+  it('should display issue when there is an interactive child element of a legend element',
+     async ({devToolsPage, inspectedPage}) => {
+       await inspectedPage.goToResource('issues/select-element-accessibility-issue-InteractiveContentLegendChild.html');
+       await navigateToIssuesTab(devToolsPage);
+       const issueElement =
+           await getAndExpandSpecificIssueByTitle('Interactive element inside of a <legend> element', devToolsPage);
+       assertNotNullOrUndefined(issueElement);
+
+       const section = await getResourcesElement('1 element', issueElement, undefined, devToolsPage);
+       await ensureResourceSectionIsExpanded(section, devToolsPage);
+       const expectedTableRows = [
+         ['Disallowed descendant'],
+       ];
+       await waitForTableFromResourceSectionContents(section.content, expectedTableRows, devToolsPage);
+     });
+
+  it('should display issue when there is an element with disallowed attributes as a child of a select element',
+     async ({devToolsPage, inspectedPage}) => {
+       await inspectedPage.goToResource(
+           'issues/select-element-accessibility-issue-InteractiveAttributesSelectDescendant.html');
+       await navigateToIssuesTab(devToolsPage);
+       const issueElement = await getAndExpandSpecificIssueByTitle(
+           'Element with invalid attributes within a <select> element', devToolsPage);
+       assertNotNullOrUndefined(issueElement);
+
+       const section = await getResourcesElement('1 element', issueElement, undefined, devToolsPage);
+       await ensureResourceSectionIsExpanded(section, devToolsPage);
+       const expectedTableRows = [
+         ['Disallowed descendant'],
+       ];
+       await waitForTableFromResourceSectionContents(section.content, expectedTableRows, devToolsPage);
+     });
+
+  it('should display issue when there is an interactive element as a descendant of a summary element',
+     async ({devToolsPage, inspectedPage}) => {
+       await inspectedPage.goToResource(
+           'issues/summary-element-accessibility-issue-InteractiveContentSummaryDescendant.html');
+       await navigateToIssuesTab(devToolsPage);
+       const issueElement =
+           await getAndExpandSpecificIssueByTitle('Interactive element inside of a <summary> element', devToolsPage);
+       assertNotNullOrUndefined(issueElement);
+
+       const section = await getResourcesElement('1 element', issueElement, undefined, devToolsPage);
+       await ensureResourceSectionIsExpanded(section, devToolsPage);
+       const expectedTableRows = [
+         ['Disallowed descendant'],
+       ];
+       await waitForTableFromResourceSectionContents(section.content, expectedTableRows, devToolsPage);
+     });
+});