test: Migrate UI tests from Cypress -> Playwright (no-changelog) (#18201)

packages/testing/playwright/pages/CanvasPage.ts

@@ -1,4 +1,5 @@
 import type { Locator } from '@playwright/test';
+import { nanoid } from 'nanoid';
 
 import { BasePage } from './BasePage';
 import { resolveFromRoot } from '../utils/path-helper';
@@ -8,6 +9,10 @@ export class CanvasPage extends BasePage {
 		return this.page.getByRole('button', { name: 'Save' });
 	}
 
+	workflowSaveButton(): Locator {
+		return this.page.getByTestId('workflow-save-button');
+	}
+
 	canvasAddButton(): Locator {
 		return this.page.getByTestId('canvas-add-button');
 	}
@@ -132,7 +137,6 @@ export class CanvasPage extends BasePage {
 	async clickExecutionsTab(): Promise<void> {
 		await this.page.getByRole('radio', { name: 'Executions' }).click();
 	}
-
 	async setWorkflowName(name: string): Promise<void> {
 		await this.clickByTestId('inline-edit-preview');
 		await this.fillByTestId('inline-edit-input', name);
@@ -161,7 +165,6 @@ export class CanvasPage extends BasePage {
 	getWorkflowTags() {
 		return this.page.getByTestId('workflow-tags').locator('.el-tag');
 	}
-
 	async activateWorkflow() {
 		const responsePromise = this.page.waitForResponse(
 			(response) =>
@@ -170,4 +173,90 @@ export class CanvasPage extends BasePage {
 		await this.page.getByTestId('workflow-activate-switch').click();
 		await responsePromise;
 	}
+
+	async clickZoomToFitButton(): Promise<void> {
+		await this.clickByTestId('zoom-to-fit');
+	}
+
+	/**
+	 * Get node issues for a specific node
+	 */
+	getNodeIssuesByName(nodeName: string) {
+		return this.nodeByName(nodeName).getByTestId('node-issues');
+	}
+
+	/**
+	 * Add tags to the workflow
+	 * @param count - The number of tags to add
+	 * @returns An array of tag names
+	 */
+	async addTags(count: number = 1): Promise<string[]> {
+		const tags: string[] = [];
+
+		for (let i = 0; i < count; i++) {
+			const tag = `tag-${nanoid(8)}-${i}`;
+			tags.push(tag);
+
+			if (i === 0) {
+				await this.clickByText('Add tag');
+			} else {
+				await this.page
+					.getByTestId('tags-dropdown')
+					.getByText(tags[i - 1])
+					.click();
+			}
+
+			await this.page.getByRole('combobox').first().fill(tag);
+			await this.page.getByRole('combobox').first().press('Enter');
+		}
+
+		await this.page.click('body');
+
+		return tags;
+	}
+
+	// Production Checklist methods
+	getProductionChecklistButton(): Locator {
+		return this.page.getByTestId('suggested-action-count');
+	}
+
+	getProductionChecklistPopover(): Locator {
+		return this.page.locator('[data-reka-popper-content-wrapper=""]').filter({ hasText: /./ });
+	}
+
+	getProductionChecklistActionItem(text?: string): Locator {
+		const items = this.page.getByTestId('suggested-action-item');
+		if (text) {
+			return items.getByText(text);
+		}
+		return items;
+	}
+
+	getProductionChecklistIgnoreAllButton(): Locator {
+		return this.page.getByTestId('suggested-action-ignore-all');
+	}
+
+	getErrorActionItem(): Locator {
+		return this.getProductionChecklistActionItem('Set up error notifications');
+	}
+
+	getTimeSavedActionItem(): Locator {
+		return this.getProductionChecklistActionItem('Track time saved');
+	}
+
+	getEvaluationsActionItem(): Locator {
+		return this.getProductionChecklistActionItem('Test reliability of AI steps');
+	}
+
+	async clickProductionChecklistButton(): Promise<void> {
+		await this.getProductionChecklistButton().click();
+	}
+
+	async clickProductionChecklistIgnoreAll(): Promise<void> {
+		await this.getProductionChecklistIgnoreAllButton().click();
+	}
+
+	async clickProductionChecklistAction(actionText: string): Promise<void> {
+		await this.getProductionChecklistActionItem(actionText).click();
+	}
 }