test: Credential test migration part 1 (#19420)

packages/testing/playwright/tests/ui/2-credentials.spec.ts

@@ -0,0 +1,362 @@
+import { nanoid } from 'nanoid';
+
+import { test, expect } from '../../fixtures/base';
+
+test.describe('Credentials', () => {
+	test.beforeEach(async ({ n8n }) => {
+		await n8n.goHome();
+	});
+
+	test('should create a new credential using empty state', async ({ n8n }) => {
+		const projectId = await n8n.start.fromNewProject();
+		const credentialName = `My awesome Notion account ${nanoid()}`;
+
+		await n8n.credentialsComposer.createFromList(
+			'Notion API',
+			{ apiKey: '1234567890' },
+			{ name: credentialName, projectId },
+		);
+
+		await expect(n8n.credentials.credentialCards).toHaveCount(1);
+		await expect(n8n.credentials.getCredentialByName(credentialName)).toBeVisible();
+	});
+
+	test('should sort credentials', async ({ n8n, api }) => {
+		const projectId = await n8n.start.fromNewProject();
+		const credentialA = `A Credential ${nanoid()}`;
+		const credentialZ = `Z Credential ${nanoid()}`;
+
+		await api.credentialApi.createCredential({
+			name: credentialA,
+			type: 'notionApi',
+			data: { apiKey: '1234567890' },
+			projectId,
+		});
+
+		await api.credentialApi.createCredential({
+			name: credentialZ,
+			type: 'trelloApi',
+			data: { apiKey: 'test_api_key', apiToken: 'test_api_token' },
+			projectId,
+		});
+
+		await n8n.navigate.toCredentials(projectId);
+		await n8n.credentials.clearSearch();
+		await n8n.credentials.sortByNameDescending();
+
+		const firstCardDescending = n8n.credentials.credentialCards.first();
+		await expect(firstCardDescending).toContainText(credentialZ);
+
+		await n8n.credentials.sortByNameAscending();
+
+		const firstCardAscending = n8n.credentials.credentialCards.first();
+		await expect(firstCardAscending).toContainText(credentialA);
+	});
+
+	test('should create credentials from NDV for node with multiple auth options', async ({
+		n8n,
+	}) => {
+		await n8n.start.fromNewProjectBlankCanvas();
+		const credentialName = `My Google OAuth2 Account ${nanoid()}`;
+
+		await n8n.canvas.addNode('Manual Trigger');
+		await n8n.canvas.addNode('Gmail', { action: 'Send a message' });
+
+		await n8n.ndv.clickCreateNewCredential();
+
+		await expect(
+			n8n.canvas.credentialModal
+				.getModal()
+				.getByTestId('node-auth-type-selector')
+				.locator('label.el-radio'),
+		).toHaveCount(2);
+
+		await n8n.canvas.credentialModal
+			.getModal()
+			.getByTestId('node-auth-type-selector')
+			.locator('label.el-radio')
+			.first()
+			.click();
+
+		await n8n.canvas.credentialModal.addCredential(
+			{
+				clientId: 'test_client_id',
+				clientSecret: 'test_client_secret',
+			},
+			{ name: credentialName },
+		);
+
+		await expect(n8n.ndv.getCredentialSelect()).toHaveValue(credentialName);
+	});
+
+	test('should show multiple credential types in the same dropdown', async ({ n8n, api }) => {
+		const projectId = await n8n.start.fromNewProjectBlankCanvas();
+		const serviceAccountCredentialName2 = `OAuth2 Credential ${nanoid()}`;
+		const serviceAccountCredentialName = `Service Account Credential ${nanoid()}`;
+
+		await api.credentialApi.createCredential({
+			name: serviceAccountCredentialName2,
+			type: 'googleApi',
+			data: { email: 'test@service.com', privateKey: 'test_key' },
+			projectId,
+		});
+
+		await api.credentialApi.createCredential({
+			name: serviceAccountCredentialName,
+			type: 'googleApi',
+			data: { email: 'test@service.com', privateKey: 'test_key' },
+			projectId,
+		});
+
+		await n8n.canvas.addNode('Manual Trigger');
+		await n8n.canvas.addNode('Gmail', { action: 'Send a message' });
+
+		await n8n.ndv.getCredentialSelect().click();
+		await expect(n8n.ndv.getCredentialOptionByText(serviceAccountCredentialName2)).toBeVisible();
+		await expect(n8n.ndv.getCredentialOptionByText(serviceAccountCredentialName)).toBeVisible();
+		await expect(n8n.ndv.credentialDropdownCreateNewCredential()).toBeVisible();
+		await expect(n8n.ndv.getCredentialDropdownOptions()).toHaveCount(2);
+	});
+
+	test('should correctly render required and optional credentials', async ({ n8n }) => {
+		await n8n.start.fromNewProjectBlankCanvas();
+
+		await n8n.canvas.addNode('Pipedrive', { trigger: 'On new Pipedrive event' });
+		await n8n.ndv.selectOptionInParameterDropdown('incomingAuthentication', 'Basic Auth');
+		await expect(n8n.ndv.getNodeCredentialsSelect()).toHaveCount(2);
+
+		await n8n.ndv.clickCreateNewCredential(0);
+		await expect(
+			n8n.canvas.credentialModal
+				.getModal()
+				.getByTestId('node-auth-type-selector')
+				.locator('label.el-radio'),
+		).toHaveCount(2);
+		await n8n.canvas.credentialModal.close();
+
+		await n8n.ndv.clickCreateNewCredential(1);
+		await expect(n8n.canvas.credentialModal.getModal()).toBeVisible();
+		await expect(n8n.canvas.credentialModal.getAuthMethodSelector()).toBeHidden();
+		await n8n.canvas.credentialModal.close();
+	});
+
+	test('should create credentials from NDV for node with no auth options', async ({ n8n }) => {
+		await n8n.start.fromNewProjectBlankCanvas();
+		const credentialName = `My Trello Account ${nanoid()}`;
+
+		await n8n.canvas.addNode('Manual Trigger');
+		await n8n.canvas.addNode('Trello', { action: 'Create a card' });
+
+		await n8n.credentialsComposer.createFromNdv(
+			{
+				apiKey: 'test_api_key',
+				apiToken: 'test_api_token',
+			},
+			{ name: credentialName },
+		);
+
+		await expect(n8n.ndv.getCredentialSelect()).toHaveValue(credentialName);
+	});
+
+	test('should delete credentials from NDV', async ({ n8n }) => {
+		await n8n.start.fromNewProjectBlankCanvas();
+		const credentialName = `Notion Credential ${nanoid()}`;
+
+		await n8n.canvas.addNode('Manual Trigger');
+		await n8n.canvas.addNode('Notion', { action: 'Append a block' });
+
+		await n8n.credentialsComposer.createFromNdv({ apiKey: '1234567890' }, { name: credentialName });
+		await expect(n8n.ndv.getCredentialSelect()).toHaveValue(credentialName);
+
+		await n8n.canvas.credentialModal.editCredential();
+		await n8n.canvas.credentialModal.deleteCredential();
+		await n8n.canvas.credentialModal.confirmDelete();
+
+		await expect(
+			n8n.notifications.getNotificationByTitleOrContent('Credential deleted'),
+		).toBeVisible();
+
+		await expect(n8n.ndv.getCredentialSelect()).not.toHaveValue(credentialName);
+	});
+
+	test('should rename credentials from NDV', async ({ n8n }) => {
+		await n8n.start.fromNewProjectBlankCanvas();
+		const initialName = `My Trello Account ${nanoid()}`;
+		const renamedName = `Something else ${nanoid()}`;
+
+		await n8n.canvas.addNode('Manual Trigger');
+		await n8n.canvas.addNode('Trello', { action: 'Create a card' });
+
+		await n8n.credentialsComposer.createFromNdv(
+			{
+				apiKey: 'test_api_key',
+				apiToken: 'test_api_token',
+			},
+			{ name: initialName },
+		);
+
+		await n8n.canvas.credentialModal.editCredential();
+		await n8n.canvas.credentialModal.renameCredential(renamedName);
+		await n8n.canvas.credentialModal.save();
+		await n8n.canvas.credentialModal.close();
+
+		await expect(n8n.ndv.getCredentialSelect()).toHaveValue(renamedName);
+	});
+
+	test('should edit credential for non-standard credential type', async ({ n8n }) => {
+		await n8n.start.fromNewProjectBlankCanvas();
+		const initialName = `Adalo Credential ${nanoid()}`;
+		const editedName = `Something else ${nanoid()}`;
+
+		await n8n.canvas.addNode('AI Agent', { closeNDV: true });
+		await n8n.canvas.addNode('HTTP Request Tool');
+
+		await n8n.ndv.selectOptionInParameterDropdown('authentication', 'Predefined Credential Type');
+		await n8n.ndv.selectOptionInParameterDropdown('nodeCredentialType', 'Adalo API');
+
+		await n8n.credentialsComposer.createFromNdv(
+			{
+				apiKey: 'test_adalo_key',
+				appId: 'test_app_id',
+			},
+			{ name: initialName },
+		);
+
+		await n8n.canvas.credentialModal.editCredential();
+		await n8n.canvas.credentialModal.renameCredential(editedName);
+		await n8n.canvas.credentialModal.save();
+		await n8n.canvas.credentialModal.close();
+
+		await expect(n8n.ndv.getCredentialSelect()).toHaveValue(editedName);
+	});
+
+	test('should set a default credential when adding nodes', async ({ n8n, api }) => {
+		const projectId = await n8n.start.fromNewProjectBlankCanvas();
+		const credentialName = `My awesome Notion account ${nanoid()}`;
+
+		await api.credentialApi.createCredential({
+			name: credentialName,
+			type: 'notionApi',
+			data: { apiKey: '1234567890' },
+			projectId,
+		});
+
+		await n8n.canvas.addNode('Manual Trigger');
+		await n8n.canvas.addNode('Notion', { action: 'Append a block' });
+		await expect(n8n.ndv.getCredentialSelect()).toHaveValue(credentialName);
+
+		const credentials = await api.credentialApi.getCredentials();
+		const credential = credentials.find((c) => c.name === credentialName);
+		await api.credentialApi.deleteCredential(credential!.id);
+	});
+
+	test('should set a default credential when editing a node', async ({ n8n, api }) => {
+		const projectId = await n8n.start.fromNewProjectBlankCanvas();
+		const credentialName = `My awesome Notion account ${nanoid()}`;
+
+		await api.credentialApi.createCredential({
+			name: credentialName,
+			type: 'notionApi',
+			data: { apiKey: '1234567890' },
+			projectId,
+		});
+
+		await n8n.canvas.addNode('Manual Trigger');
+		await n8n.canvas.addNode('HTTP Request');
+
+		await n8n.ndv.selectOptionInParameterDropdown('authentication', 'Predefined Credential Type');
+		await n8n.ndv.selectOptionInParameterDropdown('nodeCredentialType', 'Notion API');
+		await expect(n8n.ndv.getCredentialSelect()).toHaveValue(credentialName);
+
+		const credentials = await api.credentialApi.getCredentials();
+		const credential = credentials.find((c) => c.name === credentialName);
+		await api.credentialApi.deleteCredential(credential!.id);
+	});
+
+	test('should setup generic authentication for HTTP node', async ({ n8n }) => {
+		await n8n.start.fromNewProjectBlankCanvas();
+		const credentialName = `Query Auth Credential ${nanoid()}`;
+
+		await n8n.canvas.addNode('Manual Trigger');
+		await n8n.canvas.addNode('HTTP Request');
+
+		await n8n.ndv.selectOptionInParameterDropdown('authentication', 'Generic Credential Type');
+		await n8n.ndv.selectOptionInParameterDropdown('genericAuthType', 'Query Auth');
+
+		await n8n.credentialsComposer.createFromNdv(
+			{
+				name: 'api_key',
+				value: 'test_query_value',
+			},
+			{ name: credentialName },
+		);
+
+		await expect(n8n.ndv.getCredentialSelect()).toHaveValue(credentialName);
+	});
+
+	test('should not show OAuth redirect URL section when OAuth2 credentials are overridden', async ({
+		n8n,
+		page,
+	}) => {
+		// Mock credential types response to simulate admin override
+		await page.route('**/rest/types/credentials.json', async (route) => {
+			const response = await route.fetch();
+			const json = await response.json();
+
+			// Override Slack OAuth2 credential properties
+			if (json.slackOAuth2Api) {
+				json.slackOAuth2Api.__overwrittenProperties = ['clientId', 'clientSecret'];
+			}
+
+			await route.fulfill({ json });
+		});
+
+		await n8n.start.fromNewProjectBlankCanvas();
+
+		await n8n.canvas.addNode('Manual Trigger');
+		await n8n.canvas.addNode('Slack', { action: 'Get a channel' });
+
+		await n8n.ndv.clickCreateNewCredential();
+
+		await n8n.canvas.credentialModal
+			.getModal()
+			.getByTestId('node-auth-type-selector')
+			.locator('label.el-radio')
+			.first()
+			.click();
+
+		await expect(n8n.canvas.credentialModal.getOAuthRedirectUrl()).toBeHidden();
+		await expect(n8n.canvas.credentialModal.getModal()).toBeVisible();
+	});
+
+	test('ADO-2583 should show notifications above credential modal overlay', async ({
+		n8n,
+		page,
+	}) => {
+		await page.route('**/rest/credentials', async (route) => {
+			if (route.request().method() === 'POST') {
+				await route.abort('failed');
+			} else {
+				await route.continue();
+			}
+		});
+
+		const projectId = await n8n.start.fromNewProject();
+		await n8n.navigate.toCredentials(projectId);
+		await n8n.credentials.addResourceButton.click();
+		await n8n.credentials.actionCredentialButton.click();
+		await n8n.credentials.selectCredentialType('Notion API');
+		await n8n.canvas.credentialModal.fillField('apiKey', '1234567890');
+
+		const saveBtn = n8n.canvas.credentialModal.getSaveButton();
+		await saveBtn.click();
+
+		const errorNotification = page.locator('.el-notification:has(.el-notification--error)');
+		await expect(errorNotification).toBeVisible();
+		await expect(n8n.canvas.credentialModal.getModal()).toBeVisible();
+
+		const modalOverlay = page.locator('.el-overlay').first();
+		await expect(errorNotification).toHaveCSS('z-index', '2100');
+		await expect(modalOverlay).toHaveCSS('z-index', '2001');
+	});
+});

packages/testing/playwright/tests/ui/30-langchain.spec.ts

@@ -29,8 +29,7 @@ async function addOpenAILanguageModelWithCredentials(
 		options,
 	);
 
-	await n8n.ndv.clickCreateNewCredential();
-	await n8n.credentialsModal.setValues({
+	await n8n.credentialsComposer.createFromNdv({
 		apiKey: 'abcd',
 	});
 	await n8n.ndv.clickBackToCanvasButton();
@@ -351,8 +350,7 @@ test.describe('Langchain Integration @capability:proxy', () => {
 				{ closeNDV: false },
 			);
 
-			await n8n.ndv.clickCreateNewCredential();
-			await n8n.credentialsModal.setValues({
+			await n8n.credentialsComposer.createFromNdv({
 				password: 'testtesttest',
 			});
 

packages/testing/playwright/tests/ui/39-projects.spec.ts

@@ -75,8 +75,9 @@ test.describe('Projects', () => {
 
 		await subn8n.canvas.deleteNodeByName('Replace me with your logic');
 		await subn8n.canvas.addNode(NOTION_NODE_NAME, { action: 'Append a block' });
-
-		await subn8n.credentials.createAndSaveNewCredential('apiKey', NOTION_API_KEY);
+		await subn8n.credentialsComposer.createFromNdv({
+			apiKey: NOTION_API_KEY,
+		});
 
 		await subn8n.ndv.clickBackToCanvasButton();
 		await subn8n.canvas.saveWorkflow();

packages/testing/playwright/tests/ui/43-oauth-flow.spec.ts

@@ -5,13 +5,17 @@ test.describe('OAuth Credentials', () => {
 		const projectId = await n8n.start.fromNewProjectBlankCanvas();
 		await page.goto(`projects/${projectId}/credentials`);
 		await n8n.credentials.emptyListCreateCredentialButton.click();
-		await n8n.credentials.openNewCredentialDialogFromCredentialList('Google OAuth2 API');
-		await n8n.credentials.fillCredentialField('clientId', 'test-key');
-		await n8n.credentials.fillCredentialField('clientSecret', 'test-secret');
-		await n8n.credentials.saveCredential();
+		await n8n.credentials.createCredentialFromCredentialPicker(
+			'Google OAuth2 API',
+			{
+				clientId: 'test-key',
+				clientSecret: 'test-secret',
+			},
+			{ closeDialog: false },
+		);
 
 		const popupPromise = page.waitForEvent('popup');
-		await n8n.credentials.getOauthConnectButton().click();
+		await n8n.credentials.credentialModal.oauthConnectButton.click();
 
 		const popup = await popupPromise;
 		const popupUrl = popup.url();
@@ -25,7 +29,8 @@ test.describe('OAuth Credentials', () => {
 			channel.postMessage('success');
 		});
 
-		await expect(n8n.credentials.getSaveButton()).toContainText('Saved');
-		await expect(n8n.credentials.getOauthConnectSuccessBanner()).toContainText('Account connected');
+		await expect(n8n.credentials.credentialModal.oauthConnectSuccessBanner).toContainText(
+			'Account connected',
+		);
 	});
 });

packages/testing/playwright/tests/ui/5-ndv.spec.ts

@@ -486,7 +486,9 @@ test.describe('NDV', () => {
 			await n8n.canvas.addNode('Notion', { action: 'Update a database page', closeNDV: false });
 			await expect(n8n.ndv.getContainer()).toBeVisible();
 
-			await n8n.credentials.createAndSaveNewCredential('apiKey', 'sk_test_123');
+			await n8n.credentialsComposer.createFromNdv({
+				apiKey: 'sk_test_123',
+			});
 			await n8n.ndv.addItemToFixedCollection('propertiesUi');
 			await expect(
 				n8n.ndv.getParameterInputWithIssues('propertiesUi.propertyValues[0].key'),
@@ -631,8 +633,10 @@ test.describe('NDV', () => {
 			await n8n.canvas.addNode('Manual Trigger');
 			await n8n.canvas.addNode('Discord', { closeNDV: false, action: 'Delete a message' });
 			await expect(n8n.ndv.getContainer()).toBeVisible();
+			await n8n.credentialsComposer.createFromNdv({
+				botToken: 'sk_test_123',
+			});
 
-			await n8n.credentials.createAndSaveNewCredential('botToken', 'sk_test_123');
 			const resourceInput = n8n.ndv.getParameterInputField('resource');
 			const operationInput = n8n.ndv.getParameterInputField('operation');
 

packages/testing/playwright/tests/ui/50-logs.spec.ts

@@ -61,7 +61,7 @@ test.describe('Logs', () => {
 
 		await n8n.canvas.logsPanel.getClearExecutionButton().click();
 		await expect(n8n.canvas.logsPanel.getLogEntries()).toHaveCount(0);
-		await expect(n8n.canvas.getNodeIssuesByName(NODES.CODE1)).not.toBeVisible();
+		await expect(n8n.canvas.getNodeIssuesByName(NODES.CODE1)).toBeHidden();
 	});
 
 	test('should allow to trigger partial execution', async ({ n8n, setupRequirements }) => {

packages/testing/playwright/tests/ui/716-AI-bug-correctly-set-up-agent-model-shows-error.spec.ts

@@ -11,7 +11,9 @@ test.describe('AI-716 Correctly set up agent model shows error', () => {
 
 		await n8n.canvas.addNode('OpenAI Chat Model');
 
-		await n8n.credentials.createAndSaveNewCredential('apiKey', 'sk-123');
+		await n8n.credentialsComposer.createFromNdv({
+			apiKey: 'sk-123',
+		});
 
 		await n8n.page.keyboard.press('Escape');
 

packages/testing/playwright/tests/ui/building-blocks/04-credentials.spec.ts

@@ -0,0 +1,93 @@
+import { nanoid } from 'nanoid';
+
+import { test, expect } from '../../../fixtures/base';
+
+test.describe('04 - Credentials', () => {
+	test('composer: createFromList creates credential', async ({ n8n }) => {
+		const projectId = await n8n.start.fromNewProject();
+		const credentialName = `credential-${nanoid()}`;
+		await n8n.navigate.toCredentials(projectId);
+
+		await n8n.credentialsComposer.createFromList(
+			'Notion API',
+			{ apiKey: '1234567890' },
+			{
+				name: credentialName,
+				closeDialog: false,
+			},
+		);
+		await expect(n8n.credentials.getCredentialByName(credentialName)).toBeVisible();
+	});
+
+	test('composer: createFromNdv creates credential for node', async ({ n8n }) => {
+		const name = `credential-${nanoid()}`;
+		await n8n.start.fromNewProjectBlankCanvas();
+		await n8n.canvas.addNode('Manual Trigger');
+		await n8n.canvas.addNode('Notion', { action: 'Append a block' });
+
+		await n8n.credentialsComposer.createFromNdv({ apiKey: '1234567890' }, { name });
+		await expect(n8n.ndv.getCredentialSelect()).toHaveValue(name);
+	});
+
+	test('composer: createFromApi creates credential (then NDV picks it up)', async ({ n8n }) => {
+		const name = `credential-${nanoid()}`;
+		const projectId = await n8n.start.fromNewProjectBlankCanvas();
+		await n8n.credentialsComposer.createFromApi({
+			name,
+			type: 'notionApi',
+			data: { apiKey: '1234567890' },
+			projectId,
+		});
+
+		await n8n.canvas.addNode('Manual Trigger');
+		await n8n.canvas.addNode('Notion', { action: 'Append a block' });
+		await expect(n8n.ndv.getCredentialSelect()).toHaveValue(name);
+	});
+
+	test('create a new credential from empty state using the credential chooser list', async ({
+		n8n,
+	}) => {
+		const projectId = await n8n.start.fromNewProject();
+		await n8n.navigate.toCredentials(projectId);
+		await n8n.credentials.emptyListCreateCredentialButton.click();
+		await n8n.credentials.createCredentialFromCredentialPicker('Notion API', {
+			apiKey: '1234567890',
+		});
+		await expect(n8n.credentials.credentialCards).toHaveCount(1);
+	});
+
+	test('create a new credential from the NDV', async ({ n8n }) => {
+		const uniqueCredentialName = `credential-${nanoid()}`;
+		await n8n.start.fromNewProjectBlankCanvas();
+		await n8n.canvas.addNode('Manual Trigger');
+		await n8n.canvas.addNode('Notion', { action: 'Append a block' });
+
+		await n8n.ndv.getNodeCredentialsSelect().click();
+		await n8n.ndv.credentialDropdownCreateNewCredential().click();
+		await n8n.canvas.credentialModal.addCredential(
+			{
+				apiKey: '1234567890',
+			},
+			{ name: uniqueCredentialName },
+		);
+		await expect(n8n.ndv.getCredentialSelect()).toHaveValue(uniqueCredentialName);
+	});
+
+	test('add an existing credential from the NDV', async ({ n8n, api }) => {
+		const uniqueCredentialName = `credential-${nanoid()}`;
+		const projectId = await n8n.start.fromNewProjectBlankCanvas();
+
+		await api.credentialApi.createCredential({
+			name: uniqueCredentialName,
+			type: 'notionApi',
+			data: {
+				apiKey: '1234567890',
+			},
+			projectId,
+		});
+
+		await n8n.canvas.addNode('Manual Trigger');
+		await n8n.canvas.addNode('Notion', { action: 'Append a block' });
+		await expect(n8n.ndv.getCredentialSelect()).toHaveValue(uniqueCredentialName);
+	});
+});