diff --git a/python-examples/playwright-basics/.parameters/api/07-fill-form/default.json b/python-examples/playwright-basics/.parameters/api/07-fill-form/default.json index 3642d519..17388714 100644 --- a/python-examples/playwright-basics/.parameters/api/07-fill-form/default.json +++ b/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" } diff --git a/python-examples/playwright-basics/api/07-fill-form.py b/python-examples/playwright-basics/api/07-fill-form.py index 94b0680c..1e13a7c0 100644 --- a/python-examples/playwright-basics/api/07-fill-form.py +++ b/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", }, }, } diff --git a/typescript-examples/playwright-basics/.parameters/api/07-fill-form/default.json b/typescript-examples/playwright-basics/.parameters/api/07-fill-form/default.json index 3642d519..17388714 100644 --- a/typescript-examples/playwright-basics/.parameters/api/07-fill-form/default.json +++ b/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" } diff --git a/typescript-examples/playwright-basics/api/07-fill-form.ts b/typescript-examples/playwright-basics/api/07-fill-form.ts index 19c2827d..6b2fc579 100644 --- a/typescript-examples/playwright-basics/api/07-fill-form.ts +++ b/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", }, }, };