fixes tests and in CI

vrknetha · Dec 7, 2024 · 9891955 · 9891955
1 parent def003c
commit 9891955
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 48 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -35,9 +35,10 @@ jobs:
       run: npm run lint
 
     - name: Run tests
-      run: npm test
+      run: xvfb-run --auto-servernum -- npm test
       env:
         CI: true
+        DEBUG: pw:webserver
 
     - name: Upload test results
       if: always()

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -15,12 +15,17 @@ export default defineConfig({
     command: 'npm run serve',
     url: 'http://localhost:8080',
     reuseExistingServer: !process.env.CI,
-    timeout: 5000,
+    timeout: 120000,
+    stdout: 'pipe',
+    stderr: 'pipe',
   },
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        ...devices['Desktop Chrome'],
+        permissions: ['clipboard-read', 'clipboard-write'],
+      },
     },
     {
       name: 'firefox',

diff --git a/tests/clipboard.spec.ts b/tests/clipboard.spec.ts
@@ -1,33 +1,26 @@
 import { test, expect } from '@playwright/test';
 import { PlaywrightClipboard } from '../src';
 
-// Helper function to normalize HTML for comparison
-function normalizeHtml(html: string): string {
-  return html
-    .replace(/\s+/g, ' ')
-    .replace(/>\s+</g, '><')
-    .replace(/&nbsp;/g, ' ')
-    .trim();
-}
-
 test.describe('PlaywrightClipboard', () => {
-  test.beforeEach(async ({ context, browserName, page }) => {
-    // Grant clipboard permissions based on browser
-    if (browserName === 'chromium') {
-      await context.grantPermissions(['clipboard-read', 'clipboard-write']);
-    }
-    // Navigate to the test page
+  test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:8080');
+    // Clear both source and target elements
+    await page.fill('#source', '');
+    await page.fill('#target', '');
+    await page.fill('#text', '');
+    await page.fill('#editor', '');
+    await page.evaluate(() => {
+      const richSource = document.querySelector('#richSource');
+      const richTarget = document.querySelector('#richTarget');
+      if (richSource) richSource.innerHTML = '';
+      if (richTarget) richTarget.innerHTML = '';
+    });
   });
 
   test('should perform basic copy/paste operations', async ({ page }): Promise<void> => {
     const clipboard = new PlaywrightClipboard(page);
     const initialText = 'Hello World';
-
-    // Set initial text in source
     await page.fill('#source', initialText);
-    expect(await page.inputValue('#source')).toBe(initialText);
-
     await clipboard.copy('#source');
     await clipboard.paste('#target');
 
@@ -39,6 +32,10 @@ test.describe('PlaywrightClipboard', () => {
     const clipboard = new PlaywrightClipboard(page);
     const initialText = 'Test Content';
 
+    // Clear source and target first
+    await page.fill('#source', '');
+    await page.fill('#target', '');
+    // Then set test content
     await page.fill('#source', initialText);
     await clipboard.cut('#source');
     await clipboard.paste('#target');
@@ -66,6 +63,7 @@ test.describe('PlaywrightClipboard', () => {
 
     await page.fill('#editor', testText);
     await clipboard.copyBetweenWords('#editor', 2, 3); // Copy "brown fox"
+    await page.fill('#target', ''); // Clear target first
     await clipboard.paste('#target');
 
     const targetContent = await page.inputValue('#target');
@@ -76,6 +74,15 @@ test.describe('PlaywrightClipboard', () => {
     const clipboard = new PlaywrightClipboard(page);
     const richText = 'This is <b>bold</b> text';
 
+    // Clear both source and target
+    await page.evaluate(() => {
+      const source = document.querySelector('#richSource');
+      const target = document.querySelector('#richTarget');
+      if (source) source.innerHTML = '';
+      if (target) target.innerHTML = '';
+    });
+
+    // Set test content
     await page.evaluate(text => {
       const editor = document.querySelector('#richSource') as HTMLElement;
       editor.innerHTML = text;
@@ -84,24 +91,12 @@ test.describe('PlaywrightClipboard', () => {
     await clipboard.copyRichText('#richSource');
     await clipboard.pasteRichText('#richTarget');
 
-    const result = await page.evaluate(() => {
-      const target = document.querySelector('#richTarget') as HTMLElement;
-      return target.innerHTML.trim();
-    });
-
     if (browserName === 'webkit') {
-      const plainText = await page.evaluate(() => {
-        const target = document.querySelector('#richTarget') as HTMLElement;
-        return target.textContent?.trim() || '';
-      });
-      const normalizedExpected = 'This is bold text';
-      const normalizedActual = plainText.replace(/\s+/g, ' ').trim();
-      expect(normalizedActual).toBe(normalizedExpected);
+      const plainText = await page.$eval('#richTarget', el => el.textContent?.trim() || '');
+      expect(plainText).toBe('This is bold text');
     } else {
-      // Chromium should preserve the HTML structure
-      const normalizedExpected = richText.replace(/\s+/g, ' ').trim();
-      const normalizedResult = normalizeHtml(result);
-      expect(normalizedResult).toBe(normalizedExpected);
+      const html = await page.$eval('#richTarget', el => el.innerHTML.trim());
+      expect(html).toContain('<b>bold</b>');
     }
   });
 
@@ -129,19 +124,11 @@ test.describe('PlaywrightClipboard', () => {
     const clipboard = new PlaywrightClipboard(page);
     const testText = 'Line 1\nLine 2\nLine 3';
 
-    // Use textarea for multiline text
-    await page.evaluate(text => {
-      const textarea = document.querySelector('#editor') as HTMLTextAreaElement;
-      textarea.value = text;
-    }, testText);
-
+    await page.fill('#editor', testText);
     await clipboard.copy('#editor');
     await clipboard.paste('#target');
 
-    const result = await page.evaluate(() => {
-      const target = document.querySelector('#target') as HTMLInputElement;
-      return target.value;
-    });
+    const result = await page.inputValue('#target');
     expect(result).toBe(testText);
   });
 });