test(e2e): make the rtl spec's stateful waits self-healing (#5444)

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

__tests__/e2e/rtl/index.test.ts

@@ -25,6 +25,18 @@ const glyphEnds = (selector: string) =>
       return { first, last }
     })
 
+// scrolls a heading into view until the outline marks it active. The scroll
+// is re-issued on every check, so a lost scroll event or a dev-server reload
+// triggered by another spec cannot leave the wait hanging (seen on Windows CI)
+const activateHeading = (id: string) =>
+  page.waitForFunction((id) => {
+    if (document.querySelector(`.outline-link.active[href="#${id}"]`)) {
+      return true
+    }
+    document.getElementById(id)?.scrollIntoView()
+    return false
+  }, id)
+
 describe('rtl', () => {
   beforeAll(async () => {
     await goto('/rtl/')
@@ -59,17 +71,11 @@ describe('rtl', () => {
 
   test('keeps the outline marker on the reading side and moving', async () => {
     const outline = await box('.VPDocAsideOutline .content')
-    await page.evaluate(() =>
+    await activateHeading('section-one')
-      document.querySelector('#section-one')!.scrollIntoView()
-    )
-    await page.waitForSelector('.outline-link.active[href="#section-one"]')
     const before = await box('.outline-marker')
     expect(before.x).toBeGreaterThan(outline.x + outline.width / 2)
 
-    await page.evaluate(() =>
+    await activateHeading('section-two')
-      document.querySelector('#section-two')!.scrollIntoView()
-    )
-    await page.waitForSelector('.outline-link.active[href="#section-two"]')
     const after = await box('.outline-marker')
     expect(after.y).toBeGreaterThan(before.y)
     expect(Math.abs(after.x - before.x)).toBeLessThan(1)
@@ -131,16 +137,18 @@ describe('rtl', () => {
     const closed = await box('.VPSidebar')
     expect(closed.x).toBeGreaterThanOrEqual(viewport - 1)
 
-    await page.locator('.VPLocalNav .menu').click()
+    // open the sidebar and wait for its slide-in to settle against the right
-    await page.waitForSelector('.VPSidebar.open')
+    // edge, reopening it if a reload closed it meanwhile (see activateHeading)
-    // wait for the slide-in transition to settle against the right edge
     await page.waitForFunction(() => {
-      const { right } = document
+      const sidebar = document.querySelector('.VPSidebar')!
-        .querySelector('.VPSidebar')!
+      if (!sidebar.classList.contains('open')) {
-        .getBoundingClientRect()
+        document.querySelector<HTMLElement>('.VPLocalNav .menu')?.click()
-      return Math.abs(right - innerWidth) < 1
+        return false
+      }
+      const { right } = sidebar.getBoundingClientRect()
+      return Math.abs(right - document.documentElement.clientWidth) < 1
     })
     const open = await box('.VPSidebar')
-    expect(open.x).toBeLessThan(375)
+    expect(open.x).toBeLessThan(viewport)
   })
 })