test: Add core entry points to allow easier test setup (#18597)

Author: shortstacked

packages/testing/playwright/composables/TestEntryComposer.ts

@@ -0,0 +1,54 @@
+import type { n8nPage } from '../pages/n8nPage';
+
+/**
+ * Composer for UI test entry points. All methods in this class navigate to or verify UI state.
+ * For API-only testing, use the standalone `api` fixture directly instead.
+ */
+export class TestEntryComposer {
+	constructor(private readonly n8n: n8nPage) {}
+
+	/**
+	 * Start UI test from the home page and navigate to canvas
+	 */
+	async fromHome() {
+		await this.n8n.goHome();
+		await this.n8n.page.waitForURL('/home/workflows');
+	}
+
+	/**
+	 * Start UI test from a blank canvas (assumes already on canvas)
+	 */
+	async fromBlankCanvas() {
+		await this.n8n.goHome();
+		await this.n8n.workflows.clickAddWorkflowButton();
+		// Verify we're on canvas
+		await this.n8n.canvas.canvasPane().isVisible();
+	}
+
+	/**
+	 * Start UI test from a workflow in a new project
+	 */
+	async fromNewProject() {
+		// Enable features to allow us to create a new project
+		await this.n8n.api.enableFeature('projectRole:admin');
+		await this.n8n.api.enableFeature('projectRole:editor');
+		await this.n8n.api.setMaxTeamProjectsQuota(-1);
+
+		// Create a project using the API
+		const response = await this.n8n.api.projectApi.createProject();
+
+		const projectId = response.id;
+		await this.n8n.page.goto(`workflow/new?projectId=${projectId}`);
+		await this.n8n.canvas.canvasPane().isVisible();
+	}
+
+	/**
+	 * Start UI test from the canvas of an imported workflow
+	 * Returns the workflow import result for use in the test
+	 */
+	async fromImportedWorkflow(workflowFile: string) {
+		const workflowImportResult = await this.n8n.api.workflowApi.importWorkflow(workflowFile);
+		await this.n8n.page.goto(`workflow/${workflowImportResult.workflowId}`);
+		return workflowImportResult;
+	}
+}

packages/testing/playwright/fixtures/base.ts

@@ -61,7 +61,6 @@ export const test = base.extend<TestFixtures, WorkerFixtures>({
 			const envBaseURL = process.env.N8N_BASE_URL;
 
 			if (envBaseURL) {
-				console.log(`Using external N8N_BASE_URL: ${envBaseURL}`);
 				await use(null as unknown as N8NStack);
 				return;
 			}
@@ -141,8 +140,8 @@ export const test = base.extend<TestFixtures, WorkerFixtures>({
 		await page.close();
 	},
 
-	n8n: async ({ page }, use) => {
-		const n8nInstance = new n8nPage(page);
+	n8n: async ({ page, api }, use) => {
+		const n8nInstance = new n8nPage(page, api);
 		await use(n8nInstance);
 	},
 

packages/testing/playwright/package.json

@@ -24,13 +24,16 @@
   },
   "devDependencies": {
     "@currents/playwright": "^1.15.3",
+    "@n8n/api-types": "workspace:^",
     "@playwright/test": "1.54.2",
     "@types/lodash": "catalog:",
     "eslint-plugin-playwright": "2.2.2",
     "generate-schema": "2.6.0",
+    "n8n": "workspace:*",
     "n8n-containers": "workspace:*",
+    "n8n-core": "workspace:*",
+    "n8n-workflow": "workspace:*",
     "nanoid": "catalog:",
-    "tsx": "catalog:",
-    "@n8n/api-types": "workspace:^"
+    "tsx": "catalog:"
   }
 }

packages/testing/playwright/pages/WorkflowsPage.ts

@@ -3,10 +3,6 @@ import type { Locator } from '@playwright/test';
 import { BasePage } from './BasePage';
 
 export class WorkflowsPage extends BasePage {
-	async clickNewWorkflowCard() {
-		await this.clickByTestId('new-workflow-card');
-	}
-
 	async clickAddFirstProjectButton() {
 		await this.clickByTestId('add-first-project-button');
 	}
@@ -15,10 +11,20 @@ export class WorkflowsPage extends BasePage {
 		await this.clickByTestId('project-plus-button');
 	}
 
+	/**
+	 * This is the add workflow button on the workflows page, visible when there are already workflows.
+	 */
 	async clickAddWorkflowButton() {
 		await this.clickByTestId('add-resource-workflow');
 	}
 
+	/**
+	 * This is the new workflow button on the workflows page, visible when there are no workflows.
+	 */
+	async clickNewWorkflowCard() {
+		await this.clickByTestId('new-workflow-card');
+	}
+
 	getNewWorkflowCard() {
 		return this.page.getByTestId('new-workflow-card');
 	}

packages/testing/playwright/pages/n8nPage.ts

@@ -19,11 +19,14 @@ import { WorkflowSharingModal } from './WorkflowSharingModal';
 import { WorkflowsPage } from './WorkflowsPage';
 import { CanvasComposer } from '../composables/CanvasComposer';
 import { ProjectComposer } from '../composables/ProjectComposer';
+import { TestEntryComposer } from '../composables/TestEntryComposer';
 import { WorkflowComposer } from '../composables/WorkflowComposer';
+import type { ApiHelpers } from '../services/api-helper';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export class n8nPage {
 	readonly page: Page;
+	readonly api: ApiHelpers;
 
 	// Pages
 	readonly aiAssistant: AIAssistantPage;
@@ -51,9 +54,11 @@ export class n8nPage {
 	readonly workflowComposer: WorkflowComposer;
 	readonly projectComposer: ProjectComposer;
 	readonly canvasComposer: CanvasComposer;
+	readonly start: TestEntryComposer;
 
-	constructor(page: Page) {
+	constructor(page: Page, api: ApiHelpers) {
 		this.page = page;
+		this.api = api;
 
 		// Pages
 		this.aiAssistant = new AIAssistantPage(page);
@@ -81,6 +86,7 @@ export class n8nPage {
 		this.workflowComposer = new WorkflowComposer(this);
 		this.projectComposer = new ProjectComposer(this);
 		this.canvasComposer = new CanvasComposer(this);
+		this.start = new TestEntryComposer(this);
 	}
 
 	async goHome() {

packages/testing/playwright/playwright.config.ts

@@ -27,7 +27,9 @@ export default defineConfig({
 	retries: IS_CI ? 2 : 0,
 	workers: WORKERS,
 	timeout: 60000,
-
+	expect: {
+		timeout: 10000,
+	},
 	projects: getProjects(),
 
 	// We use this if an n8n url is passed in. If the server is already running, we reuse it.

packages/testing/playwright/services/api-helper.ts

@@ -9,6 +9,7 @@ import {
 	INSTANCE_ADMIN_CREDENTIALS,
 } from '../config/test-users';
 import { TestError } from '../Types';
+import { ProjectApiHelper } from './project-api-helper';
 import { WorkflowApiHelper } from './workflow-api-helper';
 
 export interface LoginResponseData {
@@ -33,10 +34,12 @@ const DB_TAGS = {
 export class ApiHelpers {
 	request: APIRequestContext;
 	workflowApi: WorkflowApiHelper;
+	projectApi: ProjectApiHelper;
 
 	constructor(requestContext: APIRequestContext) {
 		this.request = requestContext;
 		this.workflowApi = new WorkflowApiHelper(this);
+		this.projectApi = new ProjectApiHelper(this);
 	}
 
 	// ===== MAIN SETUP METHODS =====

packages/testing/playwright/services/project-api-helper.ts

@@ -0,0 +1,30 @@
+import { nanoid } from 'nanoid';
+
+import type { ApiHelpers } from './api-helper';
+import { TestError } from '../Types';
+
+export class ProjectApiHelper {
+	constructor(private api: ApiHelpers) {}
+
+	/**
+	 * Create a new project with a unique name
+	 * @param projectName Optional base name for the project. If not provided, generates a default name.
+	 * @returns The created project data
+	 */
+	async createProject(projectName?: string) {
+		const uniqueName = projectName ? `${projectName} (${nanoid(8)})` : `Test Project ${nanoid(8)}`;
+
+		const response = await this.api.request.post('/rest/projects', {
+			data: {
+				name: uniqueName,
+			},
+		});
+
+		if (!response.ok()) {
+			throw new TestError(`Failed to create project: ${await response.text()}`);
+		}
+
+		const result = await response.json();
+		return result.data ?? result;
+	}
+}