test (e2e): update 6 stale test selectors and assertions in statistics and lastfm specs

Update statistics.spec.js selectors to match current UI classes
(text-[13px] not text-sm, w-14 not w-20), fix locale-formatted number
assertion, and rewrite date range test for custom dropdown. Narrow
lastfm.spec.js toast filter to avoid strict mode violation from
multiple matching elements.

Closes TASK-305

Author: pythoninthegrass

app/frontend/tests/lastfm.spec.js

@@ -1239,7 +1239,7 @@ test.describe('Last.fm Integration', () => {
       await page.click('[data-testid="lastfm-import-loved"]');
       await page.waitForTimeout(1000);
 
-      const authError = page.locator('[data-testid="toast-container"] div').filter({ hasText: /failed/i });
+      const authError = page.locator('[data-testid="toast-container"] div').filter({ hasText: /Failed to import loved tracks/i });
       await expect(authError).toBeVisible({ timeout: 3000 });
     });
 

app/frontend/tests/statistics.spec.js

@@ -129,7 +129,7 @@ test.describe('Statistics Dashboard', () => {
     const cards = page.locator('[data-testid="stats-overview-cards"]');
     await expect(cards).toBeVisible();
 
-    await expect(page.locator('[data-testid="stats-total-plays"]')).toHaveText('1234');
+    await expect(page.locator('[data-testid="stats-total-plays"]')).toHaveText('1,234');
     await expect(page.locator('[data-testid="stats-artists-played"]')).toHaveText('42');
     await expect(page.locator('[data-testid="stats-listening-time"]')).toContainText('4d');
   });
@@ -140,8 +140,8 @@ test.describe('Statistics Dashboard', () => {
     const artistsSection = page.locator('[data-testid="stats-top-artists"]');
     await expect(artistsSection).toBeVisible();
 
-    // Check artists are listed in order
-    const artistNames = artistsSection.locator('.text-sm.truncate');
+    // Check artists are listed in order (artist name spans use text-[13px] + truncate)
+    const artistNames = artistsSection.locator('.truncate');
     await expect(artistNames.nth(0)).toHaveText('Radiohead');
     await expect(artistNames.nth(1)).toHaveText('Pink Floyd');
     await expect(artistNames.nth(2)).toHaveText('Tool');
@@ -154,7 +154,7 @@ test.describe('Statistics Dashboard', () => {
     await expect(playsSection).toBeVisible();
 
     // Check year labels
-    const labels = playsSection.locator('.tabular-nums.w-20');
+    const labels = playsSection.locator('.tabular-nums.w-14');
     await expect(labels).toHaveCount(3);
   });
 
@@ -165,7 +165,7 @@ test.describe('Statistics Dashboard', () => {
     await expect(genreSection).toBeVisible();
 
     // Check genre names
-    const genreNames = genreSection.locator('.text-sm.truncate');
+    const genreNames = genreSection.locator('.truncate');
     await expect(genreNames.nth(0)).toHaveText('Rock');
     await expect(genreNames.nth(1)).toHaveText('Electronic');
     await expect(genreNames.nth(2)).toHaveText('Jazz');
@@ -174,8 +174,10 @@ test.describe('Statistics Dashboard', () => {
   test('date range filter invokes with correct range', async ({ page }) => {
     await navigateToStats(page);
 
-    // Change to Last 7 Days
-    await page.locator('[data-testid="stats-date-range"]').selectOption('Last7Days');
+    // Change to Last 7 Days (custom dropdown, not a <select>)
+    await page.locator('[data-testid="stats-date-range"]').click();
+    await page.waitForTimeout(300);
+    await page.locator('button', { hasText: 'Last 7 days' }).click();
     await page.waitForTimeout(500);
 
     // Verify the invoke was called with the correct range

backlog/tasks/task-305 - Fix-6-pre-existing-E2E-test-failures-in-statistics-and-lastfm-specs.md

@@ -1,9 +1,10 @@
 ---
 id: TASK-305
 title: Fix 6 pre-existing E2E test failures in statistics and lastfm specs
-status: To Do
+status: Done
 assignee: []
 created_date: '2026-03-31 05:38'
+updated_date: '2026-03-31 05:49'
 labels:
   - testing
   - e2e
@@ -13,6 +14,7 @@ references:
   - app/frontend/tests/statistics.spec.js
   - app/frontend/tests/lastfm.spec.js
 priority: medium
+ordinal: 750
 ---
 
 ## Description
@@ -33,7 +35,30 @@ priority: medium
 
 ## Acceptance Criteria
 <!-- AC:BEGIN -->
-- [ ] #1 All 5 statistics.spec.js tests pass
-- [ ] #2 lastfm.spec.js 'should require authentication for import' test passes
-- [ ] #3 No other tests regress (full suite green minus any unrelated pre-existing failures)
+- [x] #1 All 5 statistics.spec.js tests pass
+- [x] #2 lastfm.spec.js 'should require authentication for import' test passes
+- [x] #3 No other tests regress (full suite green minus any unrelated pre-existing failures)
 <!-- AC:END -->
+
+## Final Summary
+
+<!-- SECTION:FINAL_SUMMARY:BEGIN -->
+## Summary
+
+Fixed all 6 pre-existing E2E test failures across `statistics.spec.js` (5 tests) and `lastfm.spec.js` (1 test). Root causes were stale CSS selectors, locale formatting mismatch, a `<select>` changed to custom dropdown, and an overly broad toast text filter.
+
+### Changes
+
+**`statistics.spec.js`** (5 fixes):
+1. `overview cards render with data`: Changed expected text from `'1234'` to `'1,234'` (UI uses `toLocaleString()`)
+2. `top artists list renders`: Changed selector `.text-sm.truncate` → `.truncate` (HTML uses `text-[13px]` not `text-sm`)
+3. `plays-over-time chart renders`: Changed selector `.tabular-nums.w-20` → `.tabular-nums.w-14` (HTML uses `w-14`)
+4. `genre breakdown renders`: Changed selector `.text-sm.truncate` → `.truncate` (same as #2)
+5. `date range filter invokes with correct range`: Rewrote from `selectOption('Last7Days')` (native select) to click-based interaction (custom dropdown button)
+
+**`lastfm.spec.js`** (1 fix):
+6. `should require authentication for import`: Changed toast filter from `/failed/i` to `/Failed to import loved tracks/i` to avoid strict mode violation when multiple failure toasts are present
+
+### Verification
+- Full E2E suite: **728 passed, 2 skipped, 0 failures**
+<!-- SECTION:FINAL_SUMMARY:END -->