form-validation-breaker

Exhaustive testing of form validation logic including boundary values, injection payloads, encoding edge cases, and client-server validation bypass techniques

Ir a la instalación

Repositorio: PramodDutta/qaskills
Última actividad en el origen: 20 de febrero de 2026 a las 12:28
Idioma detectado de SKILL.md: inglés
Estrellas: 201
Forks: 21

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

Volver a la búsqueda Volver a la instalación

name	Form Validation Breaker
description	Exhaustive testing of form validation logic including boundary values, injection payloads, encoding edge cases, and client-server validation bypass techniques
version	1.0.0
author	Pramod
license	MIT
tags	["form-validation","input-testing","boundary-testing","injection-testing","xss-prevention","validation-bypass","fuzzing"]
testingTypes	["security","e2e"]
frameworks	["playwright"]
languages	["typescript","javascript"]
domains	["web"]
agents	["claude-code","cursor","github-copilot","windsurf","codex","aider","continue","cline","zed","bolt","gemini-cli","amp"]

Form Validation Breaker Skill

You are an expert QA security engineer specializing in form validation testing. When the user asks you to test form inputs, break validation logic, or verify server-side protection against malicious input, follow these detailed instructions.

Core Principles

Client-side validation is a convenience, not a defense -- Every form must have server-side validation that mirrors or exceeds client-side rules. Testing must bypass client-side checks to verify the server rejects invalid input.
Boundary values reveal more bugs than random values -- The edges of valid ranges (min, max, min-1, max+1, zero, empty, null) are where validation logic most commonly fails.
Encoding matters as much as content -- The same character can be represented in UTF-8, URL encoding, HTML entities, Unicode escapes, and base64. Validation that blocks <script> but allows %3Cscript%3E is broken.
Test the entire submission pipeline -- A form value passes through DOM event handlers, client-side framework validation, HTTP serialization, server-side parsing, database binding, and output rendering. Each stage can transform or mishandle the input.
Every input type has unique attack vectors -- Text fields, email inputs, file uploads, dropdowns, checkboxes, hidden fields, date pickers, and rich text editors each have distinct failure modes. Test each type specifically.
Multi-step forms have inter-step vulnerabilities -- When a form spans multiple pages or tabs, state can leak between steps. Manipulating step order, replaying previous steps, or submitting incomplete flows exposes logic bugs.
Validation error messages should not leak implementation details -- Error messages like "SQL syntax error" or "column 'users.email' not found" reveal the database schema. Verify that error messages are generic and user-friendly.

Project Structure

Organize your form validation testing suite with this structure:

tests/
  form-validation/
    boundary-values.spec.ts
    injection-payloads.spec.ts
    encoding-edge-cases.spec.ts
    file-upload-validation.spec.ts
    client-bypass.spec.ts
    multi-step-forms.spec.ts
    real-time-validation.spec.ts
  fixtures/
    form-breaker.fixture.ts
  helpers/
    payload-generator.ts
    boundary-calculator.ts
    encoding-transformer.ts
    validation-reporter.ts
  payloads/
    xss-vectors.json
    sql-injection.json
    unicode-edge-cases.json
playwright.config.ts

Payload Generator

The payload generator creates targeted test inputs for different validation scenarios.



   {
  : ;
  : ;
  : ;
  :  | ;
  : ;
}

  (): [] {
   : [] = [];
   { minLength = , maxLength = , minValue, maxValue, required = ,  =  } = options;

  
   (required) {
    payloads.({
      : ,
      : ,
      : ,
      : ,
      : ,
    });
    payloads.({
      : ,
      : ,
      : ,
      : ,
      : ,
    });
    payloads.({
      : ,
      : ,
      : ,
      : ,
      : ,
    });
    payloads.({
      : ,
      : ,
      : ,
      : ,
      : ,
    });
  }

  
   (minLength > ) {
    payloads.({
      : ,
      : .(minLength - ),
      : ,
      : ,
      : ,
    });
    payloads.({
      : ,
      : .(minLength),
      : ,
      : ,
      : ,
    });
  }

   (maxLength) {
    payloads.({
      : ,
      : .(maxLength),
      : ,
      : ,
      : ,
    });
    payloads.({
      : ,
      : .(maxLength + ),
      : ,
      : ,
      : ,
    });
    payloads.({
      : ,
      : .(maxLength * ),
      : ,
      : ,
      : ,
    });
  }

  
   ( ===  && minValue !==  && maxValue !== ) {
    payloads.(
      { : , : (minValue - ), : , : , :  },
      { : , : (minValue), : , : , :  },
      { : , : (maxValue), : , : , :  },
      { : , : (maxValue + ), : , : , :  },
      { : , : , : , : , :  },
      { : , : , : , : , :  },
      { : , : , : , : , :  },
      { : , : , : , : , :  },
      { : , : , : , : , :  }
    );
  }

   payloads;
}

  (): [] {
   [
    
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },

    
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },

    
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },

    
    { : , : , : , : , :  },
    { : , : , : , : , :  },

    
    { : , : , : , : , :  },

    
    { : , : , : , : , :  },
    { : , : , : , : , :  },
  ];
}

  (): [] {
   [
    
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },
    { : , : , : , : , :  },

    
    { : , : , : , : , :  },
    { : , : , : , : , :  },
  ];
}

