chore: adjust playwright tests to the removal of preferences/extensions

now it is using extensions and extension details page
Signed-off-by: Florent Benoit <fbenoit@redhat.com>

tests/playwright/src/index.ts

@@ -37,6 +37,7 @@ export * from './model/pages/containers-page';
 export * from './model/pages/create-pod-page';
 export * from './model/pages/dashboard-page';
 export * from './model/pages/extension-page';
+export * from './model/pages/extensions-page';
 export * from './model/pages/image-details-page';
 export * from './model/pages/image-edit-page';
 export * from './model/pages/images-page';
@@ -55,7 +56,6 @@ export * from './model/pages/resources-podman-connections-page';
 export * from './model/pages/run-image-page';
 export * from './model/pages/sandbox-extension-page';
 export * from './model/pages/settings-bar';
-export * from './model/pages/settings-extensions-page';
 export * from './model/pages/settings-page';
 export * from './model/pages/sso-extension-page';
 export * from './model/pages/welcome-page';

tests/playwright/src/model/pages/extension-details-page.ts

@@ -19,23 +19,31 @@
 import type { Locator, Page } from '@playwright/test';
 import { expect as playExpect } from '@playwright/test';
 
-import { SettingsExtensionsPage } from './settings-extensions-page';
-import { SettingsPage } from './settings-page';
+import { BasePage } from './base-page';
+import { ExtensionsPage } from './extensions-page';
 
