test(e2e): add tree details e2e tests and refactor test utilities

- Add tree-details.spec.ts covering filter drawer, tab switching,
  status filters, search, commit graph navigation, and breadcrumb flows
- Extract selectors into dedicated modules (common, tree-listing,
  tree-details) and shared utils (navigation, filters) for reuse
- Instrument components with data-test-id attributes (Breadcrumb,
  BaseCard, Drawer, LineChart, StatusCharts, TableCellWithLink) to
  support stable e2e selectors
- Refactor tree-listing.spec.ts to consume the new shared helpers
Closes #1664

Author: WilsonNet

dashboard/e2e/e2e-selectors.ts

@@ -27,3 +27,77 @@ export const COMMON_SELECTORS = {
   originDropdown: '[data-test-id="origin-dropdown"]',
   originOption: (origin: string) => `[data-test-id="origin-option-${origin}"]`,
 } as const;
+
+export const TREE_DETAILS_SELECTORS = {
+  breadcrumbTreesLink: '[data-test-id="breadcrumb-trees-link"]',
+
+  treeHeaderTable: 'table',
+
+  tabs: {
+    builds: 'button:has-text("Builds")',
+    boots: 'button:has-text("Boots")',
+    tests: 'button:has-text("Tests")',
+  },
+
+  filters: {
+    button: 'button:has-text("Filters")',
+    drawer: 'aside',
+    filterButton: '[data-test-id="filter-button"]',
+    cancelButton: '[data-test-id="filter-cancel-button"]',
+    clearAllFilters: 'text="Clear all"',
+  },
+
+  buildHistoryGraph: 'img',
+
+  statusCard: {
+    title: '.flex-col:has(div:has-text("Build status"))',
+    titleFirst: '.flex-col:has(div:has-text("Build status"))',
+    statusButton: (status: string) => `[data-test-id="${status}"]`,
+  },
+
+  summaryCards: {
+    arch: 'text="Summary"',
+  },
+
+  issuesCard: {
+    title: 'text="Issues"',
+    button: 'button[aria-label="Issues"]',
+  },
+
+  buildTable: {
+    table: 'table',
+    statusFilters: {
+      all: 'button:has-text("All:")',
+      success: 'button:has-text("Success:")',
+      failed: 'button:has-text("Failed:")',
+      inconclusive: 'button:has-text("Inconclusive:")',
+    },
+    searchInput: 'input[placeholder*="Search"]',
+    detailsButton: '[data-test-id="details-button"]',
+  },
+
+  bootsTable: {
+    statusFilters: {
+      all: 'button:has-text("All:")',
+      success: 'button:has-text("Success:")',
+      failed: 'button:has-text("Failed:")',
+      inconclusive: 'button:has-text("Inconclusive:")',
+    },
+    detailsButton: '[data-test-id="details-button"]',
+  },
+
+  testsTable: {
+    statusFilters: {
+      all: 'button:has-text("All:")',
+      success: 'button:has-text("Success:")',
+      failed: 'button:has-text("Failed:")',
+      inconclusive: 'button:has-text("Inconclusive:")',
+    },
+    testItem: 'tr',
+    detailsButton: '[data-test-id="details-button"]',
+  },
+
+  configTable: {
+    link: (config: string) => `a:has-text("${config}")`,
+  },
+} as const;

dashboard/e2e/selectors/common.ts

@@ -0,0 +1,7 @@
+export const COMMON_SELECTORS = {
+  tableRow: 'tr',
+  tableHeader: 'th',
+
+  originDropdown: '[data-test-id="origin-dropdown"]',
+  originOption: (origin: string) => `[data-test-id="origin-option-${origin}"]`,
+} as const;

dashboard/e2e/selectors/index.ts

@@ -0,0 +1,3 @@
+export * from './common';
+export * from './tree-listing';
+export * from './tree-details';

dashboard/e2e/selectors/tree-details.ts

@@ -0,0 +1,81 @@
+export const TREE_DETAILS_SELECTORS = {
+  breadcrumbTreesLink: '[data-test-id="breadcrumb-trees-link"]',
+
+  treeHeaderTable: 'table',
+
+  tabs: {
+    builds: 'button:has-text("Builds")',
+    boots: 'button:has-text("Boots")',
+    tests: 'button:has-text("Tests")',
+  },
+
+  filters: {
+    button: 'button:has-text("Filters")',
+    drawer: 'aside',
+    drawerContent: '[role="dialog"]',
+    filterButton: '[data-test-id="filter-button"]',
+    cancelButton: '[data-test-id="filter-cancel-button"]',
+    clearAllFilters: 'text="Clear all"',
+  },
+
+  buildHistoryGraph: 'img',
+
+  statusCard: {
+    title: '.flex-col:has(div:has-text("Build status"))',
+    titleFirst: '.flex-col:has(div:has-text("Build status"))',
+    statusButton: (status: string) => `[data-test-id="${status}"]`,
+  },
+
+  summaryCards: {
+    arch: 'text="Summary"',
+  },
+
+  issuesCard: {
+    title: 'text="Issues"',
+    button: 'button[aria-label="Issues"]',
+  },
+
+  buildTable: {
+    table: 'table',
+    statusFilters: {
+      all: 'button:has-text("All:")',
+      success: 'button:has-text("Success:")',
+      failed: 'button:has-text("Failed:")',
+      inconclusive: 'button:has-text("Inconclusive:")',
+    },
+    searchInput: 'input[placeholder*="Search"]',
+    detailsButton: '[data-test-id="details-button"]',
+  },
+
+  bootsTable: {
+    statusFilters: {
+      all: 'button:has-text("All:")',
+      success: 'button:has-text("Success:")',
+      failed: 'button:has-text("Failed:")',
+      inconclusive: 'button:has-text("Inconclusive:")',
+    },
+    detailsButton: '[data-test-id="details-button"]',
+  },
+
+  testsTable: {
+    statusFilters: {
+      all: 'button:has-text("All:")',
+      success: 'button:has-text("Success:")',
+      failed: 'button:has-text("Failed:")',
+      inconclusive: 'button:has-text("Inconclusive:")',
+    },
+    testItem: 'tr',
+    expandedRows: 'tr:has(td[colspan])',
+    detailsButton: '[data-test-id="details-button"]',
+  },
+
+  configTable: {
+    link: (config: string) => `a:has-text("${config}")`,
+  },
+
+  commitGraph: {
+    container: '[data-test-id="commit-navigation-graph"]',
+    svg: '[data-test-id="commit-navigation-graph"] svg',
+    marks: '[data-test-id="commit-navigation-graph"] [class*="MuiMarkElement"]',
+  },
+} as const;

dashboard/e2e/selectors/tree-listing.ts

@@ -0,0 +1,20 @@
+export const TREE_LISTING_SELECTORS = {
+  table: 'table',
+  treeColumnHeader: 'th button:has-text("Tree")',
+  branchColumnHeader: 'th button:has-text("Branch")',
+
+  intervalInput: 'input[type="number"][min="1"]',
+
+  itemsPerPageDropdown: '[role="listbox"]',
+  itemsPerPageOption: (value: string) => `[role="option"]:has-text("${value}")`,
+
+  searchInput: 'input[type="text"]',
+
+  nextPageButton: '[role="button"]:has-text(">")',
+  previousPageButton: '[role="button"]:has-text("<")',
+
+  treeNameCell: (treeName: string) => `td a:has-text("${treeName}")`,
+  firstTreeCell: 'td a',
+
+  breadcrumbTreesLink: '[data-test-id="breadcrumb-link"]:has-text("Trees")',
+} as const;