Home Chrome Browser
Home / Chrome Browser / Click Element

Click Element

POST
/tools-api/chrome/click-element

Description

Clicks an element in the Chrome browser identified by a CSS selector. This endpoint enables precise interaction with specific elements on a webpage, allowing agents to automate clicking on buttons, links, checkboxes, and other interactive elements.

The endpoint uses Playwright under the hood to locate and click the element specified by the CSS selector. If the element is not immediately visible, the browser will attempt to scroll it into view before clicking.

Important: Chrome must be started with the Open Chrome action first. For best results, use CSS selectors obtained from the Get System Overview action's FocusInfo.CurrentChromeTabMostRelevantElements array, which contains pre-identified interactive elements on the current page.

Request

The request requires a CSS selector that identifies the element to click. 

{
  "Selector": "string"  // CSS selector of the element to click (e.g., "#submit-button", ".login-btn")
}

Request Parameters

Parameter Type Required Description
Selector string Yes The CSS selector that identifies the element to click on the webpage. This can be an ID selector (e.g., "#submit-button"), class selector (e.g., ".login-button"), or any valid CSS selector that uniquely identifies the element.

Response

The response indicates whether the click operation was successful and provides a message with additional details. 

{
  "Success": true,
  "Message": "Successfully clicked element with selector: #submit-button",
  "Timestamp": "2023-09-15T14:30:22.123Z"
}

Response Properties

Property Type Description
Success boolean Indicates whether the click operation was successful. If false, check the Message property for more information about the failure.
Message string A human-readable message describing the result of the operation. For successful operations, this confirms the element was clicked. For failed operations, this provides details about why the operation failed.
Timestamp string (ISO 8601 date) The date and time when the operation was completed.

Code Examples

import requests

def click_chrome_element(api_key, selector):
    """
    Clicks an element in the Chrome browser identified by a CSS selector.
    
    Args:
        api_key (str): Your API key for authentication
        selector (str): CSS selector of the element to click
        
    Returns:
        dict: The response from the API containing success status and message
    """
    url = "http://localhost:54321/tools-api/chrome/click-element"
    headers = {
        "Content-Type": "application/json",
        "Authorization": f"Bearer {api_key}"
    }
    payload = {
        "Selector": selector
    }
    
    response = requests.post(url, headers=headers, json=payload)
    
    if response.status_code == 200:
        return response.json()
    else:
        print(f"Error: {response.status_code}")
        print(response.text)
        return None

# Example usage
api_key = "your_api_key_here"
selector = "#login-button"  # Example selector

result = click_chrome_element(api_key, selector)
if result and result.get("Success"):
    print(f"Successfully clicked element: {result.get('Message')}")
else:
    print(f"Failed to click element: {result.get('Message') if result else 'Request failed'}")
interface ClickElementResponse {
  Success: boolean;
  Message: string;
  Timestamp: string;
}

async function clickChromeElement(apiKey: string, selector: string): Promise {
  const url = 'http://localhost:54321/tools-api/chrome/click-element';
  
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      Selector: selector
    })
  });
  
  if (!response.ok) {
    throw new Error(`Error: ${response.status} - ${response.statusText}`);
  }
  
  return response.json();
}

// Example usage
async function main() {
  try {
    const apiKey = 'your_api_key_here';
    const selector = '.submit-btn';  // Example selector
    
    const result = await clickChromeElement(apiKey, selector);
    
    if (result.Success) {
      console.log(`Click operation successful: ${result.Message}`);
    } else {
      console.error(`Click operation failed: ${result.Message}`);
    }
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

main();
using System;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Text.Json;
using System.Threading.Tasks;

namespace SmoothOperatorClient
{
    public class ActionResponse
    {
        public bool Success { get; set; }
        public string Message { get; set; }
        public DateTime Timestamp { get; set; }
    }

    public class ToolsServerClient
    {
        private readonly HttpClient _client;
        private readonly string _apiKey;

        public ToolsServerClient(string apiKey)
        {
            _apiKey = apiKey;
            _client = new HttpClient
            {
                BaseAddress = new Uri("http://localhost:54321/")
            };
            _client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", _apiKey);
        }

        public async Task ClickChromeElementAsync(string selector)
        {
            var request = new
            {
                Selector = selector
            };

            var content = new StringContent(
                JsonSerializer.Serialize(request),
                Encoding.UTF8,
                "application/json");

            var response = await _client.PostAsync("tools-api/chrome/click-element", content);
            response.EnsureSuccessStatusCode();

            var responseBody = await response.Content.ReadAsStringAsync();
            return JsonSerializer.Deserialize(responseBody);
        }
    }

    class Program
    {
        static async Task Main()
        {
            var client = new ToolsServerClient("your_api_key_here");
            
            try
            {
                // Example - click a login button
                var result = await client.ClickChromeElementAsync("#login-button");
                
                if (result.Success)
                {
                    Console.WriteLine($"Successfully clicked element: {result.Message}");
                }
                else
                {
                    Console.WriteLine($"Failed to click element: {result.Message}");
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine($"An error occurred: {ex.Message}");
            }
        }
    }
}

Usage Notes