Imporve testing
This commit is contained in:
Urtzi Alfaro
431
frontend/tests/onboarding/complete-registration-flow.spec.ts
Normal file
431
frontend/tests/onboarding/complete-registration-flow.spec.ts
Normal file
@@ -0,0 +1,431 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { acceptCookieConsent, waitForNavigation } from '../helpers/utils';
|
||||
import path from 'path';
|
||||
|
||||
/**
|
||||
* Complete User Registration and Onboarding Flow Test
|
||||
*
|
||||
* This test suite covers the entire journey from registration to onboarding completion:
|
||||
* 1. User Registration (3-step process: basic info, subscription, payment)
|
||||
* 2. Onboarding Wizard (multiple steps based on business type and tier)
|
||||
*/
|
||||
|
||||
test.describe('Complete Registration and Onboarding Flow', () => {
|
||||
// Generate unique test user for each test run
|
||||
const generateTestUser = () => ({
|
||||
fullName: `Test User ${Date.now()}`,
|
||||
email: `test.user.${Date.now()}@bakery-test.com`,
|
||||
password: 'SecurePass123!@#',
|
||||
plan: 'starter' // or 'professional', 'enterprise'
|
||||
});
|
||||
|
||||
test('should complete full registration and onboarding flow for starter plan', async ({ page }) => {
|
||||
const testUser = generateTestUser();
|
||||
|
||||
// ============================================
|
||||
// PHASE 1: REGISTRATION
|
||||
// ============================================
|
||||
|
||||
await test.step('Navigate to registration page', async () => {
|
||||
await page.goto('/register');
|
||||
await acceptCookieConsent(page);
|
||||
|
||||
// Verify we're on the registration page
|
||||
await expect(page.getByRole('heading', { name: /crear cuenta|create account/i })).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('Fill basic information (Step 1/3)', async () => {
|
||||
// Fill in user details
|
||||
await page.getByLabel(/nombre completo|full name/i).fill(testUser.fullName);
|
||||
await page.getByLabel(/correo|email/i).fill(testUser.email);
|
||||
|
||||
// Fill password
|
||||
await page.getByLabel(/^contraseña|^password/i).first().fill(testUser.password);
|
||||
|
||||
// Fill confirm password
|
||||
await page.getByLabel(/confirmar contraseña|confirm password/i).fill(testUser.password);
|
||||
|
||||
// Wait for password match indicator
|
||||
await expect(page.getByText(/las contraseñas coinciden|passwords match/i)).toBeVisible({ timeout: 5000 });
|
||||
|
||||
// Accept terms and conditions
|
||||
await page.getByRole('checkbox', { name: /acepto los términos|accept terms/i }).check();
|
||||
|
||||
// Optional consents
|
||||
await page.getByRole('checkbox', { name: /marketing|promociones/i }).check();
|
||||
await page.getByRole('checkbox', { name: /analytics|analíticas/i }).check();
|
||||
|
||||
// Proceed to next step
|
||||
await page.getByRole('button', { name: /siguiente|next/i }).click();
|
||||
});
|
||||
|
||||
await test.step('Select subscription plan (Step 2/3)', async () => {
|
||||
// Wait for subscription page
|
||||
await expect(page.getByRole('heading', { name: /selecciona tu plan|select.*plan/i })).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Select starter plan (default is usually selected)
|
||||
const starterPlanButton = page.getByRole('button', { name: /starter|básico/i }).first();
|
||||
if (await starterPlanButton.isVisible().catch(() => false)) {
|
||||
await starterPlanButton.click();
|
||||
}
|
||||
|
||||
// Proceed to payment
|
||||
await page.getByRole('button', { name: /siguiente|next/i }).click();
|
||||
});
|
||||
|
||||
await test.step('Complete payment information (Step 3/3)', async () => {
|
||||
// Wait for payment page
|
||||
await expect(page.getByRole('heading', { name: /información de pago|payment info/i })).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Check if bypass payment toggle exists (for testing environments)
|
||||
const bypassToggle = page.getByRole('checkbox', { name: /bypass|omitir|skip.*payment/i });
|
||||
const hasBypassOption = await bypassToggle.isVisible({ timeout: 2000 }).catch(() => false);
|
||||
|
||||
if (hasBypassOption) {
|
||||
// Enable bypass for test environment
|
||||
await bypassToggle.check();
|
||||
await page.getByRole('button', { name: /completar registro|complete registration/i }).click();
|
||||
} else {
|
||||
// Fill Stripe test card details
|
||||
const cardFrame = page.frameLocator('iframe[name*="__privateStripeFrame"]').first();
|
||||
|
||||
// Wait for Stripe iframe to load
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// Fill card number (Stripe test card)
|
||||
await cardFrame.getByPlaceholder(/card number|número.*tarjeta/i).fill('4242424242424242');
|
||||
|
||||
// Fill expiry date
|
||||
await cardFrame.getByPlaceholder(/mm.*yy|expir/i).fill('1234');
|
||||
|
||||
// Fill CVC
|
||||
await cardFrame.getByPlaceholder(/cvc|cvv/i).fill('123');
|
||||
|
||||
// Fill postal code if visible
|
||||
const postalCode = cardFrame.getByPlaceholder(/postal|zip/i);
|
||||
if (await postalCode.isVisible().catch(() => false)) {
|
||||
await postalCode.fill('12345');
|
||||
}
|
||||
|
||||
// Submit payment
|
||||
await page.getByRole('button', { name: /completar registro|complete registration|submit/i }).click();
|
||||
}
|
||||
|
||||
// Wait for redirect to onboarding
|
||||
await page.waitForURL(/\/app\/onboarding/, { timeout: 15000 });
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// PHASE 2: ONBOARDING WIZARD
|
||||
// ============================================
|
||||
|
||||
await test.step('Complete onboarding wizard', async () => {
|
||||
// Wait for onboarding page to load
|
||||
await expect(page.locator('body')).toContainText(/onboarding|configuración|bienvenido/i, { timeout: 10000 });
|
||||
|
||||
// The onboarding has multiple steps, we'll navigate through them
|
||||
let stepCount = 0;
|
||||
const maxSteps = 15; // Maximum expected steps
|
||||
|
||||
while (stepCount < maxSteps) {
|
||||
// Wait a bit for the step to render
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Look for various button types that indicate progression
|
||||
const nextButton = page.getByRole('button', { name: /next|siguiente|continuar/i });
|
||||
const skipButton = page.getByRole('button', { name: /skip|omitir|saltar/i });
|
||||
const finishButton = page.getByRole('button', { name: /finish|finalizar|completar/i });
|
||||
const goToDashboardButton = page.getByRole('button', { name: /ir al panel|go to dashboard/i });
|
||||
|
||||
// Check what step we're on and fill accordingly
|
||||
const bodyText = await page.locator('body').textContent();
|
||||
|
||||
// Step: Bakery Type Selection
|
||||
if (bodyText?.match(/tipo.*panadería|bakery.*type|selecciona.*tipo/i)) {
|
||||
console.log('📍 Step: Bakery Type Selection');
|
||||
const retailOption = page.getByRole('button', { name: /retail|minorista|venta/i }).first();
|
||||
if (await retailOption.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
await retailOption.click();
|
||||
}
|
||||
}
|
||||
|
||||
// Step: Tenant Setup (Register Bakery)
|
||||
else if (bodyText?.match(/registra.*panadería|register.*bakery|datos.*negocio/i)) {
|
||||
console.log('📍 Step: Tenant Setup');
|
||||
|
||||
// Fill bakery name if not filled
|
||||
const nameInput = page.getByLabel(/nombre.*panadería|bakery.*name|nombre.*negocio/i);
|
||||
if (await nameInput.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
const currentValue = await nameInput.inputValue();
|
||||
if (!currentValue) {
|
||||
await nameInput.fill(`Test Bakery ${Date.now()}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Fill address
|
||||
const addressInput = page.getByLabel(/dirección|address/i);
|
||||
if (await addressInput.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
const currentValue = await addressInput.inputValue();
|
||||
if (!currentValue) {
|
||||
await addressInput.fill('Calle Test 123');
|
||||
}
|
||||
}
|
||||
|
||||
// Fill postal code
|
||||
const postalInput = page.getByLabel(/código postal|postal.*code|zip/i);
|
||||
if (await postalInput.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
const currentValue = await postalInput.inputValue();
|
||||
if (!currentValue) {
|
||||
await postalInput.fill('28001');
|
||||
}
|
||||
}
|
||||
|
||||
// Fill city
|
||||
const cityInput = page.getByLabel(/ciudad|city/i);
|
||||
if (await cityInput.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
const currentValue = await cityInput.inputValue();
|
||||
if (!currentValue) {
|
||||
await cityInput.fill('Madrid');
|
||||
}
|
||||
}
|
||||
|
||||
// Fill phone
|
||||
const phoneInput = page.getByLabel(/teléfono|phone/i);
|
||||
if (await phoneInput.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
const currentValue = await phoneInput.inputValue();
|
||||
if (!currentValue) {
|
||||
await phoneInput.fill('666555444');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Step: Upload Sales Data
|
||||
else if (bodyText?.match(/subir.*datos|upload.*sales|archivo.*ventas/i)) {
|
||||
console.log('📍 Step: Upload Sales Data');
|
||||
|
||||
// Try to skip this step if possible
|
||||
if (await skipButton.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
await skipButton.click();
|
||||
stepCount++;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Otherwise, we'd need to upload a test CSV file
|
||||
// For now, we'll just proceed if there's a next button
|
||||
}
|
||||
|
||||
// Step: Inventory Review
|
||||
else if (bodyText?.match(/revisar.*inventario|inventory.*review|productos/i)) {
|
||||
console.log('📍 Step: Inventory Review');
|
||||
// Usually can skip or proceed with empty
|
||||
}
|
||||
|
||||
// Step: Initial Stock Entry
|
||||
else if (bodyText?.match(/stock.*inicial|initial.*stock|cantidad/i)) {
|
||||
console.log('📍 Step: Initial Stock Entry');
|
||||
|
||||
// Look for "Set all to 0" or skip button
|
||||
const setAllZeroButton = page.getByRole('button', { name: /establecer.*0|set.*all.*0/i });
|
||||
if (await setAllZeroButton.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
await setAllZeroButton.click();
|
||||
}
|
||||
}
|
||||
|
||||
// Step: Suppliers Setup
|
||||
else if (bodyText?.match(/proveedores|suppliers/i)) {
|
||||
console.log('📍 Step: Suppliers Setup');
|
||||
// Can skip for now
|
||||
}
|
||||
|
||||
// Step: Recipes Setup
|
||||
else if (bodyText?.match(/recetas|recipes/i)) {
|
||||
console.log('📍 Step: Recipes Setup');
|
||||
// Can skip for now
|
||||
}
|
||||
|
||||
// Step: ML Training
|
||||
else if (bodyText?.match(/entrenamiento|training|modelo.*ia|ai.*model/i)) {
|
||||
console.log('📍 Step: ML Training');
|
||||
|
||||
// Look for skip to dashboard button
|
||||
if (await goToDashboardButton.isVisible({ timeout: 5000 }).catch(() => false)) {
|
||||
await goToDashboardButton.click();
|
||||
// Should redirect to dashboard
|
||||
await page.waitForURL(/\/app\/(dashboard|operations)/, { timeout: 10000 });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Step: Completion
|
||||
else if (bodyText?.match(/completado|completed|felicidades|congratulations/i)) {
|
||||
console.log('📍 Step: Completion');
|
||||
|
||||
if (await goToDashboardButton.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
await goToDashboardButton.click();
|
||||
await page.waitForURL(/\/app\/(dashboard|operations)/, { timeout: 10000 });
|
||||
break;
|
||||
} else if (await finishButton.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
await finishButton.click();
|
||||
await page.waitForURL(/\/app\/(dashboard|operations)/, { timeout: 10000 });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Try to proceed to next step
|
||||
if (await nextButton.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
await nextButton.click();
|
||||
stepCount++;
|
||||
} else if (await skipButton.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
await skipButton.click();
|
||||
stepCount++;
|
||||
} else if (await finishButton.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
await finishButton.click();
|
||||
// Should redirect to dashboard
|
||||
await page.waitForURL(/\/app\/(dashboard|operations)/, { timeout: 10000 });
|
||||
break;
|
||||
} else {
|
||||
// No more navigation buttons found
|
||||
console.log('ℹ️ No more navigation buttons found, checking if we reached dashboard');
|
||||
|
||||
// Check if we're already at dashboard
|
||||
if (page.url().includes('/app/dashboard') || page.url().includes('/app/operations')) {
|
||||
break;
|
||||
}
|
||||
|
||||
// If we can't find any buttons and we're still on onboarding, something might be wrong
|
||||
if (page.url().includes('/onboarding')) {
|
||||
console.warn('⚠️ Still on onboarding page but no navigation buttons found');
|
||||
// Take a screenshot for debugging
|
||||
await page.screenshot({ path: `test-results/onboarding-stuck-step-${stepCount}.png` });
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
// Safety check: wait a bit between steps
|
||||
await page.waitForTimeout(500);
|
||||
}
|
||||
|
||||
console.log(`✅ Completed ${stepCount} onboarding steps`);
|
||||
});
|
||||
|
||||
await test.step('Verify successful onboarding completion', async () => {
|
||||
// Should be redirected to dashboard
|
||||
await expect(page).toHaveURL(/\/app\/(dashboard|operations)/, { timeout: 10000 });
|
||||
|
||||
// Verify dashboard elements are visible
|
||||
await expect(page.locator('body')).toContainText(/dashboard|panel|operaciones|operations/i, { timeout: 5000 });
|
||||
|
||||
// Take final screenshot
|
||||
await page.screenshot({ path: 'test-results/onboarding-completed.png', fullPage: true });
|
||||
});
|
||||
});
|
||||
|
||||
test('should complete onboarding with manual data entry (no file upload)', async ({ page }) => {
|
||||
const testUser = generateTestUser();
|
||||
|
||||
// Quick registration (simplified for this test)
|
||||
await page.goto('/register');
|
||||
await acceptCookieConsent(page);
|
||||
|
||||
// Fill registration form quickly
|
||||
await page.getByLabel(/nombre completo|full name/i).fill(testUser.fullName);
|
||||
await page.getByLabel(/correo|email/i).fill(testUser.email);
|
||||
await page.getByLabel(/^contraseña|^password/i).first().fill(testUser.password);
|
||||
await page.getByLabel(/confirmar contraseña|confirm password/i).fill(testUser.password);
|
||||
await page.getByRole('checkbox', { name: /acepto los términos|accept terms/i }).check();
|
||||
|
||||
// Proceed through registration
|
||||
await page.getByRole('button', { name: /siguiente|next/i }).click();
|
||||
|
||||
// Select plan (if subscription step appears)
|
||||
await page.waitForTimeout(2000);
|
||||
const nextButtonAfterPlan = page.getByRole('button', { name: /siguiente|next/i });
|
||||
if (await nextButtonAfterPlan.isVisible({ timeout: 3000 }).catch(() => false)) {
|
||||
await nextButtonAfterPlan.click();
|
||||
}
|
||||
|
||||
// Handle payment page
|
||||
const bypassToggle = page.getByRole('checkbox', { name: /bypass|omitir|skip.*payment/i });
|
||||
if (await bypassToggle.isVisible({ timeout: 3000 }).catch(() => false)) {
|
||||
await bypassToggle.check();
|
||||
await page.getByRole('button', { name: /completar registro|complete registration/i }).click();
|
||||
}
|
||||
|
||||
// Wait for onboarding
|
||||
await page.waitForURL(/\/app\/onboarding/, { timeout: 15000 });
|
||||
|
||||
// Test specific scenario: Skip file upload and add products manually
|
||||
await test.step('Navigate to manual product entry', async () => {
|
||||
// Look for file upload step and skip it
|
||||
let attempts = 0;
|
||||
while (attempts < 10) {
|
||||
const bodyText = await page.locator('body').textContent();
|
||||
|
||||
if (bodyText?.match(/subir.*archivo|upload.*file|sales.*data/i)) {
|
||||
// Found upload step, try to skip
|
||||
const skipButton = page.getByRole('button', { name: /skip|omitir|saltar|manual/i });
|
||||
if (await skipButton.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
await skipButton.click();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Try next button if available
|
||||
const nextButton = page.getByRole('button', { name: /next|siguiente/i });
|
||||
if (await nextButton.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
await nextButton.click();
|
||||
attempts++;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test('should handle validation errors gracefully', async ({ page }) => {
|
||||
await page.goto('/register');
|
||||
await acceptCookieConsent(page);
|
||||
|
||||
await test.step('Test password validation', async () => {
|
||||
// Try weak password
|
||||
await page.getByLabel(/nombre completo|full name/i).fill('Test User');
|
||||
await page.getByLabel(/correo|email/i).fill('test@example.com');
|
||||
await page.getByLabel(/^contraseña|^password/i).first().fill('weak');
|
||||
|
||||
// Next button should be disabled or show error
|
||||
const nextButton = page.getByRole('button', { name: /siguiente|next/i });
|
||||
|
||||
// Either button is disabled or we see password criteria errors
|
||||
const isDisabled = await nextButton.isDisabled();
|
||||
const hasPasswordError = await page.getByText(/mínimo|caracteres|mayúscula|minúscula/i).isVisible().catch(() => false);
|
||||
|
||||
expect(isDisabled || hasPasswordError).toBe(true);
|
||||
});
|
||||
|
||||
await test.step('Test email validation', async () => {
|
||||
// Try invalid email
|
||||
await page.getByLabel(/correo|email/i).fill('invalid-email');
|
||||
await page.getByLabel(/^contraseña|^password/i).first().click(); // Blur the email field
|
||||
|
||||
// Should show email error
|
||||
await expect(page.getByText(/email.*válido|valid.*email/i)).toBeVisible({ timeout: 3000 });
|
||||
});
|
||||
|
||||
await test.step('Test terms acceptance requirement', async () => {
|
||||
// Fill valid data but don't accept terms
|
||||
await page.getByLabel(/nombre completo|full name/i).fill('Test User');
|
||||
await page.getByLabel(/correo|email/i).fill('test@example.com');
|
||||
await page.getByLabel(/^contraseña|^password/i).first().fill('SecurePass123!');
|
||||
await page.getByLabel(/confirmar contraseña|confirm password/i).fill('SecurePass123!');
|
||||
|
||||
// Try to proceed without accepting terms
|
||||
const nextButton = page.getByRole('button', { name: /siguiente|next/i });
|
||||
|
||||
// Button should be disabled
|
||||
await expect(nextButton).toBeDisabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user