// tests/fixtures/form-breaker.fixture.ts
import { test as base, Page, expect } from '@playwright/test';

export interface ValidationResult {
  fieldName: string;
  payload: string;
  payloadCategory: string;
  clientSideBlocked: boolean;
  serverSideBlocked: boolean;
  errorMessage: string;
  httpStatus?: number;
  responseBody?: string;
}

export class FormBreaker {
  constructor(private page: Page) {}

  /**
   * Fill a form field, bypassing any client-side maxlength or pattern restrictions
   */
  async fillFieldBypassingValidation(
    selector: string,
    value: string
  ): Promise<void> {
    await this.page.evaluate(
      ({ sel, val }) => {
        const element = document.querySelector(sel) as HTMLInputElement;
        if (!element) throw new Error(`Element not found: ${sel}`);

        // Remove client-side constraints
        element.removeAttribute('maxlength');
        element.removeAttribute('minlength');
        element.removeAttribute('pattern');
        element.removeAttribute('required');
        element.removeAttribute('min');
        element.removeAttribute('max');
        element.removeAttribute('step');
        element.type = 'text'; // Override type constraints

        // Set value directly, bypassing React/Vue controlled component logic
        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
          HTMLInputElement.prototype,
          'value'
        )!.set!;
        nativeInputValueSetter.call(element, val);

        // Dispatch events to trigger framework change handlers
        element.dispatchEvent(new Event('input', { bubbles: true }));
        element.dispatchEvent(new Event('change', { bubbles: true }));
      },
      { sel: selector, val: value }
    );
  }

  /**
   * Submit a form by intercepting the submit event and sending raw data
   */
  async submitFormWithRawData(
    formSelector: string,
    data: Record<string, string>
  ): Promise<{ status: number; body: string }> {
    // Intercept form submission to capture the response
    const [response] = await Promise.all([
      this.page.waitForResponse(
        (resp) => resp.request().method() === 'POST',
        { timeout: 10000 }
      ).catch(() => null),
      this.page.evaluate(
        ({ sel, formData }) => {
          const form = document.querySelector(sel) as HTMLFormElement;
          if (!form) throw new Error(`Form not found: ${sel}`);

          // Remove form validation
          form.setAttribute('novalidate', 'true');

          // Fill fields
          for (const [name, value] of Object.entries(formData)) {
            const field = form.querySelector(`[name="${name}"]`) as HTMLInputElement;
            if (field) {
              field.removeAttribute('required');
              field.removeAttribute('pattern');
              field.removeAttribute('maxlength');
              const setter = Object.getOwnPropertyDescriptor(
                HTMLInputElement.prototype,
                'value'
              )!.set!;
              setter.call(field, value);
              field.dispatchEvent(new Event('input', { bubbles: true }));
              field.dispatchEvent(new Event('change', { bubbles: true }));
            }
          }

          // Submit the form
          form.submit();
        },
        { sel: formSelector, formData: data }
      ),
    ]);

    if (response) {
      return {
        status: response.status(),
        body: await response.text().catch(() => ''),
      };
    }

    return { status: 0, body: '' };
  }

  /**
   * Send form data directly via API, completely bypassing the browser form
   */
  async submitViaApi(
    url: string,
    data: Record<string, string>,
    method: 'POST' | 'PUT' | 'PATCH' = 'POST'
  ): Promise<{ status: number; body: string }> {
    const response = await this.page.request.fetch(url, {
      method,
      headers: { 'Content-Type': 'application/json' },
      data: JSON.stringify(data),
    });

    return {
      status: response.status(),
      body: await response.text(),
    };
  }

  /**
   * Check if a validation error message is displayed on the page
   */
  async getValidationErrors(): Promise<string[]> {
    return await this.page.evaluate(() => {
      const errors: string[] = [];

      // HTML5 validation messages
      document.querySelectorAll(':invalid').forEach((el) => {
        const input = el as HTMLInputElement;
        if (input.validationMessage) {
          errors.push(`[${input.name || input.id}]: ${input.validationMessage}`);
        }
      });

      // Common error display patterns
      const errorSelectors = [
        '[class*="error"]',
        '[class*="invalid"]',
        '[role="alert"]',
        '.field-error',
        '.form-error',
        '.validation-error',
        '[data-testid*="error"]',
        '[aria-invalid="true"]',
      ];

      for (const selector of errorSelectors) {
        document.querySelectorAll(selector).forEach((el) => {
          const text = (el as HTMLElement).textContent?.trim();
          if (text && text.length > 0 && text.length < 500) {
            errors.push(text);
          }
        });
      }

      return [...new Set(errors)];
    });
  }
}

