From 9891955a3248f6020aab809276b81a398c3a3b79 Mon Sep 17 00:00:00 2001 From: vrknetha Date: Sun, 8 Dec 2024 01:40:40 +0530 Subject: [PATCH] fixes tests and in CI --- .github/workflows/ci.yml | 3 +- playwright.config.ts | 9 +++-- tests/clipboard.spec.ts | 77 +++++++++++++++++----------------------- 3 files changed, 41 insertions(+), 48 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index e311283..46ffaaf 100644 --- 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 index 73e4ce7..e573c5d 100644 --- 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 index 4f8b412..fb45dac 100644 --- 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+<') - .replace(/ /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 => { 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 bold 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('bold'); } }); @@ -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); }); });