test(editor): Add deprecation warnings for e2e page classes (no-changelog) (#12489)

cypress/composables/workflow.ts

@@ -52,6 +52,10 @@ export function getNodeByName(name: string) {
 	);
 }
 
+export function getWorkflowHistoryCloseButton() {
+	return cy.getByTestId('workflow-history-close-button');
+}
+
 export function disableNode(name: string) {
 	const target = getNodeByName(name);
 	target.rightclick(name ? 'center' : 'topLeft', { force: true });

cypress/e2e/27-cloud.cy.ts

@@ -1,6 +1,5 @@
 import planData from '../fixtures/Plan_data_opt_in_trial.json';
 import {
-	BannerStack,
 	MainSidebar,
 	WorkflowPage,
 	visitPublicApiPage,
@@ -11,7 +10,6 @@ import {
 const NUMBER_OF_AI_CREDITS = 100;
 
 const mainSidebar = new MainSidebar();
-const bannerStack = new BannerStack();
 const workflowPage = new WorkflowPage();
 const workflowsPage = new WorkflowsPage();
 
@@ -48,11 +46,11 @@ describe('Cloud', () => {
 		it('should render trial banner for opt-in cloud user', () => {
 			visitWorkflowPage();
 
-			bannerStack.getters.banner().should('be.visible');
+			cy.getByTestId('banner-stack').should('be.visible');
 
 			mainSidebar.actions.signout();
 
-			bannerStack.getters.banner().should('not.be.visible');
+			cy.getByTestId('banner-stack').should('not.be.visible');
 		});
 	});
 

cypress/e2e/30-editor-after-route-changes.cy.ts

@@ -1,18 +1,14 @@
+import { getWorkflowHistoryCloseButton } from '../composables/workflow';
 import {
 	CODE_NODE_NAME,
 	EDIT_FIELDS_SET_NODE_NAME,
 	IF_NODE_NAME,
 	SCHEDULE_TRIGGER_NODE_NAME,
 } from '../constants';
-import {
+import { WorkflowExecutionsTab, WorkflowPage as WorkflowPageClass } from '../pages';
-	WorkflowExecutionsTab,
-	WorkflowPage as WorkflowPageClass,
-	WorkflowHistoryPage,
-} from '../pages';
 
 const workflowPage = new WorkflowPageClass();
 const executionsTab = new WorkflowExecutionsTab();
-const workflowHistoryPage = new WorkflowHistoryPage();
 
 const createNewWorkflowAndActivate = () => {
 	workflowPage.actions.visit();
@@ -92,7 +88,7 @@ const switchBetweenEditorAndHistory = () => {
 	cy.wait(['@getVersion']);
 
 	cy.intercept('GET', '/rest/workflows/*').as('workflowGet');
-	workflowHistoryPage.getters.workflowHistoryCloseButton().click();
+	getWorkflowHistoryCloseButton().click();
 	cy.wait(['@workflowGet']);
 	cy.wait(1000);
 
@@ -168,7 +164,7 @@ describe('Editor actions should work', () => {
 		cy.wait(['@getVersion']);
 
 		cy.intercept('GET', '/rest/workflows/*').as('workflowGet');
-		workflowHistoryPage.getters.workflowHistoryCloseButton().click();
+		getWorkflowHistoryCloseButton().click();
 		cy.wait(['@workflowGet']);
 		cy.wait(1000);
 

cypress/e2e/35-admin-user-smoke-test.cy.ts

@@ -1,22 +1,20 @@
-import { SettingsPage } from '../pages/settings';
+const url = '/settings';
-
-const settingsPage = new SettingsPage();
 
 describe('Admin user', { disableAutoLogin: true }, () => {
 	it('should see same Settings sub menu items as instance owner', () => {
 		cy.signinAsOwner();
-		cy.visit(settingsPage.url);
+		cy.visit(url);
 
 		let ownerMenuItems = 0;
 
-		settingsPage.getters.menuItems().then(($el) => {
+		cy.getByTestId('menu-item').then(($el) => {
 			ownerMenuItems = $el.length;
 		});
 
 		cy.signout();
 		cy.signinAsAdmin();
-		cy.visit(settingsPage.url);
+		cy.visit(url);
 
-		settingsPage.getters.menuItems().should('have.length', ownerMenuItems);
+		cy.getByTestId('menu-item').should('have.length', ownerMenuItems);
 	});
 });

cypress/pages/bannerStack.ts

@@ -1,9 +0,0 @@
-import { BasePage } from './base';
-
-export class BannerStack extends BasePage {
-	getters = {
-		banner: () => cy.getByTestId('banner-stack'),
-	};
-
-	actions = {};
-}

cypress/pages/base.ts

@@ -1,5 +1,13 @@
 import type { IE2ETestPage } from '../types';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class BasePage implements IE2ETestPage {
 	getters = {};
 

cypress/pages/credentials.ts

@@ -1,5 +1,13 @@
 import { BasePage } from './base';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class CredentialsPage extends BasePage {
 	url = '/home/credentials';
 

cypress/pages/features/ai-assistant.ts

@@ -8,6 +8,14 @@ const AI_ASSISTANT_FEATURE = {
 	disabledFor: 'control',
 };
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class AIAssistant extends BasePage {
 	url = '/workflows/new';
 

cypress/pages/features/node-creator.ts

@@ -1,5 +1,13 @@
 import { BasePage } from '../base';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class NodeCreator extends BasePage {
 	url = '/workflow/new';
 

cypress/pages/index.ts

@@ -7,9 +7,7 @@ export * from './settings-users';
 export * from './settings-log-streaming';
 export * from './sidebar';
 export * from './ndv';
-export * from './bannerStack';
 export * from './workflow-executions-tab';
 export * from './signin';
-export * from './workflow-history';
 export * from './workerView';
 export * from './settings-public-api';

cypress/pages/mfa-login.ts

@@ -3,6 +3,14 @@ import { SigninPage } from './signin';
 import { WorkflowsPage } from './workflows';
 import { N8N_AUTH_COOKIE } from '../constants';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class MfaLoginPage extends BasePage {
 	url = '/mfa';
 

cypress/pages/modals/change-password-modal.ts

@@ -1,5 +1,13 @@
 import { BasePage } from './../base';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class ChangePasswordModal extends BasePage {
 	getters = {
 		modalContainer: () => cy.getByTestId('changePassword-modal').last(),

cypress/pages/modals/credentials-modal.ts

@@ -2,6 +2,14 @@ import { getCredentialSaveButton, saveCredential } from '../../composables/modal
 import { getVisibleSelect } from '../../utils';
 import { BasePage } from '../base';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class CredentialsModal extends BasePage {
 	getters = {
 		newCredentialModal: () => cy.getByTestId('selectCredential-modal', { timeout: 5000 }),

cypress/pages/modals/message-box.ts

@@ -1,5 +1,13 @@
 import { BasePage } from '../base';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class MessageBox extends BasePage {
 	getters = {
 		modal: () => cy.get('.el-message-box', { withinSubject: null }),

cypress/pages/modals/mfa-setup-modal.ts

@@ -1,5 +1,13 @@
 import { BasePage } from './../base';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class MfaSetupModal extends BasePage {
 	getters = {
 		modalContainer: () => cy.getByTestId('changePassword-modal').last(),

cypress/pages/modals/workflow-sharing-modal.ts

@@ -1,5 +1,13 @@
 import { BasePage } from '../base';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class WorkflowSharingModal extends BasePage {
 	getters = {
 		modal: () => cy.getByTestId('workflowShare-modal', { timeout: 5000 }),

cypress/pages/ndv.ts

@@ -1,6 +1,14 @@
 import { BasePage } from './base';
 import { getVisiblePopper, getVisibleSelect } from '../utils';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class NDV extends BasePage {
 	getters = {
 		container: () => cy.getByTestId('ndv'),

cypress/pages/settings-log-streaming.ts

@@ -1,6 +1,14 @@
 import { BasePage } from './base';
 import { getVisibleSelect } from '../utils';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class SettingsLogStreamingPage extends BasePage {
 	url = '/settings/log-streaming';
 

cypress/pages/settings-personal.ts

@@ -7,6 +7,14 @@ import { MfaSetupModal } from './modals/mfa-setup-modal';
 const changePasswordModal = new ChangePasswordModal();
 const mfaSetupModal = new MfaSetupModal();
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class PersonalSettingsPage extends BasePage {
 	url = '/settings/personal';
 

cypress/pages/settings-usage.ts

@@ -1,9 +0,0 @@
-import { BasePage } from './base';
-
-export class SettingsUsagePage extends BasePage {
-	url = '/settings/usage';
-
-	getters = {};
-
-	actions = {};
-}

cypress/pages/settings-users.ts

@@ -9,6 +9,14 @@ const workflowsPage = new WorkflowsPage();
 const mainSidebar = new MainSidebar();
 const settingsSidebar = new SettingsSidebar();
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class SettingsUsersPage extends BasePage {
 	url = '/settings/users';
 

cypress/pages/settings.ts

@@ -1,11 +0,0 @@
-import { BasePage } from './base';
-
-export class SettingsPage extends BasePage {
-	url = '/settings';
-
-	getters = {
-		menuItems: () => cy.getByTestId('menu-item'),
-	};
-
-	actions = {};
-}

cypress/pages/sidebar/main-sidebar.ts

@@ -1,6 +1,14 @@
 import { BasePage } from '../base';
 import { WorkflowsPage } from '../workflows';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class MainSidebar extends BasePage {
 	getters = {
 		menuItem: (id: string) => cy.getByTestId('menu-item').get('#' + id),

cypress/pages/sidebar/settings-sidebar.ts

@@ -1,5 +1,13 @@
 import { BasePage } from '../base';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class SettingsSidebar extends BasePage {
 	getters = {
 		menuItem: (id: string) => cy.getByTestId('menu-item').get('#' + id),

cypress/pages/signin.ts

@@ -2,6 +2,14 @@ import { BasePage } from './base';
 import { WorkflowsPage } from './workflows';
 import { N8N_AUTH_COOKIE } from '../constants';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class SigninPage extends BasePage {
 	url = '/signin';
 

cypress/pages/templates.ts

@@ -1,5 +1,13 @@
 import { BasePage } from './base';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class TemplatesPage extends BasePage {
 	url = '/templates';
 

cypress/pages/variables.ts

@@ -2,6 +2,14 @@ import { BasePage } from './base';
 
 import Chainable = Cypress.Chainable;
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class VariablesPage extends BasePage {
 	url = '/variables';
 

cypress/pages/workerView.ts

@@ -1,5 +1,13 @@
 import { BasePage } from './base';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class WorkerViewPage extends BasePage {
 	url = '/settings/workers';
 

cypress/pages/workflow-executions-tab.ts

@@ -3,6 +3,14 @@ import { WorkflowPage } from './workflow';
 
 const workflowPage = new WorkflowPage();
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class WorkflowExecutionsTab extends BasePage {
 	getters = {
 		executionsTabButton: () => cy.getByTestId('radio-button-executions'),

cypress/pages/workflow-history.ts

@@ -1,7 +0,0 @@
-import { BasePage } from './base';
-
-export class WorkflowHistoryPage extends BasePage {
-	getters = {
-		workflowHistoryCloseButton: () => cy.getByTestId('workflow-history-close-button'),
-	};
-}

cypress/pages/workflow.ts

@@ -6,6 +6,15 @@ import { getVisibleSelect } from '../utils';
 import { getUniqueWorkflowName, isCanvasV2 } from '../utils/workflowUtils';
 
 const nodeCreator = new NodeCreator();
+
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class WorkflowPage extends BasePage {
 	url = '/workflow/new';
 

cypress/pages/workflows.ts

@@ -1,5 +1,13 @@
 import { BasePage } from './base';
 
+/**
+ * @deprecated Use functional composables from @composables instead.
+ * If a composable doesn't exist for your use case, please create a new one in:
+ * cypress/composables
+ *
+ * This class-based approach is being phased out in favor of more modular functional composables.
+ * Each getter and action in this class should be moved to individual composable functions.
+ */
 export class WorkflowsPage extends BasePage {
 	url = '/home/workflows';