export const test = base.extend<{ formBreaker: FormBreaker }>({
  formBreaker: async ({ page }, use) => {
    const breaker = new FormBreaker(page);
    await use(breaker);
  },
});

export { expect } from '@playwright/test';

// tests/form-validation/boundary-values.spec.ts
import { test, expect } from '../fixtures/form-breaker.fixture';
import { generateBoundaryPayloads } from '../helpers/payload-generator';

test.describe('Form Boundary Value Testing', () => {
  test.beforeEach(async ({ page }) => {
    const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
    await page.goto(`${baseUrl}/signup`, { waitUntil: 'networkidle' });
  });

  test('email field should enforce valid email format', async ({ page, formBreaker }) => {
    const invalidEmails = [
      'plainaddress',
      '@missing-local.com',
      'missing-at-sign.com',
      'missing-domain@.com',
      'missing-tld@domain.',
      'spaces in@email.com',
      'double@@email.com',
      '.leading-dot@email.com',
      'trailing-dot.@email.com',
      'multiple...dots@email.com',
      'email@-leading-hyphen.com',
      'email@domain..double-dot.com',
      '<script>@email.com',
      'email@domain.com<script>',
    ];

    for (const email of invalidEmails) {
      await formBreaker.fillFieldBypassingValidation('input[name="email"]', email);

      // Try to submit
      const submitButton = page.getByRole('button', { name: /sign up|register|submit/i });
      if (await submitButton.isVisible()) {
        await submitButton.click();
        await page.waitForTimeout(1000);
      }

      // Check that the form was not successfully submitted
      const errors = await formBreaker.getValidationErrors();
      const currentUrl = page.url();

      // Either there should be validation errors visible,
      // or the URL should not have changed to a success page
      const wasRejected = errors.length > 0 || currentUrl.includes('signup');
      expect(wasRejected, `Email "${email}" should have been rejected`).toBe(true);

      // Reset the form
      await page.reload();
    }
  });

  test('username field should enforce length boundaries', async ({ page, formBreaker }) => {
    const payloads = generateBoundaryPayloads('username', {
      minLength: 3,
      maxLength: 50,
      required: true,
      type: 'text',
    });

    for (const payload of payloads) {
      await formBreaker.fillFieldBypassingValidation(
        'input[name="username"]',
        payload.value
      );

      const submitButton = page.getByRole('button', { name: /sign up|register|submit/i });
      if (await submitButton.isVisible()) {
        await submitButton.click();
        await page.waitForTimeout(1000);
      }

      const errors = await formBreaker.getValidationErrors();

      if (payload.expectedResult === 'reject') {
        expect(
          errors.length > 0 || page.url().includes('signup'),
          `Payload "${payload.name}" should have been rejected: ${payload.description}`
        ).toBe(true);
      }

      await page.reload();
    }
  });

  test('password field should enforce complexity requirements', async ({
    page,
    formBreaker,
  }) => {
    const weakPasswords = [
      '123',
      'password',
      '12345678',
      'abcdefgh',
      'ABCDEFGH',
      '!@#$%^&*',
      'aA1',      // Too short but meets complexity
      ' '.repeat(20), // Whitespace only
    ];

    for (const password of weakPasswords) {
      await formBreaker.fillFieldBypassingValidation(
        'input[name="password"]',
        password
      );

      const submitButton = page.getByRole('button', { name: /sign up|register|submit/i });
      if (await submitButton.isVisible()) {
        await submitButton.click();
        await page.waitForTimeout(1000);
      }

      const errors = await formBreaker.getValidationErrors();
      expect(
        errors.length > 0 || page.url().includes('signup'),
        `Weak password "${password}" should have been rejected`
      ).toBe(true);

      await page.reload();
    }
  });
});

