test: implement multiple category selection in blog tests

Author: mcanouil

tests/integration/playwright/tests/blog-categories-selection.spec.ts

@@ -1,6 +1,8 @@
 import { expect, Page, test } from "@playwright/test";
 import { getUrl } from "../src/utils";
 
+declare const process: { platform: string };
+
 const testPages = {
   'posts': 'table.html',
   'posts2': 'default.html',
@@ -68,21 +70,26 @@ Object.entries(testPages).forEach(([postDir, pageName]) => {
     test(`Multiple category selection with Ctrl+click works for ${pageName}`, async ({ page }) => {
       await page.goto(`./blog/simple-blog/_site/${pageName}`);
 
+      // Target category sidebar specifically (not post card categories)
+      const categorySidebar = page.locator('.quarto-listing-category');
+      const codeCategory = categorySidebar.locator(`div.category[data-category="${btoa(encodeURIComponent('code'))}"]`);
+      const eurosCategory = categorySidebar.locator(`div.category[data-category="${btoa(encodeURIComponent('euros (€)'))}"]`);
+
       // Click on "code" category (only Post With Code has this category)
-      await page.getByText('code', { exact: true }).click();
-      await expect(page.locator(`div.category[data-category="${btoa(encodeURIComponent('code'))}"]`)).toHaveClass(/active/);
+      await codeCategory.click();
+      await expect(codeCategory).toHaveClass(/active/);
       await expect(page.getByRole('link', { name: 'Post With Code' })).toBeVisible();
       await expect(page.getByRole('link', { name: 'Welcome To My Blog' })).toBeHidden();
 
       // Ctrl+click on "euros (€)" category to add it to selection (only Welcome has this category)
       const modifier = process.platform === 'darwin' ? 'Meta' : 'Control';
       await page.keyboard.down(modifier);
-      await page.getByText('euros (€)', { exact: true }).click();
+      await eurosCategory.click();
       await page.keyboard.up(modifier);
 
       // Both categories should be active
-      await expect(page.locator(`div.category[data-category="${btoa(encodeURIComponent('code'))}"]`)).toHaveClass(/active/);
-      await expect(page.locator(`div.category[data-category="${btoa(encodeURIComponent('euros (€)'))}"]`)).toHaveClass(/active/);
+      await expect(codeCategory).toHaveClass(/active/);
+      await expect(eurosCategory).toHaveClass(/active/);
 
       // Both posts should be visible (OR logic: posts matching any selected category)
       await expect(page.getByRole('link', { name: 'Post With Code' })).toBeVisible();
@@ -98,14 +105,18 @@ Object.entries(testPages).forEach(([postDir, pageName]) => {
     test(`Deselecting last category with Ctrl+click shows all posts for ${pageName}`, async ({ page }) => {
       await page.goto(`./blog/simple-blog/_site/${pageName}`);
 
+      // Target category sidebar specifically
+      const categorySidebar = page.locator('.quarto-listing-category');
+      const codeCategory = categorySidebar.locator(`div.category[data-category="${btoa(encodeURIComponent('code'))}"]`);
+
       // Click on "code" category
-      await page.getByText('code', { exact: true }).click();
-      await expect(page.locator(`div.category[data-category="${btoa(encodeURIComponent('code'))}"]`)).toHaveClass(/active/);
+      await codeCategory.click();
+      await expect(codeCategory).toHaveClass(/active/);
 
       // Ctrl+click on "code" again to deselect it
       const modifier = process.platform === 'darwin' ? 'Meta' : 'Control';
       await page.keyboard.down(modifier);
-      await page.getByText('code', { exact: true }).click();
+      await codeCategory.click();
       await page.keyboard.up(modifier);
 
       // No category should be active (default state), all posts visible