✨ feat: migrate fill-form example to sandbox multi-step checkout

python-examples/playwright-basics/.parameters/api/07-fill-form/default.json

@@ -1,5 +1,8 @@
 {
   "firstName": "John",
   "lastName": "Doe",
-  "email": "john.doe@example.com"
+  "addressLine1": "123 Main St",
+  "city": "Springfield",
+  "state": "IL",
+  "zipCode": "62701"
 }

python-examples/playwright-basics/api/07-fill-form.py

@@ -1,10 +1,10 @@
 """
 Fill Form
 
-Demonstrates form interactions:
-- Text input fields
-- Dropdown selects
-- Checkboxes and radio buttons
+Demonstrates multi-step form interactions on a 3-step checkout form:
+- Step 1: Shipping address (text inputs, dropdown, checkbox)
+- Step 2: Payment details (text inputs, checkbox)
+- Step 3: Review and complete order
 """
 
 from typing import TypedDict
@@ -15,82 +15,86 @@
 class Params(TypedDict):
     firstName: str
     lastName: str
-    email: str
+    addressLine1: str
+    city: str
+    state: str
+    zipCode: str
 
 
 async def automation(page: Page, params: Params | None = None, **_kwargs):
     first_name = params.get("firstName", "John") if params else "John"
-
-    # Using the-internet for reliable form demonstration
-    await page.goto("https://the-internet.herokuapp.com/login")
+    last_name = params.get("lastName", "Doe") if params else "Doe"
+    address_line1 = (
+        params.get("addressLine1", "123 Main St") if params else "123 Main St"
+    )
+    city = params.get("city", "Springfield") if params else "Springfield"
+    state = params.get("state", "IL") if params else "IL"
+    zip_code = params.get("zipCode", "62701") if params else "62701"
+
+    await page.goto("https://sandbox.intuned.dev/steps-form/ShippingAddress")
     await page.wait_for_load_state("load")
 
-    # Fill text inputs using different locator strategies
-    # By ID
-    await page.locator("#username").fill(first_name)
-
-    # By name attribute
-    await page.locator('input[name="password"]').fill("SuperSecretPassword!")
-
-    # Get values before any action
-    username_value = await page.locator("#username").input_value()
+    # Step 1: Shipping Address — type slowly to simulate human input
+    await page.get_by_label("First Name").press_sequentially(first_name, delay=80)
+    await page.get_by_label("Last Name").press_sequentially(last_name, delay=80)
+    await page.get_by_label("Address Line1").press_sequentially(address_line1, delay=80)
+    await page.get_by_label("Address Line2").press_sequentially("Apt 4B", delay=80)
+    await page.get_by_label("City").press_sequentially(city, delay=80)
+    await page.get_by_label("State").press_sequentially(state, delay=80)
+    await page.get_by_label("Zip Code").press_sequentially(zip_code, delay=80)
 
-    # Click button using role
-    await page.get_by_role("button", name="Login").click()
+    # Select country from dropdown
+    await page.get_by_label("Country").select_option(label="United States")
 
-    # Wait for result
-    await page.wait_for_load_state("networkidle")
+    # Check "Use for future purchase"
+    use_for_future = page.get_by_label("Use for future purchase.")
+    if not await use_for_future.is_checked():
+        await use_for_future.check()
 
-    # Check if we got an error message (expected since credentials are fake)
-    flash_message = await page.locator("#flash").text_content()
-
-    # Navigate to dropdown page for select demonstration
-    await page.goto("https://the-internet.herokuapp.com/dropdown")
+    await page.get_by_role("button", name="Next").click()
     await page.wait_for_load_state("load")
 
-    # Select dropdown option by value
-    dropdown = page.locator("#dropdown")
-    await dropdown.select_option("1")
-    selected_value = await dropdown.input_value()
-
-    # Select by label text
-    await dropdown.select_option(label="Option 2")
-    selected_label = await dropdown.input_value()
-
-    # Navigate to checkboxes page
-    await page.goto("https://the-internet.herokuapp.com/checkboxes")
+    # Step 2: Payment Details — type slowly to simulate human input
+    await page.get_by_label("Name On Card").press_sequentially(
+        f"{first_name} {last_name}", delay=80
+    )
+    await page.get_by_label("Card Number").press_sequentially(
+        "4111111111111111", delay=80
+    )
+    await page.get_by_label("Expiry Date").press_sequentially("12/28", delay=80)
+    await page.get_by_label("Cvv").press_sequentially("123", delay=80)
+
+    # Check "Remember Credit Card Details"
+    remember_card = page.get_by_label("Remember Credit Card Details")
+    if not await remember_card.is_checked():
+        await remember_card.check()
+
+    await page.get_by_role("button", name="Next").click()
     await page.wait_for_load_state("load")
 
