Stabilize E2E server and retain failure diagnostics

.gitea/workflows/ci-ts.yml

@@ -63,3 +63,12 @@ jobs:
           pnpm --filter @pipu/web exec playwright install --with-deps chromium ||
             pnpm --filter @pipu/web exec playwright install chromium
       - run: pnpm --filter @pipu/web test:e2e
+      - name: E2E failure diagnostics
+        if: failure()
+        continue-on-error: true
+        uses: actions/upload-artifact@v3
+        with:
+          name: web-e2e-failure
+          path: apps/web/test-results/
+          if-no-files-found: ignore
+          retention-days: 3

apps/web/e2e/mobile.spec.ts

@@ -69,6 +69,8 @@ for (const [width, username] of [[320, 'mobile-admin'], [390, 'moderator'], [430
       await page.getByRole('button', { name: 'Ещё', exact: true }).click();
       await page.getByRole('dialog').getByRole('link', { name: 'Очередь', exact: true }).click();
       await expect(page.getByRole('heading', { name: 'Очередь на добавление' })).toBeVisible();
+      await expect(page.locator('audio')).toBeHidden();
+      await page.getByRole('button', { name: 'Развернуть пачку', exact: true }).click();
       await expect(page.locator('audio')).toBeVisible();
       await fits(page);
       await page.getByRole('checkbox', { name: /^Выбрать Длинное/ }).check();

apps/web/e2e/upload-review.spec.ts

@@ -180,7 +180,9 @@ test('queue shows the storage and path, and recalculates after fixing placement'
   await expect(page.getByRole('checkbox', { name: 'Выбрать всю пачку', exact: true })).toBeChecked();
   await page.getByRole('button', { name: 'Развернуть пачку', exact: true }).press('Enter');
   await expect(page.getByText('Artist/Album/01 - Song.flac', { exact: true })).toBeVisible();
-  await page.getByRole('checkbox', { name: 'Выбрать всю пачку', exact: true }).uncheck();
+  // Continue keyboard selection after keyboard expansion, avoiding another scroll-dependent pointer action.
+  await page.getByRole('checkbox', { name: 'Выбрать всю пачку', exact: true }).press('Space');
+  await expect(page.getByRole('checkbox', { name: 'Выбрать всю пачку', exact: true })).not.toBeChecked();
   await page.getByRole('button', { name: 'Выбрать хранилище', exact: true }).click();
   const dialog = page.getByRole('dialog');
   await dialog.getByLabel('Исполнитель', { exact: true }).fill('Artist');

apps/web/playwright.config.ts

@@ -3,7 +3,12 @@ import { defineConfig, devices } from '@playwright/test';
 export default defineConfig({
   testDir: './e2e',
   timeout: 30_000,
-  use: { baseURL: 'http://127.0.0.1:4173', ...devices['Desktop Chrome'] },
+  use: {
+    baseURL: 'http://127.0.0.1:4173',
+    ...devices['Desktop Chrome'],
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+  },
   webServer: {
     command: 'pnpm exec vite --port 4173 --strictPort',
     url: 'http://127.0.0.1:4173',

apps/web/src/widgets/AppShell.tsx

@@ -151,9 +151,9 @@ function NavSection({
       {mobile ? (
         <h3 className={cx(s.navSection, nested && s.navSubsection)}><span className={s.navSectionTitle}>{title}</span></h3>
       ) : (
-        <button type="button" className={cx(s.navSection, nested && s.navSubsection)} aria-expanded={!folded} aria-controls={groupId} onClick={toggle}>
+        <button type="button" className={cx(s.navSection, nested && s.navSubsection)} aria-labelledby={`${groupId}-title`} aria-describedby={folded && badge ? `${groupId}-badge` : undefined} aria-expanded={!folded} aria-controls={groupId} onClick={toggle}>
-          <span className={s.navSectionTitle}>{title}</span>
+          <span id={`${groupId}-title`} className={s.navSectionTitle}>{title}</span>
-          {folded && badge ? <span className={s.navBadge}>{badge > 99 ? '99+' : badge}</span> : null}
+          {folded && badge ? <span id={`${groupId}-badge`} className={s.navBadge}>{badge > 99 ? '99+' : badge}</span> : null}
           <Icon src={chevronRightIcon} size={16} className={cx(s.navChevron, !folded && s.navChevronOpen)} />
         </button>
       )}

apps/web/vite.config.ts

@@ -8,6 +8,9 @@ export default defineConfig({
     target: 'es2022',
   },
   server: {
+    // E2E installs a stateful fake API in the page. A dev-server reload would
+    // discard it in the middle of a scenario (including other parallel workers).
+    hmr: process.env.VITE_E2E === '1' ? false : undefined,
     host: '127.0.0.1',
     port: 5173,
     strictPort: true,