ci: Fix flaky credentials saving in e2e tests (no-changelog) (#11919)

cypress/composables/modals/credential-modal.ts

@@ -40,6 +40,7 @@ export function saveCredential() {
 		.within(() => {
 			cy.get('button').should('not.exist');
 		});
+	getCredentialSaveButton().should('have.text', 'Saved');
 }
 
 export function closeCredentialModal() {

cypress/e2e/17-sharing.cy.ts

@@ -1,3 +1,4 @@
+import { saveCredential } from '../composables/modals/credential-modal';
 import * as projects from '../composables/projects';
 import { INSTANCE_MEMBERS, INSTANCE_OWNER, INSTANCE_ADMIN, NOTION_NODE_NAME } from '../constants';
 import {
@@ -225,8 +226,7 @@ describe('Sharing', { disableAutoLogin: true }, () => {
 			.filter(':contains("Development")')
 			.should('have.length', 1)
 			.click();
-		credentialsModal.getters.saveButton().click();
+		saveCredential();
-		credentialsModal.getters.saveButton().should('have.text', 'Saved');
 		credentialsModal.actions.close();
 
 		projects.getProjectTabWorkflows().click();
@@ -252,8 +252,7 @@ describe('Sharing', { disableAutoLogin: true }, () => {
 		credentialsModal.actions.changeTab('Sharing');
 		credentialsModal.getters.usersSelect().click();
 		getVisibleSelect().find('li').should('have.length', 4).first().click();
-		credentialsModal.getters.saveButton().click();
+		saveCredential();
-		credentialsModal.getters.saveButton().should('have.text', 'Saved');
 		credentialsModal.actions.close();
 
 		credentialsPage.getters

cypress/e2e/2-credentials.cy.ts

@@ -1,5 +1,6 @@
 import { type ICredentialType } from 'n8n-workflow';
 
+import { getCredentialSaveButton, saveCredential } from '../composables/modals/credential-modal';
 import {
 	AGENT_NODE_NAME,
 	AI_TOOL_HTTP_NODE_NAME,
@@ -194,7 +195,7 @@ describe('Credentials', () => {
 		credentialsModal.getters.credentialsEditModal().should('be.visible');
 		credentialsModal.getters.name().click();
 		credentialsModal.actions.renameCredential(NEW_CREDENTIAL_NAME);
-		credentialsModal.getters.saveButton().click();
+		saveCredential();
 		credentialsModal.getters.closeButton().click();
 		workflowPage.getters
 			.nodeCredentialsSelect()
@@ -212,7 +213,7 @@ describe('Credentials', () => {
 		credentialsModal.getters.credentialsEditModal().should('be.visible');
 		credentialsModal.getters.name().click();
 		credentialsModal.actions.renameCredential(NEW_CREDENTIAL_NAME2);
-		credentialsModal.getters.saveButton().click();
+		saveCredential();
 		credentialsModal.getters.closeButton().click();
 		workflowPage.getters
 			.nodeCredentialsSelect()
@@ -237,7 +238,7 @@ describe('Credentials', () => {
 		credentialsModal.getters.credentialsEditModal().should('be.visible');
 		credentialsModal.getters.name().click();
 		credentialsModal.actions.renameCredential(NEW_CREDENTIAL_NAME);
-		credentialsModal.getters.saveButton().click();
+		saveCredential();
 		credentialsModal.getters.closeButton().click();
 		workflowPage.getters
 			.nodeCredentialsSelect()
@@ -342,7 +343,8 @@ describe('Credentials', () => {
 		credentialsModal.getters.connectionParameter('Internal Integration Secret').type('1234567890');
 
 		credentialsModal.actions.setName('My awesome Notion account');
-		credentialsModal.getters.saveButton().click({ force: true });
+		getCredentialSaveButton().click();
+
 		errorToast().should('have.length', 1);
 		errorToast().should('be.visible');
 

cypress/e2e/43-oauth-flow.cy.ts

@@ -1,3 +1,4 @@
+import { getCredentialSaveButton } from '../composables/modals/credential-modal';
 import { CredentialsPage, CredentialsModal } from '../pages';
 
 const credentialsPage = new CredentialsPage();
@@ -40,7 +41,7 @@ describe('Credentials', () => {
 		});
 
 		// Check that the credential was saved and connected successfully
-		credentialsModal.getters.saveButton().should('contain.text', 'Saved');
+		getCredentialSaveButton().should('contain.text', 'Saved');
 		credentialsModal.getters.oauthConnectSuccessBanner().should('be.visible');
 	});
 });

cypress/pages/modals/credentials-modal.ts

@@ -1,3 +1,4 @@
+import { getCredentialSaveButton, saveCredential } from '../../composables/modals/credential-modal';
 import { getVisibleSelect } from '../../utils';
 import { BasePage } from '../base';
 
@@ -13,8 +14,6 @@ export class CredentialsModal extends BasePage {
 			this.getters.credentialInputs().find(`:contains('${fieldName}') .n8n-input input`),
 		name: () => cy.getByTestId('credential-name'),
 		nameInput: () => cy.getByTestId('credential-name').find('input'),
-		// Saving of the credentials takes a while on the CI so we need to increase the timeout
-		saveButton: () => cy.getByTestId('credential-save-button', { timeout: 5000 }),
 		deleteButton: () => cy.getByTestId('credential-delete-button'),
 		closeButton: () => this.getters.editCredentialModal().find('.el-dialog__close').first(),
 		oauthConnectButton: () => cy.getByTestId('oauth-connect-button'),
@@ -41,17 +40,17 @@ export class CredentialsModal extends BasePage {
 		},
 		save: (test = false) => {
 			cy.intercept('POST', '/rest/credentials').as('saveCredential');
-			this.getters.saveButton().click({ force: true });
+			saveCredential();
 
 			cy.wait('@saveCredential');
 			if (test) cy.wait('@testCredential');
-			this.getters.saveButton().should('contain.text', 'Saved');
+			getCredentialSaveButton().should('contain.text', 'Saved');
 		},
 		saveSharing: () => {
 			cy.intercept('PUT', '/rest/credentials/*/share').as('shareCredential');
-			this.getters.saveButton().click({ force: true });
+			saveCredential();
 			cy.wait('@shareCredential');
-			this.getters.saveButton().should('contain.text', 'Saved');
+			getCredentialSaveButton().should('contain.text', 'Saved');
 		},
 		close: () => {
 			this.getters.closeButton().click();
@@ -65,7 +64,7 @@ export class CredentialsModal extends BasePage {
 				.each(($el) => {
 					cy.wrap($el).type('test');
 				});
-			this.getters.saveButton().click();
+			saveCredential();
 			if (closeModal) {
 				this.getters.closeButton().click();
 			}