function fillForm(page, options): Promise<boolean>

Fills a form on a web page with specified inputs and submits the form. the function handles static data, and can derive data using ai using your input. the function has the ability to detect form submission errors and use ai to recover from these errors.

​
Examples

import { BrowserContext, Locator, Page } from "@intuned/playwright-core";
import { FormInputItem, extendPlaywrightPage } from "@intuned/sdk/playwright";

export interface Input {
    firstName: string;
    lastName: string;
    address1: string;
    address2: string;
    city: string;
    state: string;
    zip: string;
    country: string;
    nameOnCard: string;
    cardNumber: string;
    expiration: string;
    cvv: string;
    saveAddress: boolean;
}

export default async function handler(
    params: Input,
    _playwrightPage: Page,
    context: BrowserContext
) {

    const page = extendPlaywrightPage(_playwrightPage);
    await page.goto("https://demo-site-eta.vercel.app/steps-form/ShippingAddress");

    const fields: FormInputItem[] = [
        {
            fieldSelector: {
                selector: "[name='firstName']",
                type: "css",
            },
            value: { type: "static", value: params.firstName },
            fieldType: "text-input",
        },
        {
            fieldSelector: {
                selector: "[name='lastName']",
                type: "css",
            },
            value: { type: "static", value: params.lastName },
            fieldType: "text-input",
        },
        {
            fieldSelector: {
                selector: "[name='addressLine1']",
                type: "css",
            },
            value: { type: "static", value: params.address1 },
            fieldType: "text-input",
        },
        {
            fieldSelector: {
                selector: "[name='addressLine2']",
                type: "css",
            },
            value: { type: "static", value: params.address2 },
            fieldType: "text-input",
        },
        {
            fieldSelector: {
                selector: "[name='city']",
                type: "css",
            },
            value: { type: "static", value: params.city },
            fieldType: "text-input",
        },
        {
            fieldSelector: {
                selector: "[name='state']",
                type: "css",
            },
            value: { type: "static", value: params.state },
            fieldType: "text-input",
        },
        {
            fieldSelector: {
                selector: "[name='zipCode']",
                type: "css",
            },
            value: { type: "static", value: params.zip },
            fieldType: "text-input",
        },
        {
            fieldSelector: {
                selector: "[name='country']",
                type: "css",
            },
            value: { type: "dynamic", source: { country: params.country } },
            fieldType: "select",
        },
        {
            fieldSelector: {
                selector: "[name='futurePurchase']",
                type: "css",
            },
            fieldType: "checkbox",
            value: { type: "static", value: true },
        },
    ];

    const didFormSucceed = async (locator: Locator): Promise<boolean> => {
        return (await locator.page().locator(".error-message").count()) === 0
    };

    async function formSubmit(locator: Locator) {
        const nextButtonLocator = locator.page().getByRole("button", { name: "Next" });
        await nextButtonLocator.waitFor({ state: "visible" });
        await nextButtonLocator.click();
    }

    await page.fillForm({
        formLocator: page.locator("main"),
        formInput: fields,
        isSubmitSuccessful: didFormSucceed,
        submitForm: formSubmit,
        autoRecoveryOptions: {
            enabled: true,
            recoveryData: params
        }
    });

    return {};
}

​
Parameters

• page: Page

The Playwright Page where the form is located.

• options

• options.autoRecoveryOptions?

Optional. Options for auto-recovery in case of form submission failure.

• options.autoRecoveryOptions.enabled: boolean

Whether auto-recovery is enabled

• options.autoRecoveryOptions.fieldsToMask?: ElementSelector[]

Fields to mask during auto-recovery, use this if you do not want to send your form values to ai.

• options.autoRecoveryOptions.generateDataToUnblockForm?

• options.autoRecoveryOptions.generateDataToUnblockForm.enabled: boolean

Whether generating data to unblock the form is enabled.

• options.autoRecoveryOptions.generateDataToUnblockForm.prompt: string

The prompt to use for generating data.

• options.autoRecoveryOptions.maxRetries?: number

Maximum number of retries for auto-recovery

• options.autoRecoveryOptions.recoveryData: object

Data to use for auto-recovery

• options.fillFieldTimeout?: number

Optional. Timeout for filling each individual field.

• options.formInput: (DynamicFormInputItem | StaticFormInputItem)[]

An array of form input items (dynamic or static).

• options.formLocator: Locator | ElementSelector

The locator for the form element.

• options.isSubmitSuccessful

A function to check if the form submission was successful.

• options.submitForm

A function to submit the form.

• options.timeout?: number

Optional. Timeout for the entire form filling process.

• options.waitTimeBetweenFill?: number

Optional. Wait time between filling each field.

​
Returns

Promise<boolean>

A promise that resolves to a boolean indicating whether the form submission was successful.

extractObjectFromPageUsingSelectorsgoto