Sorry, let me clarify; I meant fewer tool calls.

Here is Chat with Copilot and my motivation. The implementation is Chat with Copilot's, I just included context with files containing browser_type.

Motivation:
Currently, automating the process of filling multiple input fields requires issuing multiple tool calls, which introduces unnecessary overhead. This overhead can lead to increased execution time, higher resource utilization, and more complex code for workflows that involve filling many fields. These limitations can hinder the performance of agents or scripts, especially in scenarios requiring rapid and efficient interaction with web forms or UIs.

By enabling the ability to fill multiple fields simultaneously within a single tool call, the following benefits can be achieved:

Reduced Latency: A single tool call reduces network and processing latency associated with multiple sequential calls.
Improved Resource Efficiency: Simplifying the process minimizes computational overhead and reduces the number of intermediate states to manage.
Scalability: Handling a large number of fields (e.g., 30+ inputs) becomes more practical and less error-prone with fewer calls.
Developer Productivity: This enhancement simplifies implementation, as developers can focus on defining input data in bulk rather than managing multiple discrete operations.
Better Error Recovery: A snapshot or validation step after a single consolidated input operation makes it easier to detect and correct errors compared to handling multiple calls independently.

Example Use Case:
A form with 30 simple inputs can currently require 30 separate tool calls to populate each field. With this enhancement, developers can pass all 30 inputs in a single call, significantly improving efficiency and reducing complexity.

Proposed Implementation:
Extend the Input Schema:
Modify the typeSchema to accept an array of objects where each object represents a field to be filled. This schema will include the element, ref, text, submit, and slowly properties for each field.

Update the handle Function:
The handle function will iterate over the array of fields and generate the corresponding actions and code snippets for each field. This allows filling all fields in one tool call.

Updated browser_type Implementation

const multiTypeSchema = z.array(
  elementSchema.extend({
    text: z.string().describe('Text to type into the element'),
    submit: z.boolean().optional().describe('Whether to submit entered text (press Enter after)'),
    slowly: z.boolean().optional().describe('Whether to type one character at a time. Useful for triggering key handlers in the page. By default entire text is filled in at once.'),
  })
);

const type: Tool = {
  capability: 'core',
  schema: {
    name: 'browser_type',
    description: 'Type text into multiple editable elements on the page in one tool call',
    inputSchema: zodToJsonSchema(multiTypeSchema),
  },

  handle: async (context, params) => {
    const validatedParams = multiTypeSchema.parse(params);
    const snapshot = context.currentTabOrDie().snapshotOrDie();

    const code: string[] = [];
    const steps: (() => Promise<void>)[] = [];

    for (const field of validatedParams) {
      const locator = snapshot.refLocator(field.ref);

      if (field.slowly) {
        code.push(`// Press "${field.text}" sequentially into "${field.element}"`);
        code.push(`await page.${await generateLocator(locator)}.pressSequentially(${javascript.quote(field.text)});`);
        steps.push(() => locator.pressSequentially(field.text));
      } else {
        code.push(`// Fill "${field.text}" into "${field.element}"`);
        code.push(`await page.${await generateLocator(locator)}.fill(${javascript.quote(field.text)});`);
        steps.push(() => locator.fill(field.text));
      }

      if (field.submit) {
        code.push(`// Submit text for "${field.element}"`);
        code.push(`await page.${await generateLocator(locator)}.press('Enter');`);
        steps.push(() => locator.press('Enter'));
      }
    }

    return {
      code,
      action: () => steps.reduce((acc, step) => acc.then(step), Promise.resolve()),
      captureSnapshot: true,
      waitForNetwork: true,
    };
  },
};

Key Changes
Schema Update:
The input schema now accepts an array of field definitions, allowing multiple fields to be processed in one call.

Iterative Handling:
The handle function loops through all fields, generating code and actions for each.

Code Efficiency:
By batching operations, the tool minimizes the number of tool calls, improving performance.

Test Case Addition (core.spec.ts)

it('should type into multiple fields in one call', async () => {
  const params = [
    { element: 'username', ref: 'username-ref', text: 'testuser' },
    { element: 'password', ref: 'password-ref', text: 'password123', submit: true },
  ];

  const result = await type.handle(contextMock, params);

  expect(result.code).toContain('// Fill "testuser" into "username"');
  expect(result.code).toContain('// Fill "password123" into "password"');
  expect(result.code).toContain('// Submit text for "password"');
  await result.action();
});

Documentation Update (README.md)
Add a section to describe the new feature:

browser_type – Fill Multiple Fields
Allows filling multiple input fields in a single tool call, reducing latency and improving efficiency.

Input Schema:

[
  {
    "element": "string",
    "ref": "string",
    "text": "string",
    "submit": "boolean (optional)",
    "slowly": "boolean (optional)"
  }
]

Example:

[
  { "element": "username", "ref": "username-ref", "text": "testuser" },
  { "element": "password", "ref": "password-ref", "text": "password123", "submit": true }
]

Feature request: browser_type - Fill multiple fields at once (or after eachother) #197

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions