chore(test): update e2e test to latest tests-playwright changes (#291)

Signed-off-by: Ondrej Dockal <[email protected]>

Author: odockal

.github/workflows/e2e-main.yaml

@@ -110,8 +110,11 @@ jobs:
       - name: Execute pnpm in Red Hat Account Extension
         working-directory: ${{ env.REPOSITORY }}
         run: |
-          pnpm install -D @podman-desktop/tests-playwright@next
-          pnpm build
+          # workaround for https://github.com/containers/podman-desktop-extension-bootc/issues/712
+          version=$(npm view @podman-desktop/tests-playwright@next version)
+          echo "Version of @podman-desktop/tests-playwright to be used: $version"
+          jq --arg version "$version" '.devDependencies."@podman-desktop/tests-playwright" = $version' package.json > package.json_tmp && mv package.json_tmp package.json
+          pnpm install --no-frozen-lockfile
 
       - name: Run All E2E tests in Red Hat Account Extension
         working-directory: ${{ env.REPOSITORY }}
@@ -123,4 +126,4 @@ jobs:
         if: always()
         with:
           name: e2e-tests
-          path: ./**/tests/output/
+          path: ./tests/**/output/

.github/workflows/pr-check.yaml

@@ -120,16 +120,20 @@ jobs:
       - name: Build Podman Desktop for E2E tests
         working-directory: ./podman-desktop
         run: |
-          pnpm install
+          pnpm install --frozen-lockfile
           pnpm test:e2e:build
 
       - name: Ensure getting current HEAD version of the test framework
         working-directory: ./podman-desktop-redhat-account-ext
-        run: pnpm install -D @podman-desktop/tests-playwright@next 
+        run: |
+          # workaround for https://github.com/containers/podman-desktop-extension-bootc/issues/712
+          version=$(npm view @podman-desktop/tests-playwright@next version)
+          echo "Version of @podman-desktop/tests-playwright to be used: $version"
+          jq --arg version "$version" '.devDependencies."@podman-desktop/tests-playwright" = $version' package.json > package.json_tmp && mv package.json_tmp package.json
 
       - name: Execute pnpm in SSO Extension
         working-directory: ./podman-desktop-redhat-account-ext
-        run: pnpm install
+        run: pnpm install --no-frozen-lockfile
 
       - name: Build SSO extension from container file
         working-directory: ./podman-desktop-redhat-account-ext
@@ -151,4 +155,4 @@ jobs:
         if: always()
         with:
           name: e2e-tests
-          path: ./**/tests/output/
+          path: ./tests/**/output/

package.json

@@ -44,7 +44,7 @@
     "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 npx playwright test tests/src"
+    "test:e2e": "cross-env E2E_TESTS=true npm run test:e2e:setup npx playwright test tests/src"
   },
   "dependencies": {
     "@podman-desktop/api": "^1.12.0",
@@ -57,7 +57,7 @@
   },
   "devDependencies": {
     "7zip-min": "^1.4.5",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.47.0",
     "@podman-desktop/tests-playwright": "next",
     "@types/js-yaml": "^4.0.5",
     "@types/node": "^20",

playwright.config.ts

@@ -19,14 +19,15 @@
 import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
-  outputDir: 'output/',
+  outputDir: 'tests/output/',
   workers: 1,
+  timeout: 60000,
 
   reporter: [
     ['list'],
-    ['junit', { outputFile: 'output/junit-results.xml' }],
-    ['json', { outputFile: 'output/json-results.json' }],
-    ['html', { open: 'never', outputFolder: 'output/html-results/' }],
+    ['junit', { outputFile: 'tests/output/junit-results.xml' }],
+    ['json', { outputFile: 'tess/output/json-results.json' }],
+    ['html', { open: 'never', outputFolder: 'tests/output/html-results/' }],
   ],
 
   projects: [

pnpm-lock.yaml

@@ -15,15 +15,12 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
-import type { Page} from '@playwright/test';
-import { expect as playExpect, test } from '@playwright/test';
-import { AuthenticationPage, ExtensionCardPage, NavigationBar, PodmanDesktopRunner, WelcomePage } from '@podman-desktop/tests-playwright';
+
+import type { NavigationBar } from '@podman-desktop/tests-playwright';
+import { AuthenticationPage, expect as playExpect, ExtensionCardPage, RunnerOptions, test } from '@podman-desktop/tests-playwright';
 
 import { SSOExtensionPage } from './model/pages/sso-extension-page';
 
-let pdRunner: PodmanDesktopRunner;
-let page: Page;
-let navBar: NavigationBar;
 let extensionInstalled = false;
 let extensionCard: ExtensionCardPage;
 const imageName = 'ghcr.io/redhat-developer/podman-desktop-redhat-account-ext:latest';
@@ -34,65 +31,63 @@ const activeExtensionStatus = 'ACTIVE';
 const disabledExtensionStatus = 'DISABLED';
 const skipInstallation = process.env.SKIP_INSTALLATION ? process.env.SKIP_INSTALLATION : false;
 
-test.beforeAll(async () => {
-  pdRunner = new PodmanDesktopRunner({ customFolder: 'sso-tests-pd', autoUpdate: false, autoCheckUpdate: false });
-  page = await pdRunner.start();
-  pdRunner.setVideoAndTraceName('sso-e2e');
-
-  const welcomePage = new WelcomePage(page);
+test.use({ 
+  runnerOptions: new RunnerOptions({ customFolder: 'sso-tests-pd', autoUpdate: false, autoCheckUpdates: false }),
+});
+test.beforeAll(async ({ runner, page, welcomePage }) => {
+  runner.setVideoAndTraceName('sso-e2e');
   await welcomePage.handleWelcomePage(true);
-  navBar = new NavigationBar(page);
   extensionCard = new ExtensionCardPage(page, extensionLabelName, extensionLabel);
 });
 
-test.afterAll(async () => {
-  await pdRunner.close();
+test.afterAll(async ({ runner }) => {
+  await runner.close();
 });
 
-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();
+test.describe.serial('Red Hat Authentication extension verification', () => {
+  test.describe.serial('Red Hat Authentication extension installation', () => {
+    test('Go to extensions and check if extension is already installed', async ({ navigationBar }) => {
+      const extensions = await navigationBar.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('Uninstalle previous version of sso extension', async () => {
+    test('Uninstalle previous version of sso extension', async ({ navigationBar }) => {
       test.skip(!extensionInstalled || !!skipInstallation);
       test.setTimeout(60000);
-      await removeExtension();
+      await removeExtension(navigationBar);
     });
 
-    test('Extension can be installed using OCI image', async () => {
+    test('Extension can be installed using OCI image', async ({ navigationBar }) => {
       test.skip(extensionInstalled && !skipInstallation);
       test.setTimeout(200000);
-      const extensions = await navBar.openExtensions();
+      const extensions = await navigationBar.openExtensions();
       await extensions.installExtensionFromOCIImage(imageName);
       await playExpect(extensionCard.card).toBeVisible();
     });
 
-    test('Extension card is present and active', async () => {
-      const extensions = await navBar.openExtensions();
+    test('Extension card is present and active', async ({ navigationBar }) => {
+      const extensions = await navigationBar.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();
+    test('Extension Details show correct status', async ({ page,navigationBar }) => {
+      const extensions = await navigationBar.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();
+    test('SSO provider is available in Authentication Page', async ({ navigationBar }) => {
+      const settingsBar = await navigationBar.openSettings();
       const authPage = await settingsBar.openTabPage(AuthenticationPage);
       await playExpect(authPage.heading).toHaveText('Authentication');
       const provider = authPage.getProvider(authProviderName);
@@ -102,43 +97,43 @@ test.describe('Red Hat Authentication extension verification', () => {
     });
   });
 
-  test.describe('Red Hat Authentication extension handling', () => {
-    test('Extension can be disabled', async () => {
-      const extensions = await navBar.openExtensions();
+  test.describe.serial('Red Hat Authentication extension handling', () => {
+    test('Extension can be disabled', async ({ navigationBar }) => {
+      const extensions = await navigationBar.openExtensions();
       playExpect(await extensions.extensionIsInstalled(extensionLabel)).toBeTruthy();
       const extensionCard = await extensions.getInstalledExtension(extensionLabelName, extensionLabel);
       await playExpect(extensionCard.status).toHaveText(activeExtensionStatus);
       await extensionCard.disableExtension();
       await playExpect(extensionCard.status).toHaveText(disabledExtensionStatus);
 
-      const settingsBar = await navBar.openSettings();
+      const settingsBar = await navigationBar.openSettings();
       const authPage = await settingsBar.openTabPage(AuthenticationPage);
       await playExpect(authPage.heading).toHaveText('Authentication');
       const provider = authPage.getProvider(authProviderName);
       await playExpect(provider).toHaveCount(0);
     });
 
-    test('Extension can be re-enabled correctly', async () => {
-      const extensions = await navBar.openExtensions();
+    test('Extension can be re-enabled correctly', async ({ navigationBar }) => {
+      const extensions = await navigationBar.openExtensions();
       playExpect(await extensions.extensionIsInstalled(extensionLabel)).toBeTruthy();
       const extensionCard = await extensions.getInstalledExtension(extensionLabelName, extensionLabel);
       await playExpect(extensionCard.status).toHaveText(disabledExtensionStatus);
       await extensionCard.enableExtension();
       await playExpect(extensionCard.status).toHaveText(activeExtensionStatus);
 
-      const settingsBar = await navBar.openSettings();
+      const settingsBar = await navigationBar.openSettings();
       const authPage = await settingsBar.openTabPage(AuthenticationPage);
       await playExpect(authPage.heading).toHaveText('Authentication');
       await playExpect(authPage.getProvider(authProviderName)).toHaveCount(1);
     }); 
   });
 
-  test('SSO extension can be removed', async () => {
-    await removeExtension();
+  test('SSO extension can be removed', async ({ navigationBar }) => {
+    await removeExtension(navigationBar);
   });
 });
 
-async function removeExtension(): Promise<void> {
+async function removeExtension(navBar: NavigationBar): Promise<void> {
   const extensions = await navBar.openExtensions();
   const extensionCard = await extensions.getInstalledExtension(extensionLabelName, extensionLabel);
   await extensionCard.disableExtension();