Fill and submit multi-step forms

import asyncio
from playwright.async_api import async_playwright

CONNECTION_URL = "wss://browser.zenrows.com?apikey=YOUR_ZENROWS_API_KEY"

async def main():
    async with async_playwright() as p:
        browser = await p.chromium.connect_over_cdp(CONNECTION_URL)
        try:
            page = await browser.contexts[0].new_page()
            await page.goto("https://www.scrapingcourse.com/ecommerce/", wait_until="domcontentloaded")

            # Step 1: search the catalog
            await page.fill("#woocommerce-product-search-field-0", "abominable hoodie")
            await page.press("#woocommerce-product-search-field-0", "Enter")
            await page.wait_for_selector(".variations_form")  # single match opens the product page
            print("Product page:", page.url)

            # Step 2: choose options and quantity
            await page.select_option("#size", "M")
            await page.select_option("#color", "Blue")
            await page.fill("input[name='quantity']", "2")

            # Step 3: submit and verify the result
            await page.click(".single_add_to_cart_button")
            message = page.locator(".woocommerce-message")
            await message.wait_for(state="attached")
            print("Result:", " ".join((await message.text_content()).split()))
            print("Cart:", " ".join((await page.locator(".cart-contents").first.text_content()).split()))
        finally:
            await browser.close()

asyncio.run(main())

import { chromium } from "playwright-core";

const connectionURL = "wss://browser.zenrows.com?apikey=YOUR_ZENROWS_API_KEY";

const browser = await chromium.connectOverCDP(connectionURL);
try {
  const page = await browser.contexts()[0].newPage();
  await page.goto("https://www.scrapingcourse.com/ecommerce/", { waitUntil: "domcontentloaded" });

  // Step 1: search the catalog
  await page.fill("#woocommerce-product-search-field-0", "abominable hoodie");
  await page.press("#woocommerce-product-search-field-0", "Enter");
  await page.waitForSelector(".variations_form"); // single match opens the product page
  console.log("Product page:", page.url());

  // Step 2: choose options and quantity
  await page.selectOption("#size", "M");
  await page.selectOption("#color", "Blue");
  await page.fill("input[name='quantity']", "2");

  // Step 3: submit and verify the result
  await page.click(".single_add_to_cart_button");
  const message = page.locator(".woocommerce-message");
  await message.waitFor({ state: "attached" });
  console.log("Result:", (await message.textContent()).replace(/\s+/g, " ").trim());
  console.log("Cart:", (await page.locator(".cart-contents").first().textContent()).replace(/\s+/g, " ").trim());
} finally {
  await browser.close();
}