-    # Work with checkboxes
-    checkboxes = page.locator('input[type="checkbox"]')
-
-    # Check first checkbox if not checked
-    first_checkbox = checkboxes.nth(0)
-    if not await first_checkbox.is_checked():
-        await first_checkbox.check()
-
-    # Uncheck second checkbox if checked
-    second_checkbox = checkboxes.nth(1)
-    if await second_checkbox.is_checked():
-        await second_checkbox.uncheck()
-
-    checkbox1_checked = await first_checkbox.is_checked()
-    checkbox2_checked = await second_checkbox.is_checked()
+    # Step 3: Review order and complete
+    complete_order_btn = page.get_by_role("button", name="Complete Order")
+    await complete_order_btn.wait_for(state="visible")
+    await complete_order_btn.click()
+    await page.wait_for_timeout(3000)
 
     return {
-        "message": "Form interactions completed",
+        "message": "Multi-step form completed successfully",
         "results": {
-            "loginAttempt": {
-                "username": username_value,
-                "result": flash_message.strip() if flash_message else None,
-            },
-            "dropdown": {
-                "selectedByValue": selected_value,
-                "selectedByLabel": selected_label,
+            "shippingAddress": {
+                "firstName": first_name,
+                "lastName": last_name,
+                "addressLine1": address_line1,
+                "addressLine2": "Apt 4B",
+                "city": city,
+                "state": state,
+                "zipCode": zip_code,
+                "country": "United States",
             },
-            "checkboxes": {
-                "first": checkbox1_checked,
-                "second": checkbox2_checked,
+            "paymentDetails": {
+                "nameOnCard": f"{first_name} {last_name}",
+                "cardNumber": "**** **** **** 1111",
+                "expiryDate": "12/28",
             },
         },
     }

typescript-examples/playwright-basics/.parameters/api/07-fill-form/default.json

@@ -1,5 +1,8 @@
 {
   "firstName": "John",
   "lastName": "Doe",
-  "email": "john.doe@example.com"
+  "addressLine1": "123 Main St",
+  "city": "Springfield",
+  "state": "IL",
+  "zipCode": "62701"
 }

typescript-examples/playwright-basics/api/07-fill-form.ts

@@ -3,95 +3,96 @@ import { BrowserContext, Page } from "playwright";
 /**
  * Fill Form
  *
- * Demonstrates form interactions:
- * - Text input fields
- * - Dropdown selects
- * - Checkboxes and radio buttons
+ * Demonstrates multi-step form interactions on a 3-step checkout form:
+ * - Step 1: Shipping address (text inputs, dropdown, checkbox)
+ * - Step 2: Payment details (text inputs, checkbox)
+ * - Step 3: Review and complete order
  */
 
 interface Params {
   firstName: string;
   lastName: string;
-  email: string;
+  addressLine1: string;
+  city: string;
+  state: string;
+  zipCode: string;
 }
 
 export default async function handler(
   params: Params,
   page: Page,
-  context: BrowserContext
+  _context: BrowserContext
 ) {
-  // Using the-internet for reliable form demonstration
-  await page.goto("https://the-internet.herokuapp.com/login");
+  const firstName = params.firstName ?? "John";
+  const lastName = params.lastName ?? "Doe";
+  const addressLine1 = params.addressLine1 ?? "123 Main St";
+  const city = params.city ?? "Springfield";
+  const state = params.state ?? "IL";
+  const zipCode = params.zipCode ?? "62701";
+
+  await page.goto("https://sandbox.intuned.dev/steps-form/ShippingAddress");
   await page.waitForLoadState("load");
 
-  // Fill text inputs using different locator strategies
-  // By ID
-  await page.locator("#username").fill(params.firstName);
-
-  // By name attribute
-  await page.locator('input[name="password"]').fill("SuperSecretPassword!");
-
-  // Get values before any action
-  const usernameValue = await page.locator("#username").inputValue();
-
-  // Click button using text
-  await page.getByRole("button", { name: "Login" }).click();
-
-  // Wait for result
-  await page.waitForLoadState("networkidle");
-
-  // Check if we got an error message (expected since credentials are fake)
-  const flashMessage = await page.locator("#flash").textContent();
-
-  // Navigate to dropdown page for select demonstration
-  await page.goto("https://the-internet.herokuapp.com/dropdown");
-  await page.waitForLoadState("load");
-
-  // Select dropdown option by value
-  const dropdown = page.locator("#dropdown");
-  await dropdown.selectOption("1");
-  const selectedValue = await dropdown.inputValue();
-
-  // Select by label text
-  await dropdown.selectOption({ label: "Option 2" });
-  const selectedLabel = await dropdown.inputValue();
+  // Step 1: Shipping Address — type slowly to simulate human input
+  await page.getByLabel("First Name").pressSequentially(firstName, { delay: 80 });
+  await page.getByLabel("Last Name").pressSequentially(lastName, { delay: 80 });
+  await page.getByLabel("Address Line1").pressSequentially(addressLine1, { delay: 80 });
+  await page.getByLabel("Address Line2").pressSequentially("Apt 4B", { delay: 80 });
+  await page.getByLabel("City").pressSequentially(city, { delay: 80 });
+  await page.getByLabel("State").pressSequentially(state, { delay: 80 });
+  await page.getByLabel("Zip Code").pressSequentially(zipCode, { delay: 80 });
+
+  // Select country from dropdown
+  await page.getByLabel("Country").selectOption({ label: "United States" });
+
+  // Check "Use for future purchase"
+  const useForFuture = page.getByLabel("Use for future purchase.");
+  if (!(await useForFuture.isChecked())) {
+    await useForFuture.check();
+  }
 
-  // Navigate to checkboxes page
-  await page.goto("https://the-internet.herokuapp.com/checkboxes");
+  await page.getByRole("button", { name: "Next" }).click();
   await page.waitForLoadState("load");
 
-  // Work with checkboxes
-  const checkboxes = page.locator('input[type="checkbox"]');
+  // Step 2: Payment Details — type slowly to simulate human input
+  await page.getByLabel("Name On Card").pressSequentially(`${firstName} ${lastName}`, { delay: 80 });
+  await page.getByLabel("Card Number").pressSequentially("4111111111111111", { delay: 80 });
+  await page.getByLabel("Expiry Date").pressSequentially("12/28", { delay: 80 });
+  await page.getByLabel("Cvv").pressSequentially("123", { delay: 80 });
 
-  // Check first checkbox if not checked
-  const firstCheckbox = checkboxes.nth(0);
-  if (!(await firstCheckbox.isChecked())) {
-    await firstCheckbox.check();
+  // Check "Remember Credit Card Details"
+  const rememberCard = page.getByLabel("Remember Credit Card Details");
+  if (!(await rememberCard.isChecked())) {
+    await rememberCard.check();
   }
 
-  // Uncheck second checkbox if checked
-  const secondCheckbox = checkboxes.nth(1);
-  if (await secondCheckbox.isChecked()) {
-    await secondCheckbox.uncheck();
-  }
+  await page.getByRole("button", { name: "Next" }).click();
+  await page.waitForLoadState("load");
 
-  const checkbox1Checked = await firstCheckbox.isChecked();
-  const checkbox2Checked = await secondCheckbox.isChecked();
+  // Step 3: Review order and complete
+  const completeOrderBtn = page.getByRole("button", { name: "Complete Order" });
+  await completeOrderBtn.waitFor({ state: "visible" });
+  await completeOrderBtn.click();
+  await page.waitForLoadState("networkidle");
+  await page.waitForTimeout(3000);
 
   return {
-    message: "Form interactions completed",
+    message: "Multi-step form completed successfully",
     results: {
-      loginAttempt: {
-        username: usernameValue,
-        result: flashMessage?.trim(),
-      },
-      dropdown: {
-        selectedByValue: selectedValue,
-        selectedByLabel: selectedLabel,
+      shippingAddress: {
+        firstName,
+        lastName,
+        addressLine1,
+        addressLine2: "Apt 4B",
+        city,
+        state,
+        zipCode,
+        country: "United States",
       },
-      checkboxes: {
-        first: checkbox1Checked,
-        second: checkbox2Checked,
+      paymentDetails: {
+        nameOnCard: `${firstName} ${lastName}`,
+        cardNumber: "**** **** **** 1111",
+        expiryDate: "12/28",
       },
     },
   };