test: Migrate data pinning tests from Cypress to Playwright (#18462)

packages/testing/playwright/pages/NodeDisplayViewPage.ts

@@ -44,10 +44,136 @@ export class NodeDisplayViewPage extends BasePage {
 		return this.page.getByTestId('output-panel');
 	}
 
+	getContainer() {
+		return this.page.getByTestId('ndv');
+	}
+
 	getParameterExpressionPreviewValue() {
 		return this.page.getByTestId('parameter-expression-preview-value');
 	}
 
+	getEditPinnedDataButton() {
+		return this.page.getByTestId('ndv-edit-pinned-data');
+	}
+
+	getPinDataButton() {
+		return this.getOutputPanel().getByTestId('ndv-pin-data');
+	}
+
+	getRunDataPaneHeader() {
+		return this.page.getByTestId('run-data-pane-header');
+	}
+
+	getOutputTable() {
+		return this.getOutputPanel().getByTestId('ndv-data-container').locator('table');
+	}
+
+	getOutputDataContainer() {
+		return this.getOutputPanel().getByTestId('ndv-data-container');
+	}
+
+	getOutputTableRows() {
+		return this.getOutputTable().locator('tr');
+	}
+
+	getOutputTableHeaders() {
+		return this.getOutputTable().locator('thead th');
+	}
+
+	getOutputTableRow(row: number) {
+		return this.getOutputTableRows().nth(row);
+	}
+
+	getOutputTableCell(row: number, col: number) {
+		return this.getOutputTableRow(row).locator('td').nth(col);
+	}
+
+	getOutputTbodyCell(row: number, col: number) {
+		return this.getOutputTableRow(row).locator('td').nth(col);
+	}
+
+	// Pin data operations
+	async setPinnedData(data: object | string) {
+		const pinnedData = typeof data === 'string' ? data : JSON.stringify(data);
+		await this.getEditPinnedDataButton().click();
+
+		// Wait for editor to appear and use broader selector
+		const editor = this.getOutputPanel().locator('[contenteditable="true"]');
+		await editor.waitFor();
+		await editor.click();
+		await editor.fill(pinnedData);
+
+		await this.savePinnedData();
+	}
+
+	async pastePinnedData(data: object) {
+		await this.getEditPinnedDataButton().click();
+
+		const editor = this.getOutputPanel().locator('[contenteditable="true"]');
+		await editor.waitFor();
+		await editor.click();
+		await editor.fill('');
+
+		// Set clipboard data and paste
+		await this.page.evaluate(async (jsonData) => {
+			await navigator.clipboard.writeText(JSON.stringify(jsonData));
+		}, data);
+		await this.page.keyboard.press('ControlOrMeta+V');
+
+		await this.savePinnedData();
+	}
+
+	async savePinnedData() {
+		await this.getRunDataPaneHeader().locator('button:visible').filter({ hasText: 'Save' }).click();
+	}
+
+	// Assignment collection methods for advanced tests
+	getAssignmentCollectionAdd(paramName: string) {
+		return this.page
+			.getByTestId(`assignment-collection-${paramName}`)
+			.getByTestId('assignment-collection-drop-area');
+	}
+
+	getAssignmentValue(paramName: string) {
+		return this.page
+			.getByTestId(`assignment-collection-${paramName}`)
+			.getByTestId('assignment-value');
+	}
+
+	getInlineExpressionEditorInput() {
+		return this.page.getByTestId('inline-expression-editor-input');
+	}
+
+	getNodeParameters() {
+		return this.page.getByTestId('node-parameters');
+	}
+
+	getParameterInputHint() {
+		return this.page.getByTestId('parameter-input-hint');
+	}
+
+	async makeWebhookRequest(path: string) {
+		return await this.page.request.get(path);
+	}
+
+	getVisiblePoppers() {
+		return this.page.locator('.el-popper:visible');
+	}
+
+	async clearExpressionEditor() {
+		const editor = this.getInlineExpressionEditorInput();
+		await editor.click();
+		await this.page.keyboard.press('ControlOrMeta+A');
+		await this.page.keyboard.press('Delete');
+	}
+
+	async typeInExpressionEditor(text: string) {
+		const editor = this.getInlineExpressionEditorInput();
+		await editor.click();
+		// We have to use type() instead of fill() because the editor is a CodeMirror editor
+		await editor.type(text);
+	}
+
 	/**
 	 * Get parameter input by name (for Code node and similar)
 	 * @param parameterName - The name of the parameter e.g 'jsCode', 'mode'