Fix Playwright strict mode violations in E2E tests

- Use .first() for selectors that may match multiple elements
- Scope selectors to specific containers (modal, footer, table)
- Use role-based selectors for tab navigation in download modal
- Fix contact form, comparison page, download modal, homepage, and
  navigation tests

Author: claude

frontend/e2e/comparison-page.spec.ts

@@ -22,7 +22,9 @@ test.describe('Comparison Page', () => {
   });
 
   test('should display CryFS in the comparison', async ({ page }) => {
-    await expect(page.getByText('CryFS')).toBeVisible();
+    // CryFS should be in the comparison table
+    const table = page.locator('table');
+    await expect(table.getByText('CryFS').first()).toBeVisible();
   });
 
   test('should display alternative encryption tools', async ({ page }) => {

frontend/e2e/contact-form.spec.ts

@@ -65,7 +65,7 @@ test.describe('Contact Form Flow', () => {
     await sendButton.click();
 
     // Should show success message
-    await expect(page.getByText(/thank you/i)).toBeVisible();
+    await expect(page.getByText(/thank you/i).first()).toBeVisible();
   });
 
   test('should allow submission without email', async ({ page }) => {
@@ -81,7 +81,7 @@ test.describe('Contact Form Flow', () => {
     await sendButton.click();
 
     // Should show success message
-    await expect(page.getByText(/thank you/i)).toBeVisible();
+    await expect(page.getByText(/thank you/i).first()).toBeVisible();
   });
 
   test('should include email in submission when provided', async ({ page }) => {
@@ -102,7 +102,7 @@ test.describe('Contact Form Flow', () => {
     await sendButton.click();
 
     // Wait for request to complete
-    await expect(page.getByText(/thank you/i)).toBeVisible();
+    await expect(page.getByText(/thank you/i).first()).toBeVisible();
 
     expect(requestBody.email).toBe('test@example.com');
     expect(requestBody.message).toBe('Test message');

frontend/e2e/download-modal.spec.ts

@@ -9,62 +9,69 @@ test.describe('Download Modal Flow', () => {
     await expect(modal).toBeVisible();
 
     // Should show download header
-    await expect(page.getByText(/download cryfs/i)).toBeVisible();
+    await expect(modal.getByText(/download cryfs/i)).toBeVisible();
   });
 
   test('should display OS selection tabs', async ({ page }) => {
     await page.goto('/#download');
 
-    await expect(page.getByText('Ubuntu')).toBeVisible();
-    await expect(page.getByText('Debian')).toBeVisible();
-    await expect(page.getByText('Other')).toBeVisible();
+    const modal = page.locator('.modal');
+    // Check for tab elements with OS names
+    await expect(modal.getByRole('tab', { name: /ubuntu/i })).toBeVisible();
+    await expect(modal.getByRole('tab', { name: /debian/i })).toBeVisible();
+    await expect(modal.getByRole('tab', { name: /other/i })).toBeVisible();
   });
 
   test('should show Ubuntu instructions by default', async ({ page }) => {
     await page.goto('/#download');
 
+    const modal = page.locator('.modal');
     // Ubuntu Easy Install should be visible
-    await expect(page.getByText('Easy Install')).toBeVisible();
-    await expect(page.getByText(/ubuntu 17.04 and later/i)).toBeVisible();
-    await expect(page.getByText('sudo apt install cryfs')).toBeVisible();
+    await expect(modal.getByText('Easy Install').first()).toBeVisible();
+    await expect(modal.getByText(/ubuntu 17.04 and later/i)).toBeVisible();
+    await expect(modal.getByText('sudo apt install cryfs').first()).toBeVisible();
   });
 
   test('should switch to Debian tab', async ({ page }) => {
     await page.goto('/#download');
 
-    await page.getByText('Debian').click();
+    const modal = page.locator('.modal');
+    await modal.getByRole('tab', { name: /debian/i }).click();
 
     // Debian instructions should be visible
-    await expect(page.getByText(/debian stretch and later/i)).toBeVisible();
+    await expect(modal.getByText(/debian stretch and later/i)).toBeVisible();
   });
 
   test('should switch to Other tab and show macOS instructions', async ({ page }) => {
     await page.goto('/#download');
 
-    await page.getByText('Other').click();
+    const modal = page.locator('.modal');
+    await modal.getByRole('tab', { name: /other/i }).click();
 
     // macOS instructions should be visible
-    await expect(page.getByText('Mac OS X')).toBeVisible();
-    await expect(page.getByText('brew install --cask macfuse')).toBeVisible();
-    await expect(page.getByText('brew install cryfs/tap/cryfs')).toBeVisible();
+    await expect(modal.getByText('Mac OS X').first()).toBeVisible();
+    await expect(modal.getByText('brew install --cask macfuse').first()).toBeVisible();
+    await expect(modal.getByText('brew install cryfs/tap/cryfs').first()).toBeVisible();
   });
 
   test('should show Windows instructions in Other tab', async ({ page }) => {
     await page.goto('/#download');
 
-    await page.getByText('Other').click();
+    const modal = page.locator('.modal');
+    await modal.getByRole('tab', { name: /other/i }).click();
 
     // Windows instructions should be visible
-    await expect(page.getByText('Windows')).toBeVisible();
-    await expect(page.getByText(/windows support is highly experimental/i)).toBeVisible();
+    await expect(modal.getByText('Windows').first()).toBeVisible();
+    await expect(modal.getByText(/windows support is highly experimental/i)).toBeVisible();
   });
 
   test('should have DokanY download link', async ({ page }) => {
     await page.goto('/#download');
 
-    await page.getByText('Other').click();
+    const modal = page.locator('.modal');
+    await modal.getByRole('tab', { name: /other/i }).click();
 
-    const dokanLink = page.getByRole('link', { name: /dokany/i });
+    const dokanLink = modal.getByRole('link', { name: /dokany/i });
     await expect(dokanLink).toBeVisible();
     await expect(dokanLink).toHaveAttribute('href', 'https://github.com/dokan-dev/dokany/releases');
   });
@@ -73,21 +80,23 @@ test.describe('Download Modal Flow', () => {
     await page.goto('/#download');
 
     // Modal should be visible
-    await expect(page.locator('.modal')).toBeVisible();
+    const modal = page.locator('.modal');
+    await expect(modal).toBeVisible();
 
     // Click close button
-    const closeButton = page.getByRole('button', { name: /close/i });
+    const closeButton = modal.getByRole('button', { name: /close/i });
     await closeButton.click();
 
     // Modal should be hidden
-    await expect(page.locator('.modal')).not.toBeVisible();
+    await expect(modal).not.toBeVisible();
   });
 
   test('should update URL hash when modal closes', async ({ page }) => {
     await page.goto('/#download');
 
+    const modal = page.locator('.modal');
     // Close modal
-    const closeButton = page.getByRole('button', { name: /close/i });
+    const closeButton = modal.getByRole('button', { name: /close/i });
     await closeButton.click();
 
     // URL should no longer have #download
@@ -97,19 +106,18 @@ test.describe('Download Modal Flow', () => {
   test('should display OS logos', async ({ page }) => {
     await page.goto('/#download');
 
-    await expect(page.getByAltText('Ubuntu')).toBeVisible();
-    await expect(page.getByAltText('Debian')).toBeVisible();
-    await expect(page.getByAltText('Other')).toBeVisible();
+    const modal = page.locator('.modal');
+    await expect(modal.getByAltText('Ubuntu')).toBeVisible();
+    await expect(modal.getByAltText('Debian')).toBeVisible();
+    await expect(modal.getByAltText('Other')).toBeVisible();
   });
 
   test('should link to GitHub releases for older versions', async ({ page }) => {
     await page.goto('/#download');
 
-    const releasesLink = page.getByRole('link', { name: /here/i }).filter({
-      has: page.locator('[href*="github.com/cryfs/cryfs/releases"]'),
-    });
-
-    await expect(releasesLink).toBeVisible();
+    const modal = page.locator('.modal');
+    const releasesLink = modal.locator('a[href*="github.com/cryfs/cryfs/releases"]');
+    await expect(releasesLink.first()).toBeVisible();
   });
 
   test('should open modal from download link on homepage', async ({ page }) => {
@@ -120,7 +128,8 @@ test.describe('Download Modal Flow', () => {
     await downloadLink.click();
 
     // Modal should appear
-    await expect(page.locator('.modal')).toBeVisible();
-    await expect(page.getByText(/download cryfs/i)).toBeVisible();
+    const modal = page.locator('.modal');
+    await expect(modal).toBeVisible();
+    await expect(modal.getByText(/download cryfs/i)).toBeVisible();
   });
 });

frontend/e2e/homepage.spec.ts

@@ -33,7 +33,7 @@ test.describe('Homepage', () => {
   test('should display the footer', async ({ page }) => {
     const footer = page.locator('footer');
     await expect(footer).toBeVisible();
-    await expect(page.getByText(/Sebastian Messmer/)).toBeVisible();
+    await expect(footer.getByText(/Sebastian Messmer/)).toBeVisible();
   });
 
   test('should display legal notice link in footer', async ({ page }) => {

frontend/e2e/navigation.spec.ts

@@ -102,7 +102,7 @@ test.describe('Navigation', () => {
     // Footer should still be visible
     const footer = page.locator('footer');
     await expect(footer).toBeVisible();
-    await expect(page.getByText(/Sebastian Messmer/)).toBeVisible();
+    await expect(footer.getByText(/Sebastian Messmer/)).toBeVisible();
   });
 });