// tests/form-validation/injection-payloads.spec.ts
import { test, expect } from '../fixtures/form-breaker.fixture';
import { generateInjectionPayloads } from '../helpers/payload-generator';

test.describe('Injection Payload Testing', () => {
  test('search field should sanitize XSS payloads', async ({ page, formBreaker }) => {
    const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
    await page.goto(`${baseUrl}/search`, { waitUntil: 'networkidle' });

    const xssPayloads = generateInjectionPayloads('search').filter(
      (p) => p.category === 'xss'
    );

    for (const payload of xssPayloads) {
      await formBreaker.fillFieldBypassingValidation(
        'input[name="q"], input[type="search"], input[name="search"]',
        payload.value
      );

      // Submit the search
      await page.keyboard.press('Enter');
      await page.waitForTimeout(2000);

      // Check that no script was executed
      const alertTriggered = await page.evaluate(() => {
        return (window as any).__xssTriggered === true;
      });
      expect(alertTriggered, `XSS payload should not execute: ${payload.name}`).toBeFalsy();

      // Check that the raw HTML is not reflected unescaped
      const pageContent = await page.content();
      expect(
        pageContent.includes('<script>alert'),
        `Raw script tag should not appear in page content for: ${payload.name}`
      ).toBe(false);

      await page.goto(`${baseUrl}/search`);
    }
  });

  test('login form should resist SQL injection', async ({ page, formBreaker }) => {
    const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
    await page.goto(`${baseUrl}/login`, { waitUntil: 'networkidle' });

    const sqliPayloads = generateInjectionPayloads('email').filter(
      (p) => p.category === 'sqli'
    );

    for (const payload of sqliPayloads) {
      await formBreaker.fillFieldBypassingValidation(
        'input[name="email"], input[name="username"]',
        payload.value
      );
      await formBreaker.fillFieldBypassingValidation(
        'input[name="password"]',
        payload.value
      );

      const submitButton = page.getByRole('button', { name: /log in|sign in|submit/i });
      if (await submitButton.isVisible()) {
        await submitButton.click();
        await page.waitForTimeout(2000);
      }

      // Verify we are NOT logged in
      const loggedIn = await page
        .getByText(/dashboard|welcome|logout/i)
        .isVisible()
        .catch(() => false);
      expect(loggedIn, `SQL injection should not bypass auth: ${payload.name}`).toBe(false);

      // Check for SQL error messages in the response
      const pageText = await page.textContent('body');
      const sqlErrorPatterns = [
        /sql syntax/i,
        /mysql_/i,
        /pg_query/i,
        /sqlite3?_/i,
        /ORA-\d+/,
        /unclosed quotation/i,
        /unterminated string/i,
      ];

      for (const pattern of sqlErrorPatterns) {
        expect(
          pattern.test(pageText || ''),
          `SQL error should not be exposed for: ${payload.name}`
        ).toBe(false);
      }

      await page.goto(`${baseUrl}/login`);
    }
  });
});

// tests/form-validation/client-bypass.spec.ts
import { test, expect } from '../fixtures/form-breaker.fixture';

