chore(test): implementing podman machine creation through onboarding …

…workflow e2e test (podman-desktop#5800)

* chore(test): implementing podman machine creation through onboarding workflow e2e test

Signed-off-by: Tibor Dancs (tdancs old laptop podman-desktop windows testing) <[email protected]>

---------
Signed-off-by: Tibor Dancs <[email protected]>
Co-authored-by: Vladimir Lazar <[email protected]>

packages/renderer/src/lib/onboarding/Onboarding.svelte

@@ -298,6 +298,8 @@ function handleEscape({ key }: any) {
   <div class="fixed bg-charcoal-500 right-0 top-0 h-[100px] w-[30px] z-10 mt-8"></div>
   <div
     id="stepBody"
+    role="region"
+    aria-label="Onboarding Body"
     class="flex flex-col bg-charcoal-500 h-full overflow-y-auto w-full overflow-x-hidden"
     class:bodyWithBar="{!activeStep.step.completionEvents || activeStep.step.completionEvents.length === 0}">
     <div class="flex flex-col h-full">

tests/src/model/pages/dashboard-page.ts

@@ -24,6 +24,7 @@ export class DashboardPage extends BasePage {
   readonly header: Locator;
   readonly content: Locator;
   readonly heading: Locator;
+  readonly notificationsBox: Locator;
   readonly featuredExtensions: Locator;
   readonly devSandboxProvider: Locator;
   readonly devSandboxBox: Locator;
@@ -37,9 +38,11 @@ export class DashboardPage extends BasePage {
     this.mainPage = page.getByRole('region', { name: 'Dashboard' });
     this.header = this.mainPage.getByRole('region', { name: 'header' });
     this.content = this.mainPage.getByRole('region', { name: 'content' });
-    this.featuredExtensions = page.getByLabel('FeaturedExtensions');
     this.heading = page.getByRole('heading', { name: 'Dashboard' });
 
+    this.notificationsBox = this.content.getByRole('region', { name: 'Notifications Box' });
+    this.featuredExtensions = page.getByLabel('FeaturedExtensions');
+
     this.devSandboxProvider = page.getByLabel('Developer Sandbox Provider');
     this.devSandboxBox = this.featuredExtensions.getByLabel('Developer Sandbox');
     this.devSandboxEnabledStatus = this.devSandboxProvider.getByText('RUNNING');

tests/src/model/pages/onboarding-page.ts

@@ -0,0 +1,39 @@
+/**********************************************************************
+ * Copyright (C) 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 { BasePage } from './base-page';
+
+export class OnboardingPage extends BasePage {
+  readonly mainPage: Locator;
+  readonly header: Locator;
+  readonly onboardingComponent: Locator;
+  readonly onboardingStatusMessage: Locator;
+  readonly nextStepButton: Locator;
+  readonly cancelSetupButtion: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.mainPage = page.getByRole('region', { name: 'Onboarding Body' });
+    this.header = this.mainPage.getByRole('heading', { name: 'Header' });
+    this.onboardingComponent = this.mainPage.getByLabel('Onboarding Component');
+    this.onboardingStatusMessage = this.mainPage.getByLabel('Onboarding Status Message');
+    this.nextStepButton = this.mainPage.getByRole('button', { name: 'Next Step' });
+    this.cancelSetupButtion = this.mainPage.getByRole('button', { name: 'Cancel Setup' });
+  }
+}

tests/src/model/pages/podman-machine-details-page.ts

@@ -0,0 +1,44 @@
+/**********************************************************************
+ * Copyright (C) 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 { ResourcesPage } from './resources-page';
+
+export class PodmanMachineDetails extends ResourcesPage {
+  readonly podmanMachineName: Locator;
+  readonly podmanMachineStatus: Locator;
+  readonly podmanMachineConnectionActions: Locator;
+  readonly podmanMachineStartButton: Locator;
+  readonly podmanMachineRestartButton: Locator;
+  readonly podmanMachineStopButton: Locator;
+  readonly podmanMachineDeleteButton: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.podmanMachineName = this.getPage().getByRole('heading', { name: 'Podman Machine' });
+    this.podmanMachineStatus = this.getPage().getByLabel('Connection Status Label');
+    this.podmanMachineConnectionActions = this.getPage().getByRole('group', { name: 'Connection Actions' });
+    this.podmanMachineStartButton = this.podmanMachineConnectionActions.getByRole('button', {
+      name: 'Start',
+      exact: true,
+    });
+    this.podmanMachineRestartButton = this.podmanMachineConnectionActions.getByRole('button', { name: 'Restart' });
+    this.podmanMachineStopButton = this.podmanMachineConnectionActions.getByRole('button', { name: 'Stop' });
+    this.podmanMachineDeleteButton = this.podmanMachineConnectionActions.getByRole('button', { name: 'Delete' });
+  }
+}

tests/src/model/pages/podman-onboarding-page.ts

@@ -0,0 +1,62 @@
+/**********************************************************************
+ * Copyright (C) 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 { OnboardingPage } from './onboarding-page';
+
+export class PodmanOnboardingPage extends OnboardingPage {
+  readonly podmanAutostartToggle: Locator;
+  readonly createMachinePageTitle: Locator;
+  readonly podmanMachineConfiguration: Locator;
+  readonly podmanMachineName: Locator;
+  readonly podmanMachineCPUs: Locator;
+  readonly podmanMachineMemory: Locator;
+  readonly podmanMachineDiskSize: Locator;
+  readonly podmanMachineImage: Locator;
+  readonly podmanMachineRootfulCheckbox: Locator;
+  readonly podmanMachineUserModeNetworkingCheckbox: Locator;
+  readonly podmanMachineStartAfterCreationCheckbox: Locator;
+  readonly podmanMachineCreateButton: Locator;
+  readonly podmanMachineShowLogsButton: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.podmanAutostartToggle = this.mainPage.getByRole('checkbox', {
+      name: 'Autostart Podman engine when launching Podman Desktop',
+    });
+    this.createMachinePageTitle = this.onboardingComponent.getByLabel('title');
+    this.podmanMachineConfiguration = this.mainPage.getByRole('form', { name: 'Properties Information' });
+    this.podmanMachineName = this.podmanMachineConfiguration.getByRole('textbox', { name: 'Name' });
+    this.podmanMachineCPUs = this.podmanMachineConfiguration.getByRole('slider', { name: 'CPU(s)' });
+    this.podmanMachineMemory = this.podmanMachineConfiguration.getByRole('slider', { name: 'Memory' });
+    this.podmanMachineDiskSize = this.podmanMachineConfiguration.getByRole('slider', { name: 'Disk size' });
+    this.podmanMachineImage = this.podmanMachineConfiguration.getByRole('textbox', { name: 'Image Path (Optional)' });
+    this.podmanMachineRootfulCheckbox = this.podmanMachineConfiguration.getByRole('checkbox', {
+      name: 'Machine with root privileges',
+    });
+    this.podmanMachineUserModeNetworkingCheckbox = this.podmanMachineConfiguration.getByRole('checkbox', {
+      name: 'User mode networking',
+      exact: false,
+    });
+    this.podmanMachineStartAfterCreationCheckbox = this.podmanMachineConfiguration.getByRole('checkbox', {
+      name: 'Start the machine now',
+    });
+    this.podmanMachineCreateButton = this.podmanMachineConfiguration.getByRole('button', { name: 'Create' });
+    this.podmanMachineShowLogsButton = this.mainPage.getByRole('button', { name: 'Show Logs' });
+  }
+}

tests/src/model/pages/resources-page.ts

@@ -22,10 +22,12 @@ import { SettingsPage } from './settings-page';
 export class ResourcesPage extends SettingsPage {
   readonly heading: Locator;
   readonly featuredProviderResources: Locator;
+  readonly podmanResources: Locator;
 
   constructor(page: Page) {
     super(page, 'Resources');
     this.heading = page.getByRole('heading', { name: 'Resources' });
     this.featuredProviderResources = page.getByRole('region', { name: 'Featured Provider Resources' });
+    this.podmanResources = this.featuredProviderResources.getByRole('region', { name: 'podman', exact: true });
   }
 }

tests/src/model/pages/resources-podman-connections-page.ts

@@ -0,0 +1,45 @@
+/**********************************************************************
+ * Copyright (C) 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 { ResourcesPage } from './resources-page';
+
+export class ResourcesPodmanConnections extends ResourcesPage {
+  readonly providerConnections: Locator;
+  readonly podmanMachineElement: Locator;
+  readonly machineConnectionStatus: Locator;
+  readonly machineDetailsButton: Locator;
+  readonly machineConnectionActions: Locator;
+  readonly machineStartButton: Locator;
+  readonly machineRestartButton: Locator;
+  readonly machineStopButton: Locator;
+  readonly machineDeleteButton: Locator;
+
+  constructor(page: Page, machineVisibleName: string) {
+    super(page);
+    this.providerConnections = this.podmanResources.getByRole('region', { name: 'Provider Connections' });
+    this.podmanMachineElement = this.providerConnections.getByRole('region', { name: machineVisibleName });
+    this.machineConnectionStatus = this.podmanMachineElement.getByLabel('Connection Status Label');
+    this.machineDetailsButton = this.podmanMachineElement.getByRole('button', { name: 'Podman details' });
+    this.machineConnectionActions = this.podmanMachineElement.getByRole('group', { name: 'Connection Actions' });
+    this.machineStartButton = this.machineConnectionActions.getByRole('button', { name: 'Start', exact: true });
+    this.machineRestartButton = this.machineConnectionActions.getByRole('button', { name: 'Restart' });
+    this.machineStopButton = this.machineConnectionActions.getByRole('button', { name: 'Stop' });
+    this.machineDeleteButton = this.machineConnectionActions.getByRole('button', { name: 'Delete' });
+  }
+}