Use Playwright role selectors instead of Pandoc-generated tab IDs in tests

Tab pane IDs like `tabset-1-2` are auto-generated by Pandoc and break if
the fixture structure changes. Replace with `getByRole('tab', { name })`
and `toHaveClass(/active/)`, matching the pattern used in html-tabsets.spec.ts.
Section-scoped locators disambiguate duplicate tab names (R, Python).

Co-Authored-By: Claude Opus 4.6 <[email protected]>

Author: cderv

tests/integration/playwright/tests/html-search-tabsets.spec.ts

@@ -2,18 +2,6 @@ import { test, expect, Page } from "@playwright/test";
 
 const BASE = './html/search-tabsets/_site/index.html';
 
-// Helper: wait for search tab activation (deferred to pageshow)
-// and return the active pane ID for a given tab-content index.
-async function getActiveTabId(page: Page, tabContentIndex: number): Promise<string> {
-  return page.evaluate((idx) => {
-    const tabContents = document.querySelectorAll('.tab-content');
-    const tc = tabContents[idx];
-    if (!tc) return 'not-found';
-    const active = tc.querySelector('.tab-pane.active');
-    return active?.id ?? 'none';
-  }, tabContentIndex);
-}
-
 // Helper: count marks visible (not inside an inactive tab pane)
 async function visibleMarkCount(page: Page): Promise<number> {
   return page.evaluate(() => {
@@ -37,9 +25,8 @@ test('Search activates inactive tab containing match', async ({ page }) => {
   const marks = page.locator('mark');
   await expect(marks.first()).toBeVisible({ timeout: 5000 });
 
-  // Tab Beta (tabset-1-2) should be active in the ungrouped tabset (index 0)
-  const activeId = await getActiveTabId(page, 0);
-  expect(activeId).toBe('tabset-1-2');
+  // Tab Beta should be active in the ungrouped tabset
+  await expect(page.getByRole('tab', { name: 'Tab Beta', exact: true })).toHaveClass(/active/);
 
   await expect(marks).toHaveCount(1);
   expect(await visibleMarkCount(page)).toBe(1);
@@ -51,9 +38,9 @@ test('Search keeps active tab when it already has a match', async ({ page }) =>
   const marks = page.locator('mark');
   await expect(marks.first()).toBeVisible({ timeout: 5000 });
 
-  // R tab (tabset-2-1) should stay active — it already has a match
-  const activeId = await getActiveTabId(page, 1);
-  expect(activeId).toBe('tabset-2-1');
+  // R tab should stay active — it already has a match
+  const section = page.locator('#both-tabs-match');
+  await expect(section.getByRole('tab', { name: 'R', exact: true })).toHaveClass(/active/);
 
   // 2 marks total (one in each tab), only 1 visible (in active tab)
   await expect(marks).toHaveCount(2);
@@ -67,8 +54,9 @@ test('Search highlights outside tabs without changing tab state', async ({ page
   await expect(marks.first()).toBeVisible({ timeout: 5000 });
 
   // All tabs should remain at their defaults (first tab active)
-  expect(await getActiveTabId(page, 0)).toBe('tabset-1-1');
-  expect(await getActiveTabId(page, 1)).toBe('tabset-2-1');
+  await expect(page.getByRole('tab', { name: 'Tab Alpha', exact: true })).toHaveClass(/active/);
+  const bothSection = page.locator('#both-tabs-match');
+  await expect(bothSection.getByRole('tab', { name: 'R', exact: true })).toHaveClass(/active/);
 
   await expect(marks).toHaveCount(1);
   expect(await visibleMarkCount(page)).toBe(1);
@@ -80,10 +68,9 @@ test('Search activates both outer and inner tabs for nested match', async ({ pag
   const marks = page.locator('mark');
   await expect(marks.first()).toBeVisible({ timeout: 5000 });
 
-  // Outer Tab B (tabset-6-2) and Inner Tab Y (tabset-5-2) should both activate.
-  // Tabset indices: outer nested = 4, inner nested = 5
-  expect(await getActiveTabId(page, 4)).toBe('tabset-6-2');
-  expect(await getActiveTabId(page, 5)).toBe('tabset-5-2');
+  // Both outer and inner tabs should activate for the nested match
+  await expect(page.getByRole('tab', { name: 'Outer Tab B', exact: true })).toHaveClass(/active/);
+  await expect(page.getByRole('tab', { name: 'Inner Tab Y', exact: true })).toHaveClass(/active/);
 
   await expect(marks).toHaveCount(1);
   expect(await visibleMarkCount(page)).toBe(1);
@@ -105,12 +92,13 @@ test('Search activation overrides localStorage tab preference', async ({ page })
   const marks = page.locator('mark');
   await expect(marks.first()).toBeVisible({ timeout: 5000 });
 
-  // Python tab (tabset-3-2) should be active despite localStorage saying "R"
-  const activeId = await getActiveTabId(page, 2);
-  expect(activeId).toBe('tabset-3-2');
+  // Python tab should be active despite localStorage saying "R"
+  const groupedSection = page.locator('#grouped-tabset');
+  await expect(groupedSection.getByRole('tab', { name: 'Python', exact: true })).toHaveClass(/active/);
 
   // Second grouped tabset should remain on R (no search match there)
-  expect(await getActiveTabId(page, 3)).toBe('tabset-4-1');
+  const secondGrouped = page.locator('#second-grouped-tabset');
+  await expect(secondGrouped.getByRole('tab', { name: 'R', exact: true })).toHaveClass(/active/);
 
   await expect(marks).toHaveCount(1);
   expect(await visibleMarkCount(page)).toBe(1);