Form Handling

/**
 * Fill multiple form fields by name attribute
 * @param selector - CSS selector or Selector object to identify the form
 * @param values - Object mapping field names to their values
 * @param options - Form filling options including typing delay
 * @returns Promise that resolves when all fields are filled
 */
toFillForm(selector: string | Selector, values: Record<string, string>, options?: ToFillFormOptions): Promise<void>;

interface ToFillFormOptions extends ToFillOptions, ToMatchElementOptions {
  /** Delay between keystrokes for all fields */
  delay?: number;
}

import { expect } from "expect-puppeteer";

// Fill complete registration form
await expect(page).toFillForm('form[name="registration"]', {
  firstName: "John",
  lastName: "Doe",
  email: "john.doe@example.com",
  username: "johndoe",
  password: "securePassword123"
});

// Fill contact form
await expect(page).toFillForm("#contact-form", {
  name: "Jane Smith",
  email: "jane@company.com",
  subject: "Product Inquiry",
  message: "I would like more information about your services."
});

// Fill form with typing delay
await expect(page).toFillForm(".user-form", {
  firstName: "Alice",
  lastName: "Johnson"
}, { delay: 50 });

// Fill form within modal context
const modal = await expect(page).toMatchElement(".modal");
await expect(modal).toFillForm("form", {
  title: "New Project",
  description: "Project description here"
});

// Fill address form
await expect(page).toFillForm('form[action="/shipping"]', {
  street: "123 Main Street",
  city: "Springfield",
  state: "IL",
  zipCode: "62701",
  country: "USA"
});

/**
 * Select an option from a select dropdown element
 * @param selector - CSS selector or Selector object to identify the select element
 * @param valueOrText - Option value attribute or visible text to select
 * @param options - Selection options
 * @returns Promise that resolves when option is selected
 */
toSelect(selector: string | Selector, valueOrText: string, options?: ToMatchElementOptions): Promise<void>;

import { expect } from "expect-puppeteer";

// Select by option value
await expect(page).toSelect('select[name="country"]', "US");

// Select by visible text
await expect(page).toSelect('select[name="category"]', "Electronics");

// Select from dropdown with specific context
const form = await expect(page).toMatchElement("#shipping-form");
await expect(form).toSelect('select[name="shippingMethod"]', "Express");

// Select from multiple dropdowns in sequence
await expect(page).toSelect("#year-select", "2024");
await expect(page).toSelect("#month-select", "March");
await expect(page).toSelect("#day-select", "15");

// Select with text that matches option text exactly
await expect(page).toSelect('select[name="size"]', "Large (L)");

// Select from dynamically loaded options
await expect(page).toSelect('select[name="city"]', "New York", {
  timeout: 5000
});

import { expect } from "expect-puppeteer";

// Navigate to registration page
await page.goto("https://example.com/register");

// Fill the main form fields
await expect(page).toFillForm("#registration-form", {
  username: "newuser123",
  email: "newuser@example.com",
  firstName: "John",
  lastName: "Doe",
  phone: "555-123-4567"
});

// Handle select dropdowns
await expect(page).toSelect('select[name="country"]', "United States");
await expect(page).toSelect('select[name="state"]', "California");
await expect(page).toSelect('select[name="timezone"]', "Pacific Time");

// Fill remaining fields
await expect(page).toFill('input[name="password"]', "SecurePass123!");
await expect(page).toFill('input[name="confirmPassword"]', "SecurePass123!");

// Submit the form
await expect(page).toClick('button[type="submit"]');

// Verify successful registration
await expect(page).toMatchTextContent("Registration successful");

import { expect } from "expect-puppeteer";

// Fill shipping information
await expect(page).toFillForm("#shipping-form", {
  firstName: "Jane",
  lastName: "Smith",
  address1: "456 Oak Avenue",
  address2: "Apt 2B",
  city: "Portland",
  zipCode: "97201"
});

await expect(page).toSelect('select[name="state"]', "Oregon");
await expect(page).toSelect('select[name="shippingMethod"]', "Standard");

// Fill billing information (if different)
await expect(page).toClick('#different-billing');
await expect(page).toFillForm("#billing-form", {
  firstName: "Jane",
  lastName: "Smith",
  address1: "789 Pine Street",
  city: "Seattle",
  zipCode: "98101"
});

await expect(page).toSelect('select[name="billingState"]', "Washington");

// Payment information
await expect(page).toFill('input[name="cardNumber"]', "4111111111111111");
await expect(page).toSelect('select[name="expiryMonth"]', "12");
await expect(page).toSelect('select[name="expiryYear"]', "2025");
await expect(page).toFill('input[name="cvv"]', "123");

// Complete purchase
await expect(page).toClick('#place-order-btn');
await expect(page).toMatchTextContent("Order confirmed");

import { expect } from "expect-puppeteer";

// Attempt to submit form with invalid data
await expect(page).toFillForm("#login-form", {
  email: "invalid-email",
  password: "123"
});

await expect(page).toClick('button[type="submit"]');

// Check for validation errors
await expect(page).toMatchTextContent("Please enter a valid email address");
await expect(page).toMatchElement(".field-error", { text: "Password too short" });

// Correct the errors and resubmit
await expect(page).toFill('input[name="email"]', "user@example.com");
await expect(page).toFill('input[name="password"]', "correctPassword123");
await expect(page).toClick('button[type="submit"]');

// Verify successful submission
await expect(page).not.toMatchElement(".field-error");
await expect(page).toMatchTextContent("Login successful");