chore(tests): switch to playwright test runner (#276)

Signed-off-by: Ondrej Dockal <[email protected]>
Co-authored-by: Denis Golovin <[email protected]>

Author: odockal

.eslintignore

@@ -3,5 +3,6 @@ scripts
 builtin/**
 www
 *.config.js
+*.config.ts
 types/**/*.ts
 __mocks__

.github/workflows/e2e-main.yaml

@@ -110,7 +110,7 @@ jobs:
       - name: Execute pnpm in Red Hat Account Extension
         working-directory: ${{ env.REPOSITORY }}
         run: |
-          pnpm install -D @podman-desktop/tests-playwright@1.13.0-202408291153-ccbdd9b
+          pnpm install -D @podman-desktop/tests-playwright@next
           pnpm build
 
       - name: Run All E2E tests in Red Hat Account Extension

.github/workflows/pr-check.yaml

@@ -125,7 +125,7 @@ jobs:
 
       - name: Ensure getting current HEAD version of the test framework
         working-directory: ./podman-desktop-redhat-account-ext
-        run: pnpm add -D @podman-desktop/tests-playwright@1.13.0-202408291153-ccbdd9b 
+        run: pnpm install -D @podman-desktop/tests-playwright@next 
 
       - name: Execute pnpm in SSO Extension
         working-directory: ./podman-desktop-redhat-account-ext

.gitignore

@@ -4,6 +4,7 @@ builtin
 dist
 node_modules
 redhat-authentication.cdix
-tests/output
+tests/**/output
 test-resources
+test-results
 

package.json

@@ -4,6 +4,7 @@
   "description": "Login to Red Hat Developers",
   "version": "1.0.2",
   "packageManager": "[email protected]+sha512.faf344af2d6ca65c4c5c8c2224ea77a81a5e8859cbc4e06b1511ddce2f0151512431dd19e6aff31f2c6a8f5f2aced9bd2273e1fed7dd4de1868984059d2c4247",
+  "type": "module",
   "icon": "icon.png",
   "publisher": "redhat",
   "license": "Apache-2.0",
@@ -33,7 +34,7 @@
     }
   },
   "scripts": {
-    "build": "vite build && node ./scripts/build.js",
+    "build": "vite build && node ./scripts/build.cjs",
     "watch": "vite build -w",
     "format:check": "prettier --end-of-line auto --cache --check \"{src,types,scripts}/**/*.{ts,js}\"",
     "format:fix": "prettier --cache --write \"{src,types,scripts}/**/*.{ts,js}\"",
@@ -43,14 +44,15 @@
     "test": "vitest run --coverage",
     "test:all": "pnpm test && pnpm test:e2e",
     "test:e2e:setup": "xvfb-maybe --auto-servernum --server-args='-screen 0 1280x960x24' --",
-    "test:e2e": "cross-env E2E_TESTS=true pnpm run test:e2e:setup vitest run tests/src/ --pool=threads --poolOptions.threads.singleThread --poolOptions.threads.isolate --no-file-parallelism"
+    "test:e2e": "cross-env E2E_TESTS=true pnpm run test:e2e:setup npx playwright test tests/src"
   },
   "dependencies": {
     "@podman-desktop/api": "^1.12.0",
     "@redhat-developer/rhcra-client": "^0.0.1",
     "@redhat-developer/rhsm-client": "^0.0.4",
     "axios": "^1.7.7",
     "js-yaml": "^4.1.0",
+    "object-hash": "2.2.0",
     "openid-client": "^5.6.5"
   },
   "devDependencies": {

tests/src/setupFiles/extended-hooks.ts playwright.config.ts

@@ -16,9 +16,25 @@
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
 
-import { type RunnerTestContext,takeScreenshotHook } from '@podman-desktop/tests-playwright';
-import { afterEach } from 'vitest';
+import { defineConfig, devices } from '@playwright/test';
 
-afterEach(async (context: RunnerTestContext) => {
-  context.onTestFailed(async () => await takeScreenshotHook(context.pdRunner, context.task.name));
+export default defineConfig({
+  outputDir: 'output/',
+  workers: 1,
+
+  reporter: [
+    ['list'],
+    ['junit', { outputFile: 'output/junit-results.xml' }],
+    ['json', { outputFile: 'output/json-results.json' }],
+    ['html', { open: 'never', outputFolder: 'output/html-results/' }],
+  ],
+
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
 });

pnpm-lock.yaml

@@ -16,10 +16,8 @@
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
 import type { Page} from '@playwright/test';
-import { expect as playExpect } from '@playwright/test';
-import type { RunnerTestContext} from '@podman-desktop/tests-playwright';
+import { expect as playExpect, test } from '@playwright/test';
 import { AuthenticationPage, ExtensionCardPage, NavigationBar, PodmanDesktopRunner, WelcomePage } from '@podman-desktop/tests-playwright';
-import { afterAll, beforeAll, beforeEach,describe, test } from 'vitest';
 
 import { SSOExtensionPage } from './model/pages/sso-extension-page';
 
@@ -36,11 +34,7 @@ const activeExtensionStatus = 'ACTIVE';
 const disabledExtensionStatus = 'DISABLED';
 const skipInstallation = process.env.SKIP_INSTALLATION ? process.env.SKIP_INSTALLATION : false;
 
-beforeEach<RunnerTestContext>(async ctx => {
-  ctx.pdRunner = pdRunner;
-});
-
-beforeAll(async () => {
+test.beforeAll(async () => {
   pdRunner = new PodmanDesktopRunner({ customFolder: 'sso-tests-pd', autoUpdate: false, autoCheckUpdate: false });
   page = await pdRunner.start();
   pdRunner.setVideoAndTraceName('sso-e2e');
@@ -51,63 +45,64 @@ beforeAll(async () => {
   extensionCard = new ExtensionCardPage(page, extensionLabelName, extensionLabel);
 });
 
-afterAll(async () => {
+test.afterAll(async () => {
   await pdRunner.close();
 });
 
-describe('Red Hat Authentication extension verification', async () => {
-
-  test('Go to extensions and check if extension is already installed', async () => {
-    const extensions = await navBar.openExtensions();
-    if (await extensions.extensionIsInstalled(extensionLabel)) {
-      extensionInstalled = true;
-    }
-  });
+test.describe('Red Hat Authentication extension verification', () => {
+  test.describe('Red Hat Authentication extension installation', () => {
+    test('Go to extensions and check if extension is already installed', async () => {
+      const extensions = await navBar.openExtensions();
+      if (await extensions.extensionIsInstalled(extensionLabel)) {
+        extensionInstalled = true;
+      }
+    });
 
-  // we want to skip removing of the extension when we are running tests from PR check
-  test.runIf(extensionInstalled && !skipInstallation)(
-    'Uninstalled previous version of sso extension',
-    async () => {
+    // we want to skip removing of the extension when we are running tests from PR check
+    test('Uninstalle previous version of sso extension', async () => {
+      test.skip(!extensionInstalled || !!skipInstallation);
+      test.setTimeout(60000);
       await removeExtension();
-    },
-    60000,
-  );
-
-  test.runIf(!skipInstallation)('Extension can be installed using OCI image', async () => {
-    const extensions = await navBar.openExtensions();
-    await extensions.installExtensionFromOCIImage(imageName);
-    await playExpect(extensionCard.card).toBeVisible();
-  }, 200000);
-
-  test('Extension card is present and active', async () => {
-    const extensions = await navBar.openExtensions();
-    await playExpect.poll(async () => 
-      await extensions.extensionIsInstalled(extensionLabel), { timeout: 30000 },
-    ).toBeTruthy();
-    const extensionCard = await extensions.getInstalledExtension(extensionLabelName, extensionLabel);
-    await playExpect(extensionCard.status).toHaveText(activeExtensionStatus);
-  });
+    });
 
-  test('Extension Details show correct status', async () => {
-    const extensions = await navBar.openExtensions();
-    const extensionCard = await extensions.getInstalledExtension(extensionLabelName, extensionLabel);
-    await extensionCard.openExtensionDetails();
-    const details = new SSOExtensionPage(page);
-    await playExpect(details.heading).toBeVisible();
-    await playExpect(details.status).toHaveText(activeExtensionStatus);
-  });
+    test('Extension can be installed using OCI image', async () => {
+      test.skip(extensionInstalled && !skipInstallation);
+      test.setTimeout(200000);
+      const extensions = await navBar.openExtensions();
+      await extensions.installExtensionFromOCIImage(imageName);
+      await playExpect(extensionCard.card).toBeVisible();
+    });
 
-  test('SSO provider is available in Authentication Page', async () => {
-    const settingsBar = await navBar.openSettings();
-    const authPage = await settingsBar.openTabPage(AuthenticationPage);
-    await playExpect(authPage.heading).toHaveText('Authentication');
-    const provider = authPage.getProvider(authProviderName);
-    await playExpect(provider.getByLabel('Provider Information').getByLabel('Provider Name')).toHaveText(authProviderName);
-    await playExpect(provider.getByLabel('Provider Information').getByLabel('Provider Status')).toHaveText('Logged out');
-    await playExpect(provider.getByLabel('Provider Actions').getByRole('button')).toContainText('Sign in');
+    test('Extension card is present and active', async () => {
+      const extensions = await navBar.openExtensions();
+      await playExpect.poll(async () => 
+        await extensions.extensionIsInstalled(extensionLabel), { timeout: 30000 },
+      ).toBeTruthy();
+      const extensionCard = await extensions.getInstalledExtension(extensionLabelName, extensionLabel);
+      await playExpect(extensionCard.status).toHaveText(activeExtensionStatus);
+    });
+
+    test('Extension Details show correct status', async () => {
+      const extensions = await navBar.openExtensions();
+      const extensionCard = await extensions.getInstalledExtension(extensionLabelName, extensionLabel);
+      await extensionCard.openExtensionDetails('Red Hat Authentication');
+      const details = new SSOExtensionPage(page);
+      await playExpect(details.heading).toBeVisible();
+      await playExpect(details.status).toHaveText(activeExtensionStatus);
+    });
+
+    test('SSO provider is available in Authentication Page', async () => {
+      const settingsBar = await navBar.openSettings();
+      const authPage = await settingsBar.openTabPage(AuthenticationPage);
+      await playExpect(authPage.heading).toHaveText('Authentication');
+      const provider = authPage.getProvider(authProviderName);
+      await playExpect(provider.getByLabel('Provider Information').getByLabel('Provider Name')).toHaveText(authProviderName);
+      await playExpect(provider.getByLabel('Provider Information').getByLabel('Provider Status')).toHaveText('Logged out');
+      await playExpect(provider.getByLabel('Provider Actions').getByRole('button')).toContainText('Sign in');
+    });
   });
 
-  describe('Red Hat Authentication extension handling', async () => {
+  test.describe('Red Hat Authentication extension handling', () => {
     test('Extension can be disabled', async () => {
       const extensions = await navBar.openExtensions();
       playExpect(await extensions.extensionIsInstalled(extensionLabel)).toBeTruthy();

scripts/build.js scripts/build.cjs

@@ -71,33 +71,6 @@ function unitTestConfig() {
   };
 }
 
-function e2eTestConfig() {
-  return {
-    globals: true,
-    globalSetup: './node_modules/@podman-desktop/tests-playwright/src/globalSetup/global-setup.ts',
-    setupFiles: './tests/src/setupFiles/extended-hooks.ts',
-    /**
-     * By default, vitest search test files in all packages.
-     * For e2e tests have sense search only is project root tests folder
-     */
-    include: ['tests/src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    exclude: excludeArray,
-
-    /**
-     * A default timeout of 5000ms is sometimes not enough for playwright.
-     */
-    testTimeout: 30_000,
-    hookTimeout: 60_000,
-    // test reporters - default for all and junit for CI
-    reporters: process.env.CI ? ['default', 'junit'] : ['verbose'],
-    outputFile: process.env.CI ? { junit: 'tests/output/junit-e2e-results.xml' } : {},
-  };
-}
-
-export function testConfig() {
-  return process.env.E2E_TESTS ? e2eTestConfig() : unitTestConfig();
-}
-
 /**
  * Config for global end-to-end tests
  * placed in project root tests folder
@@ -107,7 +80,7 @@ export function testConfig() {
 
 const config = {
   test: {
-    ...testConfig(),
+    ...unitTestConfig(),
     ...coverageConfig(PACKAGE_ROOT, PACKAGE_NAME),
   },
   resolve: {