test.describe('Client-Side Validation Bypass', () => {
  test('server should reject data when HTML5 validation is removed', async ({
    page,
    formBreaker,
  }) => {
    const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
    await page.goto(`${baseUrl}/signup`, { waitUntil: 'networkidle' });

    // Remove all client-side validation from the form
    await page.evaluate(() => {
      const form = document.querySelector('form');
      if (form) {
        form.setAttribute('novalidate', 'true');
        form.querySelectorAll('input, select, textarea').forEach((el) => {
          el.removeAttribute('required');
          el.removeAttribute('pattern');
          el.removeAttribute('minlength');
          el.removeAttribute('maxlength');
          el.removeAttribute('min');
          el.removeAttribute('max');
          (el as HTMLInputElement).type = 'text';
        });
      }
    });

    // Submit completely empty form
    const submitButton = page.getByRole('button', { name: /sign up|register|submit/i });
    if (await submitButton.isVisible()) {
      await submitButton.click();
      await page.waitForTimeout(3000);
    }

    // Verify server-side rejection
    const currentUrl = page.url();
    const pageText = await page.textContent('body');

    // Either we stayed on the form page, or we got server-side error messages
    const serverRejected =
      currentUrl.includes('signup') ||
      /error|required|invalid|please/i.test(pageText || '');

    expect(serverRejected, 'Server should reject empty form submission').toBe(true);
  });

  test('server should reject data submitted directly via API', async ({
    page,
    formBreaker,
  }) => {
    const baseUrl = process.env.BASE_URL || 'http://localhost:3000';

    // Send invalid data directly to the API endpoint, bypassing the UI entirely
    const invalidSubmissions = [
      { email: '', password: '' },
      { email: 'not-an-email', password: '1' },
      { email: '<script>alert(1)</script>@test.com', password: 'ValidPass123!' },
      { email: 'test@example.com', password: "' OR '1'='1" },
    ];

    for (const data of invalidSubmissions) {
      const result = await formBreaker.submitViaApi(
        `${baseUrl}/api/auth/register`,
        data as Record<string, string>
      );

      expect(
        result.status,
        `API should reject invalid data: ${JSON.stringify(data)}`
      ).toBeGreaterThanOrEqual(400);

      // Verify no SQL or internal errors are exposed
      expect(result.body).not.toMatch(/sql|syntax|stack|trace|internal server/i);
    }
  });

  test('hidden fields should not be blindly trusted', async ({ page, formBreaker }) => {
    const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
    await page.goto(`${baseUrl}/checkout`, { waitUntil: 'networkidle' });

    // Manipulate hidden fields (like price, role, or discount codes)
    await page.evaluate(() => {
      const hiddenFields = document.querySelectorAll('input[type="hidden"]');
      hiddenFields.forEach((field) => {
        const input = field as HTMLInputElement;
        if (input.name.includes('price') || input.name.includes('amount')) {
          input.value = '0.01';
        }
        if (input.name.includes('role') || input.name.includes('admin')) {
          input.value = 'admin';
        }
        if (input.name.includes('discount')) {
          input.value = '99.99';
        }
      });
    });

    const submitButton = page.getByRole('button', { name: /submit|purchase|pay/i });
    if (await submitButton.isVisible()) {
      await submitButton.click();
      await page.waitForTimeout(3000);
    }

    // Verify the server did not accept the manipulated values
    // This assertion depends on your application's behavior
    const pageText = await page.textContent('body');
    expect(pageText).not.toMatch(/order confirmed.*\$0\.01/i);
  });
});

// tests/form-validation/file-upload-validation.spec.ts
import { test, expect } from '@playwright/test';
import * as fs from 'fs';
import * as path from 'path';
import * as os from 'os';

