e2e testing improvement

Author: c4ffein

e2e/navigation.spec.ts

@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/test';
-import { register, generateUniqueUser } from './helpers/auth';
+import { register, login, generateUniqueUser } from './helpers/auth';
 import { createArticle, generateUniqueArticle } from './helpers/articles';
+import { registerUserViaAPI, createManyArticles } from './helpers/api';
 
 test.describe('Navigation and Filtering', () => {
   test.afterEach(async ({ context }) => {
@@ -73,7 +74,7 @@ test.describe('Navigation and Filtering', () => {
     await page.goto('/', { waitUntil: 'load' });
 
     // Wait for the sidebar to be visible
-    await page.waitForSelector('.sidebar .tag-list', { timeout: 10000 });
+    await page.waitForSelector('.sidebar .tag-list', { timeout: 3000 });
 
     // Wait for the specific tag to appear in Popular Tags sidebar (or use first available tag)
     // Note: Custom tags might not appear immediately in Popular Tags
@@ -115,12 +116,12 @@ test.describe('Navigation and Filtering', () => {
     await page.goto('/', { waitUntil: 'load' });
 
     // Wait for articles to load
-    await page.waitForSelector('.article-preview', { timeout: 10000 });
+    await page.waitForSelector('.article-preview', { timeout: 3000 });
 
     // Should see our article and existing articles in Global Feed
     await page.click('a:has-text("Global Feed")');
     // Wait for articles to load after clicking Global Feed
-    await page.waitForSelector('.article-preview', { timeout: 10000 });
+    await page.waitForSelector('.article-preview', { timeout: 3000 });
     await expect(page.locator(`h1:has-text("${article.title}")`).first()).toBeVisible();
 
     // Also should see johndoe's articles from demo backend
@@ -152,41 +153,22 @@ test.describe('Navigation and Filtering', () => {
     await expect(page.locator('.sidebar .tag-list .tag-pill:has-text("trending")')).toBeVisible();
   });
 
-  test('should paginate articles', async ({ page }) => {
+  test('should paginate articles', async ({ page, request }) => {
+    // Create user and 12 articles via API (much faster than UI)
+    const uniqueTag = `pag${Date.now()}`;
     const user = generateUniqueUser();
-    await register(page, user.username, user.email, user.password);
+    const token = await registerUserViaAPI(request, user);
+    await createManyArticles(request, token, 12, uniqueTag);
 
-    // Create 12 articles to trigger pagination (default page size is typically 10)
-    const baseTimestamp = Date.now();
-    const articles = Array.from({ length: 12 }, (_, i) => {
-      const article = generateUniqueArticle();
-      article.title = `Pagination Test ${baseTimestamp}-${i}`;
-      return article;
-    });
-
-    for (let i = 0; i < articles.length; i++) {
-      await createArticle(page, articles[i]);
-      // Navigate back to editor for next article
-      if (i < articles.length - 1) {
-        await page.goto('/editor', { waitUntil: 'load' });
-        // Wait for editor form to be ready
-        await page.waitForSelector('input[formControlName="title"]', { timeout: 10000 });
-      }
-    }
-
-    // Go to home and check pagination
-    await page.goto('/', { waitUntil: 'load' });
-    await page.waitForSelector('.article-preview', { timeout: 10000 });
+    // Login and navigate to our tag to see only our articles
+    await login(page, user.email, user.password);
+    await page.goto(`/tag/${uniqueTag}`);
+    await page.waitForSelector('.article-preview', { timeout: 3000 });
 
     // Count articles on first page (should be 10 or less)
     const firstPageCount = await page.locator('.article-preview').count();
     expect(firstPageCount).toBeGreaterThan(0);
     expect(firstPageCount).toBeLessThanOrEqual(10);
-
-    // Verify pagination functionality - with 12+ articles created plus demo articles,
-    // we should have enough to trigger pagination
-    // Just verify the page structure is correct - articles are displayed properly
-    expect(firstPageCount).toBeGreaterThanOrEqual(1);
   });
 
   test('should navigate to article from author name', async ({ page }) => {
@@ -243,7 +225,7 @@ test.describe('Navigation and Filtering', () => {
     await page.goto(`/profile/${user.username}`, { waitUntil: 'load' });
 
     // Wait for profile page to load
-    await page.waitForSelector('.user-info, h4', { timeout: 10000 });
+    await page.waitForSelector('.user-info, h4', { timeout: 3000 });
 
     // Check if there are article previews (there might be none on empty profile)
     const articleCount = await page.locator('.article-preview').count();

e2e/social.spec.ts

@@ -156,15 +156,12 @@ test.describe('Social Features', () => {
 
     // Go to profile and click Favorited tab
     await page.goto(`/profile/${user.username}`, { waitUntil: 'load' });
-    await page.waitForSelector('a:has-text("Favorited")', { timeout: 10000 });
+    await page.waitForSelector('a:has-text("Favorited")', { timeout: 3000 });
     await page.click('a:has-text("Favorited")');
 
-    // Wait for articles to load - use Playwright's built-in retry logic
-    await expect(page.locator('.article-preview').first()).toBeVisible({ timeout: 15000 });
-
-    // The favorited article should be visible (use more flexible matching)
-    const articleVisible = await page.locator('.article-preview').first().isVisible();
-    expect(articleVisible).toBe(true);
+    // Wait for URL to change then for articles to load
+    await expect(page).toHaveURL(`/profile/${user.username}/favorites`);
+    await expect(page.locator('.article-preview').first()).toBeVisible({ timeout: 3000 });
   });
 
   test('should display followed users articles in feed', async ({ page }) => {