-export class ExtensionPage extends SettingsPage {
-  readonly heading: Locator;
+export class ExtensionDetailsPage extends BasePage {
   readonly enableButton: Locator;
   readonly disableButton: Locator;
   readonly removeExtensionButton: Locator;
   readonly status: Locator;
 
-  constructor(page: Page, extensionTitle: string, heading: string) {
-    super(page, extensionTitle);
-    this.heading = page.getByText(heading);
-    this.enableButton = page.getByRole('button', { name: 'Enable' });
-    this.disableButton = page.getByRole('button', { name: 'Disable' });
-    this.removeExtensionButton = page.getByRole('button', { name: 'Remove' });
+  constructor(
+    page: Page,
+    public readonly extensionName: string,
+  ) {
+    super(page);
+    this.enableButton = page.getByRole('button', { name: 'Start' });
+    this.disableButton = page.getByRole('button', { name: 'Stop' });
+    this.removeExtensionButton = page.getByRole('button', { name: 'Delete' });
     this.status = page.getByLabel('Extension Status Label');
+    console.log(
+      'ExtensionDetailsPage constructor',
+      this.enableButton,
+      this.disableButton,
+      this.removeExtensionButton,
+      this.status,
+    );
   }
 
   async disableExtension(): Promise<this> {
@@ -54,9 +62,13 @@ export class ExtensionPage extends SettingsPage {
     return this;
   }
 
-  async removeExtension(): Promise<SettingsExtensionsPage> {
+  async removeExtension(): Promise<ExtensionsPage> {
     await this.disableExtension();
     await this.removeExtensionButton.click();
-    return new SettingsExtensionsPage(this.page);
+    return new ExtensionsPage(this.page);
+  }
+
+  getOpenExtensionDetailsLink(): Locator {
+    return this.page.getByRole('button', { name: `${this.extensionName} extension details`, exact: true });
   }
 }

tests/playwright/src/model/pages/extensions-page.ts

@@ -0,0 +1,104 @@
+/**********************************************************************
+ * Copyright (C) 2023-2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import type { Locator, Page } from '@playwright/test';
+import { expect as playExpect } from '@playwright/test';
+
+import { ExtensionDetailsPage } from './extension-details-page';
+import { MainPage } from './main-page';
+
+export class ExtensionsPage extends MainPage {
+  readonly heading: Locator;
+  readonly header: Locator;
+  readonly content: Locator;
+  readonly imageInstallBox: Locator;
+
+  constructor(page: Page) {
+    super(page, 'extensions');
+    this.header = page.getByRole('region', { name: 'Header' });
+    this.content = page.getByRole('region', { name: 'Content' });
+    this.heading = this.header.getByLabel('Title').getByText('Extensions');
+    this.imageInstallBox = this.content.getByRole('region', { name: 'Install Extension from OCI image' });
+  }
+
+  public async installExtensionFromOCIImage(extension: string): Promise<ExtensionsPage> {
+    console.log('installing extension from OCI image', extension);
+    // open button to install extension from OCI image
+    const instalButton = this.getInstallManuallyButton();
+    console.log('instalButto', instalButton);
+    await playExpect(instalButton).toBeEnabled();
+    console.log('button is there, clicking on it');
+    await instalButton.click();
+
+    const imageInput = this.page.getByRole('textbox', { name: 'Image name to install custom extension' });
+    // check visibility of the input
+    console.log('imageInput is', imageInput);
+    await playExpect(imageInput).toBeVisible();
+    console.log('input is there, filling it with', extension);
+
+    await imageInput.fill(extension);
+
+    const installButton = this.page.getByRole('button', { name: 'Install', exact: true });
+    console.log('Install button is', installButton);
+    await playExpect(installButton).toBeEnabled();
+    console.log('Install button is visible');
+
+    await installButton.click();
+
+    const doneButton = this.page.getByRole('button', { name: 'Done', exact: true });
+    console.log('doneButton button is', installButton);
+    await playExpect(doneButton).toBeEnabled({ timeout: 30000 });
+    console.log('done button is visible');
+    await doneButton.click();
+
+    return this;
+  }
+
+  public async openExtensionPage<T extends ExtensionDetailsPage>(type: new (page: Page) => T): Promise<T> {
+    const desiredPage = new type(this.page);
+    await desiredPage.getOpenExtensionDetailsLink().click();
+    return desiredPage;
+  }
+
+  getOpenExtensionDetailsLink(extensionName: string): Locator {
+    return this.page.getByRole('button', { name: `${extensionName} extension details`, exact: true }).first();
+  }
+
+  getInstallManuallyButton(): Locator {
+    return this.page.getByRole('button', { name: 'Install custom...', exact: true });
+  }
+
+  async openExtensionDetails(extensionName: string): Promise<ExtensionDetailsPage> {
+    console.log('get openExtensionDetails link for', extensionName);
+    const openLink = this.getOpenExtensionDetailsLink(extensionName);
+    console.log('openLink', openLink);
+    if (openLink === undefined) {
+      throw Error(`Extension '${extensionName}' does not exist`);
+    }
+
+    // wait the link to be there
+    console.log('waiting for the link to be visible');
+    await playExpect(openLink).toBeVisible();
+    console.log('link is visible');
+
+    console.log('got openlink', openLink);
+    await openLink.click();
+    console.log('after clicking on the link....');
+    return new ExtensionDetailsPage(this.page, extensionName);
+  }
+}

tests/playwright/src/model/pages/openshift-local-extension-page.ts

@@ -1,27 +0,0 @@
-/**********************************************************************
- * Copyright (C) 2023 Red Hat, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- ***********************************************************************/
-
-import type { Page } from '@playwright/test';
-
-import { ExtensionPage } from './extension-page';
-
-export class OpenshiftLocalExtensionPage extends ExtensionPage {
-  constructor(page: Page) {
-    super(page, 'Red Hat OpenShift Local', 'Red Hat OpenShift Local Extension');
-  }
-}

tests/playwright/src/model/pages/sandbox-extension-page.ts

@@ -1,27 +0,0 @@
-/**********************************************************************
- * Copyright (C) 2023 Red Hat, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- ***********************************************************************/
-
-import type { Page } from '@playwright/test';
-
-import { ExtensionPage } from './extension-page';
-
-export class SandboxExtensionPage extends ExtensionPage {
-  constructor(page: Page) {
-    super(page, 'Red Hat OpenShift Sandbox', 'Red Hat OpenShift Sandbox Extension');
-  }
-}

tests/playwright/src/model/pages/settings-extensions-page.ts

@@ -1,73 +0,0 @@
-/**********************************************************************
- * Copyright (C) 2023-2024 Red Hat, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- ***********************************************************************/
-
-import type { Locator, Page } from '@playwright/test';
-import { expect as playExpect } from '@playwright/test';
-
-import { SettingsPage } from './settings-page';
-
-export class SettingsExtensionsPage extends SettingsPage {
-  readonly heading: Locator;
-  readonly header: Locator;
-  readonly content: Locator;
-  readonly featuredExtensions: Locator;
-  readonly devSandboxBox: Locator;
-  readonly openshiftLocalBox: Locator;
-  readonly imageInstallBox: Locator;
-  readonly installedExtensions: Locator;
-
-  constructor(page: Page) {
-    super(page, 'Extensions');
-    this.header = page.getByRole('region', { name: 'Header' });
-    this.content = page.getByRole('region', { name: 'Content' });
-    this.heading = this.header.getByLabel('Title').getByText('Extensions');
-    this.featuredExtensions = this.content.getByLabel('FeaturedExtensions');
-    this.devSandboxBox = this.featuredExtensions.getByLabel('Developer Sandbox');
-    this.openshiftLocalBox = this.featuredExtensions.getByLabel('OpenShift Local');
-    this.imageInstallBox = this.content.getByRole('region', { name: 'OCI image installation box' });
-    this.installedExtensions = this.content.getByRole('table', { name: 'Installed Extensions' });
-  }
-
-  public async installExtensionFromOCIImage(extension: string): Promise<SettingsExtensionsPage> {
-    const imageInput = this.imageInstallBox.getByLabel('OCI Image Name');
-    await imageInput.fill(extension);
-
-    const installButton = this.imageInstallBox.getByRole('button', { name: 'Install extension from the OCI image' });
-    await playExpect(installButton).toBeEnabled();
-
-    await installButton.click();
-    await playExpect(this.imageInstallBox).toContainText('installation finished', { timeout: 30000 });
-    return this;
-  }
-
-  public getExtensionRowFromTable(extensionName: string): Locator {
-    return this.installedExtensions.getByRole('row', { name: extensionName });
-  }
-
-  public getExtensionStopButton(extensionRow: Locator): Locator {
-    return extensionRow.getByLabel('Extension Action Stop');
-  }
-
-  public getExtensionStartButton(extensionRow: Locator): Locator {
-    return extensionRow.getByLabel('Extension Action Start');
-  }
-
-  public getFeaturedExtension(extensionName: string): Locator {
-    return this.featuredExtensions.getByLabel(extensionName, { exact: true });
-  }
-}

tests/playwright/src/model/workbench/navigation.ts

@@ -20,6 +20,7 @@ import { expect, type Locator, type Page } from '@playwright/test';
 
 import { ContainersPage } from '../pages/containers-page';
 import { DashboardPage } from '../pages/dashboard-page';
+import { ExtensionsPage } from '../pages/extensions-page';
 import { ImagesPage } from '../pages/images-page';
 import { PodsPage } from '../pages/pods-page';
 import { SettingsBar } from '../pages/settings-bar';
@@ -34,6 +35,7 @@ export class NavigationBar {
   readonly podsLink: Locator;
   readonly dashboardLink: Locator;
   readonly settingsLink: Locator;
+  readonly extensionsLink: Locator;
 
   constructor(page: Page) {
     this.page = page;
@@ -44,6 +46,7 @@ export class NavigationBar {
     this.volumesLink = this.page.getByRole('link', { name: 'Volumes' });
     this.dashboardLink = this.page.getByRole('link', { name: 'Dashboard' });
     this.settingsLink = this.page.getByRole('link', { name: 'Settings' });
+    this.extensionsLink = this.navigationLocator.getByRole('link', { name: 'Extensions', exact: true });
   }
 
   async openDashboard(): Promise<DashboardPage> {
@@ -84,4 +87,10 @@ export class NavigationBar {
     await this.volumesLink.click({ timeout: 5000 });
     return new VolumesPage(this.page);
   }
+
+  async openExtensions(): Promise<ExtensionsPage> {
+    await this.extensionsLink.waitFor({ state: 'visible', timeout: 3000 });
+    await this.extensionsLink.click({ timeout: 5000 });
+    return new ExtensionsPage(this.page);
+  }
 }

tests/playwright/src/specs/extension-installation.spec.ts

@@ -21,12 +21,11 @@ import { expect as playExpect } from '@playwright/test';
 import { afterAll, beforeAll, beforeEach, describe, test } from 'vitest';
 
 import { DashboardPage } from '../model/pages/dashboard-page';
-import { OpenshiftLocalExtensionPage } from '../model/pages/openshift-local-extension-page';
+import { ExtensionsPage } from '../model/pages/extensions-page';
 import { ResourcesPage } from '../model/pages/resources-page';
-import { SandboxExtensionPage } from '../model/pages/sandbox-extension-page';
 import { SettingsBar } from '../model/pages/settings-bar';
-import { SettingsExtensionsPage } from '../model/pages/settings-extensions-page';
 import { WelcomePage } from '../model/pages/welcome-page';
+import { NavigationBar } from '../model/workbench/navigation';
 import { PodmanDesktopRunner } from '../runner/podman-desktop-runner';
 import type { RunnerTestContext } from '../testContext/runner-test-context';
 
@@ -43,19 +42,22 @@ let extensionDashboardBox: Locator;
 let extensionDashboardProvider: Locator;
 let extensionSettingsBox: Locator;
 let installButtonLabel: string;
-let settingsLink: string;
+let extensionName: string;
 let resourceLabel: string;
 let imageLink: string;
-let settingsTableLabel: string;
 
 let extensionBoxVisible: boolean;
 
+let navBar: NavigationBar;
+
 const _startup = async function (): Promise<void> {
   pdRunner = new PodmanDesktopRunner();
   page = await pdRunner.start();
 
   const welcomePage = new WelcomePage(page);
   await welcomePage.handleWelcomePage(true);
+
+  navBar = new NavigationBar(page);
 };
 
 const _shutdown = async function (): Promise<void> {
@@ -69,13 +71,11 @@ beforeEach<RunnerTestContext>(async ctx => {
 describe.each([
   {
     extensionType: 'Developer Sandbox',
-    extensionPageType: SandboxExtensionPage,
   },
   {
     extensionType: 'Openshift Local',
-    extensionPageType: OpenshiftLocalExtensionPage,
   },
-])('$extensionType installation verification', async ({ extensionType, extensionPageType }) => {
+])('$extensionType installation verification', async ({ extensionType }) => {
   beforeAll(_startup);
   afterAll(_shutdown);
 
@@ -90,10 +90,8 @@ describe.each([
       await playExpect(installButton).toBeVisible();
     });
 
-    test('Go to settings', async () => {
-      await goToSettings();
-      const settingsBar = new SettingsBar(page);
-      await settingsBar.openTabPage(SettingsExtensionsPage);
+    test('Go to extensions', async () => {
+      await navBar.openExtensions();
     });
 
     test.runIf(extensionBoxVisible)('Check Settings extension component for installation availability', async () => {
@@ -102,39 +100,27 @@ describe.each([
     });
   });
 
-  test('Install extension through Settings', async () => {
-    const settingsPage = new SettingsExtensionsPage(page);
-    let installButton = extensionSettingsBox.getByRole('button', { name: installButtonLabel });
+  test('Install extension through Extensions page', async () => {
+    const extensionsPage = new ExtensionsPage(page);
 
-    if (!extensionBoxVisible) {
-      const imageInstallBox = settingsPage.imageInstallBox;
-      const imageInput = imageInstallBox.getByLabel('OCI Image Name');
-      await imageInput.fill(imageLink);
+    await extensionsPage.installExtensionFromOCIImage(imageLink);
+    const extensionDetailsPage = await extensionsPage.openExtensionDetails(extensionName);
 
-      installButton = imageInstallBox.getByRole('button', { name: 'Install extension from the OCI image' });
-      await installButton.isEnabled();
-    }
-
-    await installButton.click();
-
-    const installedExtensionRow = settingsPage.getExtensionRowFromTable(settingsTableLabel);
-    const extensionRunningLabel = installedExtensionRow.getByText(ACTIVE);
-    await playExpect(extensionRunningLabel).toBeVisible({ timeout: 180000 });
+    const extensionStatusLabel = extensionDetailsPage.status;
+    await playExpect(extensionStatusLabel).toBeVisible({ timeout: 180000 });
   }, 200000);
 
   describe('Verify UI components after installation', async () => {
     test('Verify Settings components', async () => {
-      const settingsBar = new SettingsBar(page);
-      await playExpect(settingsBar.settingsNavBar.getByRole('link', { name: settingsLink })).toBeVisible();
-
-      const extensionPage = await settingsBar.openTabPage(extensionPageType);
-      await playExpect(extensionPage.heading).toBeVisible();
+      const extensionsPage = await navBar.openExtensions();
+      const extensionPage = await extensionsPage.openExtensionDetails(extensionName);
       await playExpect(extensionPage.status).toHaveText(ACTIVE);
     });
 
     describe('Toggle and verify extension status', async () => {
       test('Disable extension and verify Dashboard and Resources components', async () => {
-        const extensionPage = new extensionPageType(page);
+        const extensionsPage = await navBar.openExtensions();
+        const extensionPage = await extensionsPage.openExtensionDetails(extensionName);
 
         await extensionPage.disableButton.click();
         await playExpect(extensionPage.status).toHaveText(DISABLED);
@@ -143,8 +129,7 @@ describe.each([
         await playExpect(extensionDashboardProvider).toBeHidden();
         await playExpect(extensionDashboardStatus).toBeHidden();
 
-        await goToSettings();
-        const settingsBar = new SettingsBar(page);
+        const settingsBar = await goToSettings();
         const resourcesPage = await settingsBar.openTabPage(ResourcesPage);
         const extensionResourceBox = resourcesPage.featuredProviderResources.getByRole('region', {
           name: resourceLabel,
@@ -153,9 +138,8 @@ describe.each([
       });
 
       test('Enable extension and verify Dashboard and Resources components', async () => {
-        const settingsBar = new SettingsBar(page);
-        await settingsBar.openTabPage(SettingsExtensionsPage);
-        const extensionPage = await settingsBar.openTabPage(extensionPageType);
+        const extensionsPage = await navBar.openExtensions();
+        const extensionPage = await extensionsPage.openExtensionDetails(extensionName);
 
         await extensionPage.enableButton.click();
         await playExpect(extensionPage.status).toHaveText(ACTIVE, { timeout: 10000 });
@@ -169,7 +153,7 @@ describe.each([
           await playExpect(extensionDashboardStatus).toHaveText(NOT_INSTALLED);
         }
 
-        await goToSettings();
+        const settingsBar = await goToSettings();
         const resourcesPage = await settingsBar.openTabPage(ResourcesPage);
         const extensionResourceBox = resourcesPage.featuredProviderResources.getByRole('region', {
           name: resourceLabel,
@@ -180,20 +164,15 @@ describe.each([
   });
 
   describe('Remove extension and verify UI', async () => {
-    test('Remove extension and verify Settings components', async () => {
-      const settingsBar = new SettingsBar(page);
-      await settingsBar.openTabPage(SettingsExtensionsPage);
-      const extensionPage = await settingsBar.openTabPage(extensionPageType);
+    test('Remove extension and verify components', async () => {
+      const extensionsPage = await navBar.openExtensions();
+
+      const extensionPage = await extensionsPage.openExtensionDetails(extensionName);
 
       await extensionPage.disableButton.click();
       await extensionPage.removeExtensionButton.click();
 
-      await playExpect(settingsBar.settingsNavBar.getByRole('link', { name: settingsLink })).toBeHidden();
-
-      const settingsPage = new SettingsExtensionsPage(page);
-      const installedExtensionRow = settingsPage.getExtensionRowFromTable(settingsTableLabel);
-      await playExpect(installedExtensionRow).toBeHidden();
-
+      const settingsBar = await goToSettings();
       const resourcesPage = await settingsBar.openTabPage(ResourcesPage);
       const extensionResourceBox = resourcesPage.featuredProviderResources.getByRole('region', { name: resourceLabel });
       await playExpect(extensionResourceBox).toBeHidden();
@@ -209,30 +188,25 @@ describe.each([
 
 function initializeLocators(extensionType: string): void {
   const dashboardPage = new DashboardPage(page);
-  const settingsExtensionsPage = new SettingsExtensionsPage(page);
   switch (extensionType) {
     case 'Developer Sandbox': {
       extensionDashboardStatus = dashboardPage.devSandboxStatusLabel;
       extensionDashboardBox = dashboardPage.devSandboxBox;
       extensionDashboardProvider = dashboardPage.devSandboxProvider;
-      extensionSettingsBox = settingsExtensionsPage.devSandboxBox;
       installButtonLabel = 'Install redhat.redhat-sandbox Extension';
-      settingsLink = 'Red Hat OpenShift Sandbox';
+      extensionName = 'redhat-sandbox';
       resourceLabel = 'redhat.sandbox';
       imageLink = 'ghcr.io/redhat-developer/podman-desktop-sandbox-ext:0.0.2';
-      settingsTableLabel = 'redhat-sandbox';
       break;
     }
     case 'Openshift Local': {
       extensionDashboardStatus = dashboardPage.openshiftLocalStatusLabel;
       extensionDashboardBox = dashboardPage.openshiftLocalBox;
       extensionDashboardProvider = dashboardPage.openshiftLocalProvider;
-      extensionSettingsBox = settingsExtensionsPage.openshiftLocalBox;
       installButtonLabel = 'Install redhat.openshift-local Extension';
-      settingsLink = 'Red Hat OpenShift Local';
+      extensionName = 'openshift-local';
       resourceLabel = 'crc';
       imageLink = 'quay.io/redhat-developer/openshift-local-extension:v1.3.0';
-      settingsTableLabel = 'openshift-local';
       break;
     }
   }
@@ -245,9 +219,10 @@ async function goToDashboard(): Promise<void> {
   await dashboardLink.click();
 }
 
-async function goToSettings(): Promise<void> {
+async function goToSettings(): Promise<SettingsBar> {
   const navBar = page.getByRole('navigation', { name: 'AppNavigation' });
   const settingsLink = navBar.getByRole('link', { name: 'Settings' });
   await playExpect(settingsLink).toBeVisible();
   await settingsLink.click();
+  return new SettingsBar(page);
 }

tests/playwright/src/specs/podman-extension-smoke.spec.ts

@@ -21,21 +21,17 @@ import type { Page } from 'playwright';
 import { afterAll, beforeAll, beforeEach, describe, test } from 'vitest';
 
 import type { DashboardPage } from '../model/pages/dashboard-page';
-import { ExtensionPage } from '../model/pages/extension-page';
+import type { ExtensionDetailsPage } from '../model/pages/extension-details-page';
 import type { SettingsBar } from '../model/pages/settings-bar';
-import { SettingsExtensionsPage } from '../model/pages/settings-extensions-page';
 import { WelcomePage } from '../model/pages/welcome-page';
 import { NavigationBar } from '../model/workbench/navigation';
 import { PodmanDesktopRunner } from '../runner/podman-desktop-runner';
 import type { RunnerTestContext } from '../testContext/runner-test-context';
 
-const SETTINGS_EXTENSIONS_TABLE_PODMAN_TITLE: string = 'podman';
-const SETTINGS_EXTENSIONS_TABLE_EXTENSION_STATUS_LABEL: string = 'Extension Status Label';
+const EXTENSION_PODMAN_TITLE: string = 'podman';
 const PODMAN_EXTENSION_STATUS_ACTIVE: string = 'ACTIVE';
 const PODMAN_EXTENSION_STATUS_DISABLED: string = 'DISABLED';
 const SETTINGS_NAVBAR_PREFERENCES_PODMAN_EXTENSION: string = 'Extension: Podman';
-const SETTINGS_NAVBAR_EXTENSIONS_PODMAN: string = 'Podman';
-const PODMAN_EXTENSION_PAGE_HEADING: string = 'Podman Extension';
 
 let pdRunner: PodmanDesktopRunner;
 let page: Page;
@@ -66,17 +62,13 @@ describe('Verification of Podman extension', async () => {
     await verifyPodmanExtensionStatus(true);
   });
   test('Podman extension can be disabled from Podman Extension Page', async () => {
-    await openSettingsExtensionsPage();
-    const podmanExtensionPage = await openSettingsExtensionsPodmanPage();
+    const podmanExtensionPage = await openExtensionsPodmanPage();
     await podmanExtensionPage.disableButton.click();
     await verifyPodmanExtensionStatus(false);
   });
-  test('Podman extension can be re-enabled from Settings Extension Page', async () => {
-    const settingsExtensionsPage = await openSettingsExtensionsPage();
-    const podmanExtensionRowLocator = settingsExtensionsPage.getExtensionRowFromTable(
-      SETTINGS_EXTENSIONS_TABLE_PODMAN_TITLE,
-    );
-    await settingsExtensionsPage.getExtensionStartButton(podmanExtensionRowLocator).click();
+  test('Podman extension can be re-enabled from Extension Page', async () => {
+    const podmanExtensionPage = await openExtensionsPodmanPage(); // enable the extension
+    await podmanExtensionPage.enableExtension();
     await verifyPodmanExtensionStatus(true);
   });
 });
@@ -88,20 +80,15 @@ async function verifyPodmanExtensionStatus(enabled: boolean): Promise<void> {
     ? await playExpect(podmanProviderLocator).toBeVisible()
     : await playExpect(podmanProviderLocator).not.toBeVisible();
   // always present and visible
-  const settingsExtensionsPage = await openSettingsExtensionsPage();
-  const podmanExtensionRowLocator = settingsExtensionsPage.getExtensionRowFromTable(
-    SETTINGS_EXTENSIONS_TABLE_PODMAN_TITLE,
-  );
-  await playExpect(podmanExtensionRowLocator).toBeVisible();
-  // -> await for the stop button to be visible to prevent state when the extension status is STARTING
-  await playExpect(
-    enabled
-      ? settingsExtensionsPage.getExtensionStopButton(podmanExtensionRowLocator)
-      : settingsExtensionsPage.getExtensionStartButton(podmanExtensionRowLocator),
-  ).toBeVisible();
-  const extensionStatusLabel = podmanExtensionRowLocator.getByLabel(SETTINGS_EXTENSIONS_TABLE_EXTENSION_STATUS_LABEL);
+  // go to the details of the extension
+  const extensionsPage = await navigationBar.openExtensions();
+  const extensionDetailsPage = await extensionsPage.openExtensionDetails(EXTENSION_PODMAN_TITLE);
+
+  const extensionStatusLabel = extensionDetailsPage.status;
+
   await playExpect(extensionStatusLabel).toBeVisible();
   await extensionStatusLabel.scrollIntoViewIfNeeded();
+
   const extensionStatusLocatorText = await extensionStatusLabel.innerText({ timeout: 3000 });
   // --------------------------
   playExpect(
@@ -110,19 +97,22 @@ async function verifyPodmanExtensionStatus(enabled: boolean): Promise<void> {
       : extensionStatusLocatorText === PODMAN_EXTENSION_STATUS_DISABLED,
   ).toBeTruthy();
   // always present and visible
-  const podmanExtensionPage = await openSettingsExtensionsPodmanPage();
-  await playExpect(podmanExtensionPage.heading).toBeVisible();
+  const extensionsPageAfter = await navigationBar.openExtensions();
+  const podmanExtensionPage = await extensionsPageAfter.openExtensionDetails(EXTENSION_PODMAN_TITLE);
+
   // --------------------------
   if (enabled) {
-    await playExpect(podmanExtensionPage.enableButton).toBeDisabled({ timeout: 10000 });
-    await playExpect(podmanExtensionPage.disableButton).toBeEnabled({ timeout: 10000 });
+    await playExpect(podmanExtensionPage.enableButton).toBeVisible({ visible: false, timeout: 10000 });
+    await playExpect(podmanExtensionPage.disableButton).toBeVisible({ visible: true, timeout: 10000 });
     await playExpect(podmanExtensionPage.status.getByText(PODMAN_EXTENSION_STATUS_ACTIVE)).toBeVisible();
   } else {
-    await playExpect(podmanExtensionPage.enableButton).toBeEnabled({ timeout: 10000 });
-    await playExpect(podmanExtensionPage.disableButton).toBeDisabled({ timeout: 10000 });
+    await playExpect(podmanExtensionPage.enableButton).toBeVisible({ visible: true, timeout: 10000 });
+    await playExpect(podmanExtensionPage.disableButton).toBeVisible({ visible: false, timeout: 10000 });
     await playExpect(podmanExtensionPage.status.getByText(PODMAN_EXTENSION_STATUS_DISABLED)).toBeVisible();
   }
+
   // expand Settings -> Preferences menu
+  settingsBar = await navigationBar.openSettings();
   await settingsBar.preferencesTab.click();
   enabled
     ? await playExpect(
@@ -135,14 +125,7 @@ async function verifyPodmanExtensionStatus(enabled: boolean): Promise<void> {
   await settingsBar.preferencesTab.click();
 }
 
-async function openSettingsExtensionsPage(): Promise<SettingsExtensionsPage> {
-  await navigationBar.openDashboard();
-  settingsBar = await navigationBar.openSettings();
-  return settingsBar.openTabPage(SettingsExtensionsPage);
-}
-
-async function openSettingsExtensionsPodmanPage(): Promise<ExtensionPage> {
-  const podmanExtensionNavBarLocator = settingsBar.getSettingsNavBarTabLocator(SETTINGS_NAVBAR_EXTENSIONS_PODMAN);
-  await podmanExtensionNavBarLocator.click();
-  return new ExtensionPage(page, SETTINGS_NAVBAR_EXTENSIONS_PODMAN, PODMAN_EXTENSION_PAGE_HEADING);
+async function openExtensionsPodmanPage(): Promise<ExtensionDetailsPage> {
+  const extensionsPage = await navigationBar.openExtensions();
+  return extensionsPage.openExtensionDetails(EXTENSION_PODMAN_TITLE);
 }