test.describe('File Upload Validation', () => {
  let tempDir: string;

  test.beforeAll(() => {
    tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'upload-test-'));
  });

  test.afterAll(() => {
    fs.rmSync(tempDir, { recursive: true, force: true });
  });

  function createTempFile(name: string, content: string | Buffer): string {
    const filePath = path.join(tempDir, name);
    fs.writeFileSync(filePath, content);
    return filePath;
  }

  test('should reject files with dangerous extensions', async ({ page }) => {
    const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
    await page.goto(`${baseUrl}/upload`, { waitUntil: 'networkidle' });

    const dangerousFiles = [
      createTempFile('malicious.exe', 'MZ fake exe content'),
      createTempFile('script.php', '<?php echo "pwned"; ?>'),
      createTempFile('shell.jsp', '<% Runtime.getRuntime().exec("ls"); %>'),
      createTempFile('backdoor.asp', '<% Response.Write("pwned") %>'),
      createTempFile('exploit.svg', '<svg onload="alert(1)">'),
      createTempFile('payload.html', '<script>alert(1)</script>'),
    ];

    for (const filePath of dangerousFiles) {
      const fileInput = page.locator('input[type="file"]');
      if (await fileInput.isVisible()) {
        await fileInput.setInputFiles(filePath);
        await page.waitForTimeout(1000);

        const submitButton = page.getByRole('button', { name: /upload|submit/i });
        if (await submitButton.isVisible()) {
          await submitButton.click();
          await page.waitForTimeout(2000);
        }

        // Verify the file was rejected
        const pageText = await page.textContent('body');
        const fileName = path.basename(filePath);
        expect(
          /error|rejected|not allowed|invalid/i.test(pageText || '') || page.url().includes('upload'),
          `Dangerous file "${fileName}" should have been rejected`
        ).toBe(true);

        await page.reload();
      }
    }
  });

  test('should reject files that exceed size limits', async ({ page }) => {
    const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
    await page.goto(`${baseUrl}/upload`, { waitUntil: 'networkidle' });

    // Create a 50MB file (likely exceeds most upload limits)
    const largeFile = createTempFile('large-file.jpg', Buffer.alloc(50 * 1024 * 1024, 0xff));

    const fileInput = page.locator('input[type="file"]');
    if (await fileInput.isVisible()) {
      await fileInput.setInputFiles(largeFile);

      const submitButton = page.getByRole('button', { name: /upload|submit/i });
      if (await submitButton.isVisible()) {
        await submitButton.click();
        await page.waitForTimeout(5000);
      }

      const pageText = await page.textContent('body');
      expect(
        /too large|size limit|exceeds|maximum/i.test(pageText || ''),
        'Large file should trigger size limit error'
      ).toBe(true);
    }
  });

  test('should verify file content matches extension', async ({ page }) => {
    const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
    await page.goto(`${baseUrl}/upload`, { waitUntil: 'networkidle' });

    // Create a PHP file disguised as a JPEG
    const disguisedFile = createTempFile(
      'innocent.jpg',
      '<?php echo shell_exec($_GET["cmd"]); ?>'
    );

    const fileInput = page.locator('input[type="file"]');
    if (await fileInput.isVisible()) {
      await fileInput.setInputFiles(disguisedFile);

      const submitButton = page.getByRole('button', { name: /upload|submit/i });
      if (await submitButton.isVisible()) {
        await submitButton.click();
        await page.waitForTimeout(2000);
      }

      // A robust server should reject files where the content type does not match the extension
      const pageText = await page.textContent('body');
      expect(
        /error|invalid|rejected|not.*valid/i.test(pageText || '') || page.url().includes('upload'),
        'Disguised file should be rejected by content-type validation'
      ).toBe(true);
    }
  });
});

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/form-validation',
  timeout: 60_000,
  retries: 0, // Validation tests should be deterministic
  workers: 1, // Sequential to avoid form state conflicts
  reporter: [
    ['html', { outputFolder: 'reports/html' }],
    ['json', { outputFile: 'reports/results.json' }],
    ['list'],
  ],
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium' },
    },
  ],
});

Always test server-side validation independently from client-side -- Use direct API calls (fetch/axios) to submit data that bypasses the browser entirely. If the server accepts it, the validation is incomplete.
Test with the actual character encoding your database uses -- MySQL in utf8 mode (not utf8mb4) truncates 4-byte Unicode characters silently. Test with emoji and supplementary plane characters to verify full Unicode support.
Verify error messages do not reveal internal details -- Stack traces, database column names, file paths, and framework version numbers in error messages are information disclosure vulnerabilities.
Test all input fields, not just the obvious ones -- Hidden fields, dropdown values, radio button values, and URL parameters can all be manipulated by an attacker. Every server-side value that came from the client must be validated.
Include timing-based tests -- A login form that responds in 100ms for invalid usernames but 500ms for valid ones leaks user enumeration information. Measure response times for different payloads.
Test with and without JavaScript enabled -- Disable JavaScript in the browser context and verify that the form still works and still validates. HTML5 validation attributes provide a baseline.
Validate CSRF token handling -- Submit forms without the CSRF token, with an expired token, and with a token from a different session. All should be rejected.
Test rate limiting on form submissions -- Submit the same form 100 times rapidly. The server should throttle or block excessive submissions to prevent brute force attacks.
Check for mass assignment vulnerabilities -- Add extra fields to the form submission (like role=admin or isVerified=true) that are not in the original form. The server must whitelist allowed fields.
Verify consistent validation between create and update operations -- The same validation rules that apply when creating a record must also apply when updating it. Test both paths.
Test multi-value fields and arrays -- Fields like tags[] or categories[] can be manipulated to send unexpected data types. Send a string where an array is expected and vice versa.
Automate regression testing for every fixed vulnerability -- When a validation bug is found and fixed, add a specific test for that exact payload to prevent regression.