test: Migrate cypress batch to playwright (#19854)

Author: seemewalkin

cypress/e2e/group2/27-two-factor-authentication.cy.ts

@@ -0,0 +1,69 @@
+import { expect } from '@playwright/test';
+import { authenticator } from 'otplib';
+
+import type { n8nPage } from '../pages/n8nPage';
+
+export class MfaComposer {
+	constructor(private readonly n8n: n8nPage) {}
+
+	/**
+	 * Enable MFA for a user using predefined secret
+	 * @param email - User email
+	 * @param password - User password
+	 * @param mfaSecret - Known MFA secret to use for token generation
+	 */
+	async enableMfa(email: string, password: string, mfaSecret: string): Promise<void> {
+		await this.n8n.signIn.loginWithEmailAndPassword(email, password, true);
+		await this.n8n.settings.goToPersonalSettings();
+
+		await this.n8n.settings.clickEnableMfa();
+
+		await this.n8n.mfaSetupModal.getModalContainer().waitFor({ state: 'visible' });
+
+		await this.n8n.mfaSetupModal.clickCopySecretToClipboard();
+
+		const token = authenticator.generate(mfaSecret);
+		await this.n8n.mfaSetupModal.fillToken(token);
+		await expect(this.n8n.mfaSetupModal.getDownloadRecoveryCodesButton()).toBeVisible();
+		await this.n8n.mfaSetupModal.clickDownloadRecoveryCodes();
+		await this.n8n.mfaSetupModal.clickSave();
+		await this.n8n.mfaSetupModal.waitForHidden();
+	}
+
+	/**
+	 * Login with MFA code
+	 * @param email - User email
+	 * @param password - User password
+	 * @param mfaSecret - Known MFA secret for token generation
+	 */
+	async loginWithMfaCode(email: string, password: string, mfaSecret: string): Promise<void> {
+		await this.n8n.signIn.fillEmail(email);
+		await this.n8n.signIn.fillPassword(password);
+		await this.n8n.signIn.clickSubmit();
+
+		await expect(this.n8n.mfaLogin.getForm()).toBeVisible();
+		const loginMfaCode = authenticator.generate(mfaSecret);
+		await this.n8n.mfaLogin.submitMfaCode(loginMfaCode);
+		await expect(this.n8n.page).toHaveURL(/workflows/);
+	}
+
+	/**
+	 * Login with MFA recovery code
+	 * @param email - User email
+	 * @param password - User password
+	 * @param recoveryCode - Known recovery code
+	 */
+	async loginWithMfaRecoveryCode(
+		email: string,
+		password: string,
+		recoveryCode: string,
+	): Promise<void> {
+		await this.n8n.signIn.fillEmail(email);
+		await this.n8n.signIn.fillPassword(password);
+		await this.n8n.signIn.clickSubmit();
+
+		await expect(this.n8n.mfaLogin.getForm()).toBeVisible();
+		await this.n8n.mfaLogin.submitMfaRecoveryCode(recoveryCode);
+		await expect(this.n8n.page).toHaveURL(/workflows/);
+	}
+}

cypress/e2e/group4/44-routing.cy.ts

@@ -5,6 +5,9 @@ export interface UserCredentials {
 	password: string;
 	firstName: string;
 	lastName: string;
+	mfaEnabled?: boolean;
+	mfaSecret?: string;
+	mfaRecoveryCodes?: string[];
 }
 
 // Simple name generators
@@ -58,6 +61,9 @@ export const INSTANCE_OWNER_CREDENTIALS: UserCredentials = {
 	password: DEFAULT_USER_PASSWORD,
 	firstName: randFirstName(),
 	lastName: randLastName(),
+	mfaEnabled: false,
+	mfaSecret: 'KVKFKRCPNZQUYMLXOVYDSQKJKZDTSRLD',
+	mfaRecoveryCodes: ['d04ea17f-e8b2-4afa-a9aa-57a2c735b30e'],
 };
 
 export const INSTANCE_ADMIN_CREDENTIALS: UserCredentials = {

packages/testing/playwright/composables/MfaComposer.ts

@@ -36,6 +36,7 @@
     "n8n-workflow": "workspace:*",
     "flatted": "catalog:",
     "nanoid": "catalog:",
+    "otplib": "^12.0.1",
     "tsx": "catalog:",
     "mockserver-client": "^5.15.0",
     "zod": "catalog:"

packages/testing/playwright/config/test-users.ts

@@ -8,6 +8,7 @@ import { CredentialModal } from './components/CredentialModal';
 import { FocusPanel } from './components/FocusPanel';
 import { LogsPanel } from './components/LogsPanel';
 import { NodeCreator } from './components/NodeCreator';
+import { SaveChangesModal } from './components/SaveChangesModal';
 import { StickyComponent } from './components/StickyComponent';
 
 export class CanvasPage extends BasePage {
@@ -16,6 +17,7 @@ export class CanvasPage extends BasePage {
 	readonly focusPanel = new FocusPanel(this.page.getByTestId('focus-panel'));
 	readonly credentialModal = new CredentialModal(this.page.getByTestId('editCredential-modal'));
 	readonly nodeCreator = new NodeCreator(this.page);
+	readonly saveChangesModal = new SaveChangesModal(this.page.locator('.el-overlay'));
 
 	saveWorkflowButton(): Locator {
 		return this.page.getByRole('button', { name: 'Save' });