pipeline.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {},
   "outputs": [],
   "source": [
    "from playwright.async_api import async_playwright\n",
    "\n",
    "playwright = await async_playwright().start()\n",
    "browser = await playwright.chromium.connect_over_cdp(\"http://localhost:9222\")\n",
    "default_context = browser.contexts[0]\n",
    "\n",
    "# Retrieve the first page in the context.\n",
    "page = default_context.pages[0]\n",
    "page.set_default_timeout(5000)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 31,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'Contact information'"
      ]
     },
     "execution_count": 31,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "await page.title()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 32,
   "metadata": {},
   "outputs": [],
   "source": [
    "# gemini_page = None\n",
    "# for tab in default_context.pages:\n",
    "#     title = await tab.title()\n",
    "#     print(title)\n",
    "#     if 'Google AI' in title:\n",
    "#         gemini_page = tab\n",
    "# if not gemini_page:\n",
    "#     raise Exception('Gemini Page not found')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 36,
   "metadata": {},
   "outputs": [],
   "source": [
    "import requests\n",
    "\n",
    "import re\n",
    "\n",
    "def extract_first_python_code(markdown_text: str):\n",
    "    # Pattern to match the first ```python ``` code block\n",
    "    pattern = r\"```python(.*?)```\"\n",
    "\n",
    "    # Using re.DOTALL to make '.' match also newlines\n",
    "    match = re.search(pattern, markdown_text, re.DOTALL)\n",
    "    if match:\n",
    "        # Return the first matched group, which is the code inside the ```python ```\n",
    "        return match.group(1).strip()\n",
    "    else:\n",
    "        # Return None if no match is found\n",
    "        return None\n",
    "\n",
    "class RemoteActionEngine:\n",
    "    def __init__(self, url) -> None:\n",
    "        self.url = url\n",
    "        \n",
    "    def get_action_ground_truth(self, query: str, html: str) -> str:\n",
    "        data = {\n",
    "            \"query\": query,\n",
    "            \"HTML\": html\n",
    "        }\n",
    "        endpoint = self.url + \"/process_direct\"\n",
    "        response = requests.post(endpoint, json=data)\n",
    "\n",
    "        if response.status_code == 200:\n",
    "            code = extract_first_python_code(response.json())\n",
    "            return code\n",
    "        else:\n",
    "            raise Exception(\"Failed to retrieve data, status code:\", response.status_code)\n",
    "\n",
    "\n",
    "    def get_action(self, query: str, html: str) -> str:\n",
    "        data = {\n",
    "            \"query\": query,\n",
    "            \"HTML\": html\n",
    "        }\n",
    "        url = self.url + \"/process\"\n",
    "        response = requests.post(url, json=data)\n",
    "        \n",
    "        if response.status_code == 200:\n",
    "            response_data = response.json()\n",
    "            code, source_nodes = response_data['code'], response_data['retrieved_nodes']\n",
    "            return code, source_nodes\n",
    "        else:\n",
    "            raise Exception(\"Failed to retrieve data, status code:\", response.status_code)\n",
    "        \n",
    "    def get_nodes(self, query: str, html: str) -> str:\n",
    "        data = {\n",
    "            \"query\": query,\n",
    "            \"HTML\": html\n",
    "        }\n",
    "        url = self.url + \"/get_index\"\n",
    "        response = requests.post(url, json=data)\n",
    "        \n",
    "        if response.status_code == 200:\n",
    "            response_data = response.json()\n",
    "            code, source_nodes = response_data['code'], response_data['retrieved_nodes']\n",
    "            return code, source_nodes\n",
    "        else:\n",
    "            raise Exception(\"Failed to retrieve data, status code:\", response.status_code)\n",
    "        \n",
    "    \n",
    "    def process_fat_node(self, query: str, html: str):\n",
    "        data = {\n",
    "            \"query\": query,\n",
    "            \"HTML\": html\n",
    "        }\n",
    "        url = self.url + \"/process_fat_node\"\n",
    "        response = requests.post(url, json=data)\n",
    "        \n",
    "        if response.status_code == 200:\n",
    "            response_data = response.json()\n",
    "            code, source_nodes, metadata = response_data['code'], response_data['retrieved_nodes'], response_data['metadata']\n",
    "            return code, source_nodes, metadata\n",
    "        else:\n",
    "            raise Exception(\"Failed to retrieve data, status code:\", response.status_code)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 37,
   "metadata": {},
   "outputs": [],
   "source": [
    "url = \"http://127.0.0.1:8000\"\n",
    "remote_action_engine = RemoteActionEngine(url)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 38,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import display, HTML\n",
    "from bs4 import BeautifulSoup\n",
    "\n",
    "def beautify_html(html_string):\n",
    "    # Use BeautifulSoup to prettify the HTML\n",
    "    soup = BeautifulSoup(html_string, 'html.parser')\n",
    "    pretty_html_string = soup.prettify()\n",
    "    return pretty_html_string\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 39,
   "metadata": {},
   "outputs": [],
   "source": [
    "import os\n",
    "from llama_index.llms.azure_openai import AzureOpenAI\n",
    "\n",
    "api_key=os.getenv(\"AZURE_OPENAI_KEY\")\n",
    "api_version=\"2023-05-15\"\n",
    "azure_endpoint = os.getenv(\"AZURE_OPENAI_ENDPOINT\")\n",
    "model = \"gpt-4\"\n",
    "deployment_name = os.getenv(\"AZURE_OPENAI_DEPLOYMENT_NAME\", \"gpt-4-turbo\")\n",
    "\n",
    "class LLM(AzureOpenAI):\n",
    "    def __init__(self):\n",
    "        super().__init__(\n",
    "            model=model,\n",
    "            deployment_name=deployment_name,\n",
    "            api_key=api_key,\n",
    "            azure_endpoint=azure_endpoint,\n",
    "            api_version=api_version,\n",
    "            temperature=0.0\n",
    "        )\n",
    "llm = LLM()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Classification prompt"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 40,
   "metadata": {},
   "outputs": [],
   "source": [
    "CLASSIFICATION_PROMPT = '''\n",
    "Your goal is to assesss if for a given user query and HTML associated, the HTML contains the elements that are required to perform the action specified in the query.\n",
    "\n",
    "To assess it, look at the presence of User-Facing Attributes, text selectors, like text=\"Visible Text\", that could be used to uniquely identify the element requested in the query. \n",
    "You can also use Attributes like aria-label, aria-labelledby, role, etc., to target elements.\n",
    "When user-facing attributes are not available or sufficient, Prefer class names and IDs that are meaningful and unlikely to change. \n",
    "Look at parent-child relationships to narrow down the element, especially when looking for elements within a specific section of the page\n",
    "\n",
    "Answers are provided in two fields, 'Thought', which contains bullet points explaining the though process and 'Identifiable', which is a boolean indicating if the element can be identified based on the query.\n",
    "---\n",
    "\n",
    "HTML:\n",
    "<div class=\"oyXaNc\" jsaction=\"rcuQ6b:vZc4S;O22p3e:zjh6rb;b2trFe:eVidQc;JIbuQc:RgMCxe(YlCLKb);sPvj8e:d3sQLd;TYy3Ne:RgMCxe;\" jscontroller=\"UmOCme\" jsname=\"GCYh9b\">\n",
    " <input jsname=\"DTMEae\" name=\"entry.839337160_sentinel\" type=\"hidden\"/>\n",
    " <form action=\"https://docs.google.com/forms/u/0/d/e/1FAIpQLSfvfEMQPG9rMVH8p_Q_PnkffTIccd1g_VJGWmTpId5zYVhzVg/formResponse\" data-clean-viewform-url=\"https://docs.google.com/forms/d/e/1FAIpQLSfvfEMQPG9rMVH8p_Q_PnkffTIccd1g_VJGWmTpId5zYVhzVg/viewform\" data-dlp-data=\"%.@.null,false]\" data-draft-response='%.@.\"\",1711844705913,1711907458489,null,\"8112371325920032428\",null,[[null,null,[\"31-40\"],false,null,null,839337160],[null,null,[\"+123\"],false,null,null,1166974658],[null,null,[\"Daniel\"],false,null,null,2005620554]]]' data-first-entry=\"0\" data-is-first-page=\"true\" data-last-entry=\"4\" data-response=\"%.@.]\" data-shuffle-seed=\"8112371325920032428\" id=\"mG61Hd\" jsmodel=\"TOfxwf Q91hve CEkLOc\" method=\"POST\" target=\"_self\">\n",
    "  <div jsaction=\"rcuQ6b:rcuQ6b;UxRBlf:rcuQ6b;\" jscontroller=\"yUS4Lc\">\n",
    "   <div jsname=\"o6bZLc\">\n",
    "    <input name=\"entry.839337160\" type=\"hidden\" value=\"31-40\"/>\n",
    "    <input name=\"entry.1166974658\" type=\"hidden\" value=\"+123\"/>\n",
    "    <input name=\"entry.2005620554\" type=\"hidden\" value=\"Daniel\"/>\n",
    "    <input name=\"entry.1343513443\" type=\"hidden\" value=\"\"/>\n",
    "    <input name=\"dlut\" type=\"hidden\" value=\"1711907458489\"/>\n",
    "   </div>\n",
    "  </div>\n",
    "  <div class=\"o3Dpx\" role=\"list\">\n",
    "   <div class=\"Qr7Oae\" role=\"listitem\">\n",
    "    <div data-params='%.@.[1633920210,\"Name\",\"This is where you fill name\",0,[[2005620554,null,true,null,null,null,null,null,null,null,[]]],null,null,null,null,null,null,[null,\"Name\"],[null,\"This is where you fill name\"]],\"i1\",\"i2\",\"i3\",false]' jsmodel=\"CP1oW\">\n",
    "     <div class=\"geS5n\" jsaction=\"EEvAHc:yfX9oc;\" jscontroller=\"sWGJ4b\" jsname=\"WsjYwc\">\n",
    "      <div class=\"z12JJ\">\n",
    "       <div class=\"M4DNQ\">\n",
    "        <div aria-describedby=\"i4\" aria-level=\"3\" class=\"HoXoMd D1wxyf RjsPE\" id=\"i1\" role=\"heading\">\n",
    "         <span class=\"M7eMe\">\n",
    "          Name\n",
    "         </span>\n",
    "         <span aria-label=\"Required question\" class=\"vnumgf\" id=\"i4\">\n",
    "          *\n",
    "         </span>\n",
    "        </div>\n",
    "        <div class=\"gubaDc OIC90c RjsPE\" id=\"i2\">\n",
    "         This is where you fill name\n",
    "        </div>\n",
    "       </div>\n",
    "      </div>\n",
    "      <div class=\"AgroKb\" jsaction=\"rcuQ6b:vZc4S;O22p3e:zjh6rb;b2trFe:eVidQc;sPvj8e:d3sQLd;AHmuwe:h06R8;\" jscontroller=\"oCiKKc\">\n",
    "       <div class=\"rFrNMe k3kHxc RdH0ib yqQS1 zKHdkd CDELXb\" jsaction=\"clickonly:KjsqPd; focus:Jt1EX; blur:fpfTEe; input:Lg5SV\" jscontroller=\"pxq3x\" jsname=\"YPqjbf\" jsshadow=\"\">\n",
    "        <div class=\"aCsJod oJeWuf\">\n",
    "         <div class=\"aXBtI Wic03c\">\n",
    "          <div class=\"Xb9hP\">\n",
    "           <input aria-describedby=\"i2 i3\" aria-disabled=\"false\" aria-labelledby=\"i1\" autocomplete=\"off\" badinput=\"false\" class=\"whsOnd zHQkBf\" data-initial-dir=\"auto\" data-initial-value=\"Daniel\" dir=\"auto\" jsname=\"YPqjbf\" required=\"\" tabindex=\"0\" type=\"text\"/>\n",
    "           <div aria-hidden=\"true\" class=\"ndJi5d snByac\" jsname=\"LwH6nd\">\n",
    "            Your answer\n",
    "           </div>\n",
    "          </div>\n",
    "          <div class=\"i9lrp mIZh1c\">\n",
    "          </div>\n",
    "          <div class=\"OabDMe cXrdqd\" jsname=\"XmnwAc\">\n",
    "          </div>\n",
    "         </div>\n",
    "        </div>\n",
    "        <div class=\"LXRPh\">\n",
    "         <div class=\"ovnfwe Is7Fhb\" jsname=\"ty6ygf\">\n",
    "         </div>\n",
    "        </div>\n",
    "       </div>\n",
    "      </div>\n",
    "      <div class=\"SL4Sz\" id=\"i3\" jsname=\"Rfh2Tc\" role=\"alert\">\n",
    "      </div>\n",
    "     </div>\n",
    "    </div>\n",
    "   </div>\n",
    "  </div>\n",
    " </form>\n",
    "</div>\n",
    "\n",
    "Query: Select the input with placeholder 'Your answer' below 'Name', then type 'Daniel'\n",
    "Thought: \n",
    "- First we need to identify the input field with the placeholder 'Your answer' that is below the 'Name' label.\t\n",
    "- We can use the aria-labelledby attribute to find the input field associated with the 'Name' label.\n",
    "- The 'Name' label has an id of \"i1\", so we can use that to find the input field.\n",
    "Identifiable: Yes\n",
    "\n",
    "---\n",
    "\n",
    "HTML:\n",
    "iv class=\"Jwjdfe\"><div class=\"dMALK\" jsname=\"YlCLKb\"><div role=\"button\" class=\"uArJ5e UQuaGc kCyAyd\" jscontroller=\"VXdfxd\" jsaction=\"click:cOuCgd; mousedown:UX7yZ; mouseup:lbsD7e; mouseenter:tfO1Yc; mouseleave:JywGue;touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc(preventDefault=true); touchcancel:JMtRjd;focus:AHmuwe; blur:O22p3e; contextmenu:mg9Pef;\" jsshadow=\"\" tabindex=\"0\"><div class=\"Fvio9d MbhUzd\" jsname=\"ksKsZd\"></div><div class=\"e19J0b CeoRYc\"></div><span jsslot=\"\" class=\"l4V7wb Fxmcue\"><span class=\"NPEfkd RveJvd snByac\">Clear selection</span></span></div></div></div></div><d\n",
    "iv jsmodel=\"CP1oW\" data-params=\"%.@.[1846923513,&quot;Age&quot;,null,2,[[839337160,[[&quot;18-24&quot;,null,null,null,false],[&quot;25-30&quot;,null,null,null,false],[&quot;31-40&quot;,null,null,null,false],[&quot;41-50&quot;,null,null,null,false],[&quot;51&quot;,null,null,null,false],[&quot;&quot;,null,null,null,true]],false,null,null,null,null,null,false,null,[]]],null,null,null,null,null,null,[null,&quot;Age&quot;]],&quot;i9&quot;,&quot;i10&quot;,&quot;i11&quot;,false]\"><d\n",
    "iv jscontroller=\"sWGJ4b\" jsaction=\"EEvAHc:yfX9oc;\" jsname=\"WsjYwc\" class=\"geS5n\"><div class=\"z12JJ\"><div class=\"M4DNQ\"><div id=\"i9\" class=\"HoXoMd D1wxyf RjsPE\" role=\"heading\" aria-level=\"3\"><span class=\"M7eMe\">Age</span></div><div class=\"gubaDc OIC90c RjsPE\" id=\"i10\"></div></div></div><d\n",
    "iv jsmodel=\"CP1oW\" data-params=\"%.@.[1846923513,&quot;Age&quot;,null,2,[[839337160,[[&quot;18-24&quot;,null,null,null,false],[&quot;25-30&quot;,null,null,null,false],[&quot;31-40&quot;,null,null,null,false],[&quot;41-50&quot;,null,null,null,false],[&quot;51&quot;,null,null,null,false],[&quot;&quot;,null,null,null,true]],false,null,null,null,null,null,false,null,[]]],null,null,null,null,null,null,[null,&quot;Age&quot;]],&quot;i9&quot;,&quot;i10&quot;,&quot;i11&quot;,false]\"><d\n",
    "iv jscontroller=\"sWGJ4b\" jsaction=\"EEvAHc:yfX9oc;\" jsname=\"WsjYwc\" class=\"geS5n\"><div class=\"z12JJ\"><div class=\"M4DNQ\"><div id=\"i9\" class=\"HoXoMd D1wxyf RjsPE\" role=\"heading\" aria-level=\"3\"><span class=\"M7eMe\">Age</span></div><div class=\"gubaDc OIC90c RjsPE\" id=\"i10\"></div></div></div><d\n",
    "\n",
    "Query: \"Select the radio button with label 'Other' under the 'Age' section, then type '16'\"\n",
    "Thought:\n",
    "- The query asks to select a radio button with the label 'Other' under the 'Age' section and then type '16'.\n",
    "- The provided HTML snippet shows a structure that seems to be part of a form, but the snippet is incomplete and improperly formatted (e.g., \"iv\" instead of \"div\" at the beginning).\n",
    "- There is no visible radio button or input field with the label 'Other' in the provided HTML snippet.\n",
    "- The 'Age' section is identified with an id of \"i9\", but there are no radio buttons or options listed in the snippet.\n",
    "- The action of typing '16' suggests that there should be a text input field associated with the 'Other' radio button, but this is not present in the snippet.\n",
    "- Without the complete and properly formatted HTML, it is not possible to determine if the 'Other' radio button exists or where to type '16'.\n",
    "\n",
    "Identifiable: No\n",
    "\n",
    "HTML:\n",
    "{context_str}\n",
    "Query: {query_str}\n",
    "Thought:\n",
    "Identifiable: \n",
    "'''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 41,
   "metadata": {},
   "outputs": [],
   "source": [
    "DEFAULT_PLAYWRIGHT_PROMPT = '''\n",
    "Your goal is to write Playwright Python code to answer queries.\n",
    "\n",
    "Your answer must be a Python markdown only.\n",
    "\n",
    "Prefer User-Facing Attributes, Use text selectors, like text=\"Visible Text\", to target elements by their visible text. \n",
    "You can also use Attributes like aria-label, aria-labelledby, role, etc., to target elements.\n",
    "When user-facing attributes are not available or sufficient, Prefer class names and IDs that are meaningful and unlikely to change. \n",
    "Avoid using automatically generated, framework-specific, or obfuscated classes.\n",
    "Utilize parent-child relationships to narrow down the element, especially when looking for elements within a specific section of the page\n",
    "\n",
    "You can assume the following code has been executed:\n",
    "```python\n",
    "from playwright.async_api import async_playwright\n",
    "\n",
    "playwright = await async_playwright().start()\n",
    "browser = await playwright.chromium.connect_over_cdp(\"http://localhost:9222\")\n",
    "default_context = browser.contexts[0]\n",
    "\n",
    "# Retrieve the first page in the context.\n",
    "page = default_context.pages[0]\n",
    "```\n",
    "\n",
    "---\n",
    "\n",
    "HTML:\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "<head>\n",
    "    <title>Mock Search Page</title>\n",
    "</head>\n",
    "<body>\n",
    "    <h1>Search Page Example</h1>\n",
    "    <input id=\"searchBar\" type=\"text\" placeholder=\"Type here to search...\">\n",
    "    <button id=\"searchButton\">Search</button>\n",
    "    <script>\n",
    "        document.getElementById('searchButton').onclick = function() {{\n",
    "            var searchText = document.getElementById('searchBar').value;\n",
    "            alert(\"Searching for: \" + searchText);\n",
    "        }};\n",
    "    </script>\n",
    "</body>\n",
    "</html>\n",
    "\n",
    "Query: Click on the search bar 'Type here to search...', type 'selenium', and press the 'Enter' key\n",
    "\n",
    "Completion:\n",
    "```python\n",
    "# Let's proceed step by step.\n",
    "# First we need to identify the component first, then we can click on it.\n",
    "\n",
    "# Based on the HTML, the link can be uniquely identified using the ID \"searchBar\"\n",
    "# Click on the search bar\n",
    "search_bar = page.locator('#searchBar')\n",
    "search_bar.click()\n",
    "\n",
    "# Type 'selenium' into the search bar\n",
    "await page.type('#searchBar', 'selenium')\n",
    "\n",
    "# Press the 'Enter' key\n",
    "await page.keyboard.press('Enter')\n",
    "\n",
    "```\n",
    "\n",
    "---\n",
    "\n",
    "HTML:\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "<head>\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <title>Mock Page for Selenium</title>\n",
    "</head>\n",
    "<body>\n",
    "    <h1>Welcome to the Mock Page</h1>\n",
    "    <div id=\"links\">\n",
    "        <a href=\"#link1\" id=\"link1\">Link 1</a>\n",
    "        <br>\n",
    "        <a href=\"#link2\" class=\"link\">Link 2</a>\n",
    "        <br>\n",
    "    </div>\n",
    "</body>\n",
    "</html>\n",
    "\n",
    "Query: Click on the title Link 1 and then click on the title Link 2\n",
    "\n",
    "Completion:\n",
    "```python\n",
    "# Let's proceed step by step.\n",
    "# First we need to identify the first component, then we can click on it. Then we can identify the second component and click on it.\n",
    "\n",
    "# Based on the HTML, the first link the link can be uniquely identified using the ID \"link1\"\n",
    "# Let's use this ID with playwright to identify the link\n",
    "link1 = page.locator('#link1')\n",
    "\n",
    "# Then we click on the link\n",
    "await link1.click()\n",
    "\n",
    "# The other link can be uniquely identified using the class \"link\"\n",
    "# Let's use this class to identify the link\n",
    "link2 = page.locator('.link')\n",
    "\n",
    "# Click on the element found\n",
    "await link2.click()\n",
    "```\n",
    "\n",
    "---\n",
    "\n",
    "HTML:\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "<head>\n",
    "    <title>Mock Page</title>\n",
    "</head>\n",
    "<body>\n",
    "    <p id=\"para1\">This is the first paragraph.</p>\n",
    "    <p id=\"para2\">This is the second paragraph.</p>\n",
    "    <p id=\"para3\">This is the third paragraph, which we will select and copy.</p>\n",
    "    <p id=\"para4\">This is the fourth paragraph.</p>\n",
    "</body>\n",
    "</html>\n",
    "\n",
    "Query: Select the text inside the third paragraph\n",
    "\n",
    "Completion:\n",
    "```python\n",
    "# Let's proceed step by step.\n",
    "\n",
    "# Select the third paragraph element\n",
    "third_paragraph = page.locator(\"(//p)[3]\")\n",
    "# Get the text inside the third paragraph\n",
    "text = third_paragraph.inner_text()\n",
    "```\n",
    "\n",
    "---\n",
    "\n",
    "HTML:\n",
    "\n",
    "Query: Scroll up a bit\n",
    "\n",
    "Completion:\n",
    "```python\n",
    "# Let's proceed step by step.\n",
    "# We don't need to use the HTML data as this is a stateless operation.\n",
    "# 200 pixels should be sufficient. Let's execute the JavaScript to scroll up.\n",
    "\n",
    "await page.evaluate(\"window.scrollBy(0, 200)\")\n",
    "```\n",
    "\n",
    "---\n",
    "\n",
    "---\n",
    "\n",
    "HTML:\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "<head>\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <title>Enhanced Mock Page for Selenium Testing</title>\n",
    "</head>\n",
    "<body>\n",
    "    <h1>Enhanced Test Page for Selenium</h1>\n",
    "    <div class=\"container\">\n",
    "        <button id=\"firstButton\" onclick=\"alert('First button clicked!');\">First Button</button>\n",
    "        <!-- This is the button we're targeting with the class name \"action-btn\" -->\n",
    "        <button class=\"action-btn\" onclick=\"alert('Action button clicked!');\">Action Button</button>\n",
    "        <div class=\"nested-container\">\n",
    "            <button id=\"testButton\" onclick=\"alert('Test Button clicked!');\">Test Button</button>\n",
    "        </div>\n",
    "        <button class=\"hidden\" onclick=\"alert('Hidden button clicked!');\">Hidden Button</button>\n",
    "    </div>\n",
    "</body>\n",
    "</html>\n",
    "\n",
    "\n",
    "Query: Click on the Button 'Action Button'\n",
    "\n",
    "Completion:\n",
    "```python\n",
    "# Let's proceed step by step.\n",
    "# First we need to identify the button first, then we can click on it.\n",
    "\n",
    "# Based on the HTML provided, we need to devise the best strategy to select the button.\n",
    "# The action button can be identified using the class name \"action-btn\"\n",
    "action_button = page.locator('.action-btn')\n",
    "\n",
    "# Then we can click on it\n",
    "await action_button.click()\n",
    "```\n",
    "\n",
    "---\n",
    "\n",
    "HTML:\n",
    "{context_str}\n",
    "Query: {query_str}\n",
    "Completion:\n",
    "'''"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Get the prompt"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 42,
   "metadata": {},
   "outputs": [],
   "source": [
    "# from IPython.core.magic import register_line_magic, needs_local_scope\n",
    "# import pyperclip\n",
    "# import asyncio\n",
    "\n",
    "# @register_line_magic\n",
    "# @needs_local_scope\n",
    "# def execute(line, local_ns=None):\n",
    "#     # Your async function adapted for magic command\n",
    "#     async def async_execute(line):\n",
    "#         # Assuming 'page' is available in the local namespace\n",
    "#         await gemini_page.goto(\"https://aistudio.google.com/app/prompts/new_chat\")\n",
    "        \n",
    "#         input_bar = gemini_page.locator('[placeholder=\"Type something\"]')\n",
    "        \n",
    "#         # Click on the input bar\n",
    "#         await input_bar.click()\n",
    "\n",
    "#         # Type the line into the input bar\n",
    "#         await input_bar.type(line)\n",
    "        \n",
    "#         # Press Enter\n",
    "#         await asyncio.sleep(1.5)                \n",
    "        \n",
    "#         await input_bar.press('Enter')\n",
    "        \n",
    "#         copy_to_clipboard_button = gemini_page.locator('button[mattooltip=\"Copy to clipboard\"]')\n",
    "\n",
    "#         # Then we can click on it\n",
    "#         await copy_to_clipboard_button.click()\n",
    "#         clip = pyperclip.paste()\n",
    "#         print(clip)\n",
    "    \n",
    "#     # Run the async function using asyncio\n",
    "#     loop = asyncio.get_event_loop()\n",
    "#     if loop.is_running():  # For Jupyter notebooks, the loop is usually already running\n",
    "#         task = loop.create_task(async_execute(line))\n",
    "#         # Note: In Jupyter, you can't wait for the task directly as it blocks the notebook.\n",
    "#         # You could potentially use widgets or other mechanisms to track completion.\n",
    "#     else:\n",
    "#         # This is for completeness and general knowledge. In practice, Jupyter's loop is always running.\n",
    "#         loop.run_until_complete(async_execute(line))\n",
    "        \n",
    "# async def async_execute():\n",
    "#     # Assuming 'page' is available in the local namespace\n",
    "#     await gemini_page.goto(\"https://aistudio.google.com/app/prompts/new_chat\")\n",
    "    \n",
    "#     input_bar = gemini_page.locator('[placeholder=\"Type something\"]')\n",
    "    \n",
    "#     # Click on the input bar\n",
    "    \n",
    "#     await input_bar.press('Control+V')\n",
    "\n",
    "#     # Type the line into the input bar\n",
    "    \n",
    "#     # Press Enter\n",
    "#     await asyncio.sleep(1.5)                \n",
    "    \n",
    "#     await input_bar.press('Enter')\n",
    "    \n",
    "#     await gemini_page.locator('button[mattooltip=\"Copy to clipboard\"]').first.click()\n",
    "#     clip = pyperclip.paste()\n",
    "#     return clip\n",
    "\n",
    "# query = \"Write a hello world program in Python\"\n",
    "# pyperclip.copy(query)\n",
    "# loop = asyncio.get_event_loop()\n",
    "# task = await loop.create_task(async_execute())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 43,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "\n",
    "# code, source_nodes = remote_action_engine.get_nodes(query, html)\n",
    "# context_str = source_nodes[0]\n",
    "# prompt = DEFAULT_PLAYWRIGHT_PROMPT.format(context_str=beautify_html(context_str), query_str=query)\n",
    "# pyperclip.copy(prompt)\n",
    "# loop = asyncio.get_event_loop()\n",
    "# code = await loop.create_task(async_execute())"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Carousel"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 44,
   "metadata": {},
   "outputs": [],
   "source": [
    "# from IPython.display import display, HTML, Javascript\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "# total_nodes = \"\"\n",
    "# for node in source_nodes:\n",
    "#     html_code = beautify_html(node)\n",
    "#     # print(html_code)\n",
    "#     # print(\"-\"*80)\n",
    "\n",
    "#     escaped_html = html_code.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;')\n",
    "\n",
    "#     # Now create a HTML format to display as \"Markdown\" within an HTML block\n",
    "#     # We use the <pre> and <code> tags for proper formatting\n",
    "#     display_html = f'<pre><code>{escaped_html}</code></pre>'\n",
    "#     line = f\"\"\"<div class=\"carousel-item\" style=\"min-width: 200px; height: 500px; background-color: #f99; text-align: center; line-height: 100px;\">{display_html}</div>\"\"\"\n",
    "#     total_nodes += line\n",
    "\n",
    "# carousel_html = f\"\"\"\n",
    "# <div style=\"width: 200px; overflow: hidden; margin: 0 auto;\">\n",
    "#   <div id=\"carouselExample\" class=\"carousel\" style=\"display: flex; overflow-y: hidden; scroll-behavior: smooth;\">\n",
    "#     {total_nodes}\n",
    "#   </div>\n",
    "#   <button onclick=\"scrollCarousel(-200)\" style=\"position: absolute; top: 50%; left: 0; transform: translateY(-50%);\">&#10094;</button>\n",
    "# <button onclick=\"scrollCarousel(200)\" style=\"position: absolute; top: 50%; right: 0; transform: translateY(-50%);\">&#10095;</button>\n",
    "# </div>\n",
    "# \"\"\"\n",
    "\n",
    "# display(HTML(carousel_html))\n",
    "\n",
    "# javascript = \"\"\"\n",
    "# <script type=\"text/Javascript\">\n",
    "#   function scrollCarousel(offset) {\n",
    "#     var container = document.getElementById('carouselExample');\n",
    "#     container.scrollLeft += offset;\n",
    "#   }\n",
    "# </script>\n",
    "# \"\"\"\n",
    "\n",
    "# display(HTML(javascript))\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Google form"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Get identification result"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 29,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Thought:\n",
      "- The query asks to select a radio button with the label 'Other' under the 'Age' section and then type '16'.\n",
      "- The provided HTML does not show any radio buttons or an input field where text such as '16' could be entered.\n",
      "- The 'Age' section is identified by the role=\"heading\" and aria-level=\"3\" with the id \"i9\", but there are no radio buttons or 'Other' label visible in the HTML snippet.\n",
      "- There is no element with a placeholder or text that indicates an option for 'Other' or a field to enter a number like '16'.\n",
      "- Without the appropriate input elements, the action specified in the query cannot be performed based on the given HTML.\n",
      "\n",
      "Identifiable: No\n"
     ]
    }
   ],
   "source": [
    "context_str = \"\\n\".join(source_nodes)\n",
    "\n",
    "prompt = CLASSIFICATION_PROMPT.format(query_str=instruction, context_str=context_str)\n",
    "output = llm.complete(prompt).text\n",
    "\n",
    "print(output)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 40,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<input type=\"text\" class=\"whsOnd zHQkBf\" jsname=\"YPqjbf\" autocomplete=\"off\" tabindex=\"0\" aria-labelledby=\"i1\" aria-describedby=\"i2 i3\" aria-disabled=\"false\" required=\"\" dir=\"auto\" data-initial-dir=\"auto\" data-initial-value=\"Daniel\" badinput=\"false\">\n"
     ]
    }
   ],
   "source": [
    "input_field = page.locator('input[aria-labelledby=\"i1\"]')\n",
    "\n",
    "# Click on the inpu\n",
    "outer_html = await input_field.evaluate(\"el => el.outerHTML\") \n",
    "print(outer_html)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Thought:\n",
      "- The query asks to select an input field with the placeholder 'Your answer' that is located below the 'Name' section and then type 'Daniel'.\n",
      "- The 'Name' section is identified with an id of \"i1\", and the description for where to fill the name is identified with an id of \"i2\".\n",
      "- The input field associated with the 'Name' section can be identified by the aria-labelledby attribute that references \"i1\" and the aria-describedby attribute that references \"i2\".\n",
      "- The placeholder 'Your answer' is found within a div with the class \"ndJi5d snByac\" that is aria-hidden, which means it is meant for visual representation rather than being an actual placeholder attribute in the input field.\n",
      "- The input field itself does not have a placeholder attribute, but the visual representation of the placeholder is present, which matches the user's query.\n",
      "\n",
      "Identifiable: Yes\n",
      "Thought:\n",
      "- The task is to find an input field with the placeholder 'Your answer' that is located below the 'Phone number' label.\n",
      "- The 'Phone number' label is identified with an id of \"i5\".\n",
      "- The input field associated with the 'Phone number' label should have an aria-labelledby attribute referencing \"i5\".\n",
      "- The placeholder 'Your answer' is indicated by the presence of a div with the class \"ndJi5d snByac\" and jsname=\"LwH6nd\" that is visually hidden but can be used to identify the placeholder text.\n",
      "- The input field for the phone number is expected to be of type \"text\" and should be located within the same container as the label and placeholder elements.\n",
      "\n",
      "Identifiable: Yes\n",
      "\n",
      "The input field can be identified using the following attributes:\n",
      "- The input field is within the same container as the 'Phone number' label with id \"i5\".\n",
      "- The placeholder 'Your answer' is represented by a div with jsname=\"LwH6nd\".\n",
      "- The input field has an aria-labelledby attribute that should reference \"i5\" and an aria-describedby attribute that could reference the placeholder's jsname.\n",
      "\n",
      "The HTML snippet should contain an input element similar to this:\n",
      "```html\n",
      "<input type=\"text\" class=\"whsOnd zHQkBf\" jsname=\"YPqjbf\" autocomplete=\"off\" tabindex=\"0\" aria-labelledby=\"i5\" aria-describedby=\"i6 i7\" aria-disabled=\"false\" required=\"\" dir=\"auto\" data-initial-dir=\"auto\" data-initial-value=\"\">\n",
      "<div jsname=\"LwH6nd\" class=\"ndJi5d snByac\" aria-hidden=\"true\">Your answer</div>\n",
      "```\n",
      "The input field is identifiable by the class \"whsOnd zHQkBf\" and the jsname \"YPqjbf\", and it is associated with the 'Phone number' section through the aria-labelledby attribute. The placeholder text is indicated by the div with jsname \"LwH6nd\".\n",
      "Thought:\n",
      "- The query asks to select a radio button with the label 'Other' under the 'Age' section and then type '16'.\n",
      "- The provided HTML snippet includes a section with the heading 'Age', identified by the id \"i9\".\n",
      "- The radio buttons for the 'Age' section are present, with labels such as '18-24' and '25-30'.\n",
      "- However, there is no radio button with the label 'Other' visible in the provided HTML snippet.\n",
      "- Additionally, there is no text input field associated with the 'Age' section where one could type '16'.\n",
      "- The action of typing '16' suggests that there should be a text input field associated with the 'Other' radio button, but this is not present in the snippet.\n",
      "- Without a radio button labeled 'Other' or a text input field to type '16', the HTML does not contain the required elements to perform the action specified in the query.\n",
      "\n",
      "Identifiable: No\n"
     ]
    }
   ],
   "source": [
    "for output in outputs:\n",
    "    print(output)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[\"Select the input with placeholder 'Your answer' below 'Name', then type 'Daniel'\",\n",
       " \"Select the input placeholder 'Your answer' below 'Phone number', then type '+123'\",\n",
       " \"Select the radio button with label 'Other' under the 'Age' section, then type '16'\"]"
      ]
     },
     "execution_count": 26,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "instructions"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 56,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "  0%|          | 0/3 [00:00<?, ?it/s]"
     ]
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Code generated:\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<style>pre { line-height: 125%; }\n",
       "td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }\n",
       "span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }\n",
       "td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }\n",
       "span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }\n",
       ".output_html .hll { background-color: #ffffcc }\n",
       ".output_html { background: #f8f8f8; }\n",
       ".output_html .c { color: #3D7B7B; font-style: italic } /* Comment */\n",
       ".output_html .err { border: 1px solid #FF0000 } /* Error */\n",
       ".output_html .k { color: #008000; font-weight: bold } /* Keyword */\n",
       ".output_html .o { color: #666666 } /* Operator */\n",
       ".output_html .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */\n",
       ".output_html .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */\n",
       ".output_html .cp { color: #9C6500 } /* Comment.Preproc */\n",
       ".output_html .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */\n",
       ".output_html .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */\n",
       ".output_html .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */\n",
       ".output_html .gd { color: #A00000 } /* Generic.Deleted */\n",
       ".output_html .ge { font-style: italic } /* Generic.Emph */\n",
       ".output_html .gr { color: #E40000 } /* Generic.Error */\n",
       ".output_html .gh { color: #000080; font-weight: bold } /* Generic.Heading */\n",
       ".output_html .gi { color: #008400 } /* Generic.Inserted */\n",
       ".output_html .go { color: #717171 } /* Generic.Output */\n",
       ".output_html .gp { color: #000080; font-weight: bold } /* Generic.Prompt */\n",
       ".output_html .gs { font-weight: bold } /* Generic.Strong */\n",
       ".output_html .gu { color: #800080; font-weight: bold } /* Generic.Subheading */\n",
       ".output_html .gt { color: #0044DD } /* Generic.Traceback */\n",
       ".output_html .kc { color: #008000; font-weight: bold } /* Keyword.Constant */\n",
       ".output_html .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */\n",
       ".output_html .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */\n",
       ".output_html .kp { color: #008000 } /* Keyword.Pseudo */\n",
       ".output_html .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */\n",
       ".output_html .kt { color: #B00040 } /* Keyword.Type */\n",
       ".output_html .m { color: #666666 } /* Literal.Number */\n",
       ".output_html .s { color: #BA2121 } /* Literal.String */\n",
       ".output_html .na { color: #687822 } /* Name.Attribute */\n",
       ".output_html .nb { color: #008000 } /* Name.Builtin */\n",
       ".output_html .nc { color: #0000FF; font-weight: bold } /* Name.Class */\n",
       ".output_html .no { color: #880000 } /* Name.Constant */\n",
       ".output_html .nd { color: #AA22FF } /* Name.Decorator */\n",
       ".output_html .ni { color: #717171; font-weight: bold } /* Name.Entity */\n",
       ".output_html .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */\n",
       ".output_html .nf { color: #0000FF } /* Name.Function */\n",
       ".output_html .nl { color: #767600 } /* Name.Label */\n",
       ".output_html .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */\n",
       ".output_html .nt { color: #008000; font-weight: bold } /* Name.Tag */\n",
       ".output_html .nv { color: #19177C } /* Name.Variable */\n",
       ".output_html .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */\n",
       ".output_html .w { color: #bbbbbb } /* Text.Whitespace */\n",
       ".output_html .mb { color: #666666 } /* Literal.Number.Bin */\n",
       ".output_html .mf { color: #666666 } /* Literal.Number.Float */\n",
       ".output_html .mh { color: #666666 } /* Literal.Number.Hex */\n",
       ".output_html .mi { color: #666666 } /* Literal.Number.Integer */\n",
       ".output_html .mo { color: #666666 } /* Literal.Number.Oct */\n",
       ".output_html .sa { color: #BA2121 } /* Literal.String.Affix */\n",
       ".output_html .sb { color: #BA2121 } /* Literal.String.Backtick */\n",
       ".output_html .sc { color: #BA2121 } /* Literal.String.Char */\n",
       ".output_html .dl { color: #BA2121 } /* Literal.String.Delimiter */\n",
       ".output_html .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */\n",
       ".output_html .s2 { color: #BA2121 } /* Literal.String.Double */\n",
       ".output_html .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */\n",
       ".output_html .sh { color: #BA2121 } /* Literal.String.Heredoc */\n",
       ".output_html .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */\n",
       ".output_html .sx { color: #008000 } /* Literal.String.Other */\n",
       ".output_html .sr { color: #A45A77 } /* Literal.String.Regex */\n",
       ".output_html .s1 { color: #BA2121 } /* Literal.String.Single */\n",
       ".output_html .ss { color: #19177C } /* Literal.String.Symbol */\n",
       ".output_html .bp { color: #008000 } /* Name.Builtin.Pseudo */\n",
       ".output_html .fm { color: #0000FF } /* Name.Function.Magic */\n",
       ".output_html .vc { color: #19177C } /* Name.Variable.Class */\n",
       ".output_html .vg { color: #19177C } /* Name.Variable.Global */\n",
       ".output_html .vi { color: #19177C } /* Name.Variable.Instance */\n",
       ".output_html .vm { color: #19177C } /* Name.Variable.Magic */\n",
       ".output_html .il { color: #666666 } /* Literal.Number.Integer.Long */</style><div class=\"highlight\"><pre><span></span><span class=\"k\">async</span> <span class=\"k\">def</span> <span class=\"nf\">test_func</span><span class=\"p\">():</span>\n",
       "\t<span class=\"c1\"># Let&#39;s proceed step by step.</span>\n",
       "\t<span class=\"c1\"># First we need to identify the input field below the &#39;Name&#39; label, then we can type into it.</span>\n",
       "\t\n",
       "\t<span class=\"c1\"># Based on the HTML provided, we can use the aria-labelledby attribute to find the input field associated with the &#39;Name&#39; label.</span>\n",
       "\t<span class=\"c1\"># The &#39;Name&#39; label has an id of &quot;i1&quot;, so we can use that to find the input field.</span>\n",
       "\t<span class=\"n\">name_input</span> <span class=\"o\">=</span> <span class=\"n\">page</span><span class=\"o\">.</span><span class=\"n\">locator</span><span class=\"p\">(</span><span class=\"s1\">&#39;input[aria-labelledby=&quot;i1&quot;]&#39;</span><span class=\"p\">)</span>\n",
       "\t\n",
       "\t<span class=\"c1\"># Click on the input field to focus on it before typing</span>\n",
       "\t<span class=\"k\">await</span> <span class=\"n\">name_input</span><span class=\"o\">.</span><span class=\"n\">click</span><span class=\"p\">()</span>\n",
       "\t\n",
       "\t<span class=\"c1\"># Type &#39;Daniel&#39; into the input field</span>\n",
       "\t<span class=\"k\">await</span> <span class=\"n\">name_input</span><span class=\"o\">.</span><span class=\"n\">fill</span><span class=\"p\">(</span><span class=\"s1\">&#39;Daniel&#39;</span><span class=\"p\">)</span>\n",
       "</pre></div>\n"
      ],
      "text/latex": [
       "\\begin{Verbatim}[commandchars=\\\\\\{\\}]\n",
       "\\PY{k}{async} \\PY{k}{def} \\PY{n+nf}{test\\PYZus{}func}\\PY{p}{(}\\PY{p}{)}\\PY{p}{:}\n",
       "\t\\PY{c+c1}{\\PYZsh{} Let\\PYZsq{}s proceed step by step.}\n",
       "\t\\PY{c+c1}{\\PYZsh{} First we need to identify the input field below the \\PYZsq{}Name\\PYZsq{} label, then we can type into it.}\n",
       "\t\n",
       "\t\\PY{c+c1}{\\PYZsh{} Based on the HTML provided, we can use the aria\\PYZhy{}labelledby attribute to find the input field associated with the \\PYZsq{}Name\\PYZsq{} label.}\n",
       "\t\\PY{c+c1}{\\PYZsh{} The \\PYZsq{}Name\\PYZsq{} label has an id of \\PYZdq{}i1\\PYZdq{}, so we can use that to find the input field.}\n",
       "\t\\PY{n}{name\\PYZus{}input} \\PY{o}{=} \\PY{n}{page}\\PY{o}{.}\\PY{n}{locator}\\PY{p}{(}\\PY{l+s+s1}{\\PYZsq{}}\\PY{l+s+s1}{input[aria\\PYZhy{}labelledby=}\\PY{l+s+s1}{\\PYZdq{}}\\PY{l+s+s1}{i1}\\PY{l+s+s1}{\\PYZdq{}}\\PY{l+s+s1}{]}\\PY{l+s+s1}{\\PYZsq{}}\\PY{p}{)}\n",
       "\t\n",
       "\t\\PY{c+c1}{\\PYZsh{} Click on the input field to focus on it before typing}\n",
       "\t\\PY{k}{await} \\PY{n}{name\\PYZus{}input}\\PY{o}{.}\\PY{n}{click}\\PY{p}{(}\\PY{p}{)}\n",
       "\t\n",
       "\t\\PY{c+c1}{\\PYZsh{} Type \\PYZsq{}Daniel\\PYZsq{} into the input field}\n",
       "\t\\PY{k}{await} \\PY{n}{name\\PYZus{}input}\\PY{o}{.}\\PY{n}{fill}\\PY{p}{(}\\PY{l+s+s1}{\\PYZsq{}}\\PY{l+s+s1}{Daniel}\\PY{l+s+s1}{\\PYZsq{}}\\PY{p}{)}\n",
       "\\end{Verbatim}\n"
      ],
      "text/plain": [
       "async def test_func():\n",
       "\t# Let's proceed step by step.\n",
       "\t# First we need to identify the input field below the 'Name' label, then we can type into it.\n",
       "\t\n",
       "\t# Based on the HTML provided, we can use the aria-labelledby attribute to find the input field associated with the 'Name' label.\n",
       "\t# The 'Name' label has an id of \"i1\", so we can use that to find the input field.\n",
       "\tname_input = page.locator('input[aria-labelledby=\"i1\"]')\n",
       "\t\n",
       "\t# Click on the input field to focus on it before typing\n",
       "\tawait name_input.click()\n",
       "\t\n",
       "\t# Type 'Daniel' into the input field\n",
       "\tawait name_input.fill('Daniel')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      " 33%|███▎      | 1/3 [00:13<00:27, 13.62s/it]"
     ]
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Code generated:\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<style>pre { line-height: 125%; }\n",
       "td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }\n",
       "span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }\n",
       "td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }\n",
       "span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }\n",
       ".output_html .hll { background-color: #ffffcc }\n",
       ".output_html { background: #f8f8f8; }\n",
       ".output_html .c { color: #3D7B7B; font-style: italic } /* Comment */\n",
       ".output_html .err { border: 1px solid #FF0000 } /* Error */\n",
       ".output_html .k { color: #008000; font-weight: bold } /* Keyword */\n",
       ".output_html .o { color: #666666 } /* Operator */\n",
       ".output_html .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */\n",
       ".output_html .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */\n",
       ".output_html .cp { color: #9C6500 } /* Comment.Preproc */\n",
       ".output_html .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */\n",
       ".output_html .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */\n",
       ".output_html .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */\n",
       ".output_html .gd { color: #A00000 } /* Generic.Deleted */\n",
       ".output_html .ge { font-style: italic } /* Generic.Emph */\n",
       ".output_html .gr { color: #E40000 } /* Generic.Error */\n",
       ".output_html .gh { color: #000080; font-weight: bold } /* Generic.Heading */\n",
       ".output_html .gi { color: #008400 } /* Generic.Inserted */\n",
       ".output_html .go { color: #717171 } /* Generic.Output */\n",
       ".output_html .gp { color: #000080; font-weight: bold } /* Generic.Prompt */\n",
       ".output_html .gs { font-weight: bold } /* Generic.Strong */\n",
       ".output_html .gu { color: #800080; font-weight: bold } /* Generic.Subheading */\n",
       ".output_html .gt { color: #0044DD } /* Generic.Traceback */\n",
       ".output_html .kc { color: #008000; font-weight: bold } /* Keyword.Constant */\n",
       ".output_html .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */\n",
       ".output_html .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */\n",
       ".output_html .kp { color: #008000 } /* Keyword.Pseudo */\n",
       ".output_html .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */\n",
       ".output_html .kt { color: #B00040 } /* Keyword.Type */\n",
       ".output_html .m { color: #666666 } /* Literal.Number */\n",
       ".output_html .s { color: #BA2121 } /* Literal.String */\n",
       ".output_html .na { color: #687822 } /* Name.Attribute */\n",
       ".output_html .nb { color: #008000 } /* Name.Builtin */\n",
       ".output_html .nc { color: #0000FF; font-weight: bold } /* Name.Class */\n",
       ".output_html .no { color: #880000 } /* Name.Constant */\n",
       ".output_html .nd { color: #AA22FF } /* Name.Decorator */\n",
       ".output_html .ni { color: #717171; font-weight: bold } /* Name.Entity */\n",
       ".output_html .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */\n",
       ".output_html .nf { color: #0000FF } /* Name.Function */\n",
       ".output_html .nl { color: #767600 } /* Name.Label */\n",
       ".output_html .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */\n",
       ".output_html .nt { color: #008000; font-weight: bold } /* Name.Tag */\n",
       ".output_html .nv { color: #19177C } /* Name.Variable */\n",
       ".output_html .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */\n",
       ".output_html .w { color: #bbbbbb } /* Text.Whitespace */\n",
       ".output_html .mb { color: #666666 } /* Literal.Number.Bin */\n",
       ".output_html .mf { color: #666666 } /* Literal.Number.Float */\n",
       ".output_html .mh { color: #666666 } /* Literal.Number.Hex */\n",
       ".output_html .mi { color: #666666 } /* Literal.Number.Integer */\n",
       ".output_html .mo { color: #666666 } /* Literal.Number.Oct */\n",
       ".output_html .sa { color: #BA2121 } /* Literal.String.Affix */\n",
       ".output_html .sb { color: #BA2121 } /* Literal.String.Backtick */\n",
       ".output_html .sc { color: #BA2121 } /* Literal.String.Char */\n",
       ".output_html .dl { color: #BA2121 } /* Literal.String.Delimiter */\n",
       ".output_html .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */\n",
       ".output_html .s2 { color: #BA2121 } /* Literal.String.Double */\n",
       ".output_html .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */\n",
       ".output_html .sh { color: #BA2121 } /* Literal.String.Heredoc */\n",
       ".output_html .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */\n",
       ".output_html .sx { color: #008000 } /* Literal.String.Other */\n",
       ".output_html .sr { color: #A45A77 } /* Literal.String.Regex */\n",
       ".output_html .s1 { color: #BA2121 } /* Literal.String.Single */\n",
       ".output_html .ss { color: #19177C } /* Literal.String.Symbol */\n",
       ".output_html .bp { color: #008000 } /* Name.Builtin.Pseudo */\n",
       ".output_html .fm { color: #0000FF } /* Name.Function.Magic */\n",
       ".output_html .vc { color: #19177C } /* Name.Variable.Class */\n",
       ".output_html .vg { color: #19177C } /* Name.Variable.Global */\n",
       ".output_html .vi { color: #19177C } /* Name.Variable.Instance */\n",
       ".output_html .vm { color: #19177C } /* Name.Variable.Magic */\n",
       ".output_html .il { color: #666666 } /* Literal.Number.Integer.Long */</style><div class=\"highlight\"><pre><span></span><span class=\"k\">async</span> <span class=\"k\">def</span> <span class=\"nf\">test_func</span><span class=\"p\">():</span>\n",
       "\t<span class=\"c1\"># Let&#39;s proceed step by step.</span>\n",
       "\t<span class=\"c1\"># First we need to identify the input field with the placeholder &#39;Your answer&#39; that is below the &#39;Phone number&#39; label.</span>\n",
       "\t\n",
       "\t<span class=\"c1\"># We can use the aria-labelledby attribute to find the input field associated with the &#39;Phone number&#39; label.</span>\n",
       "\t<span class=\"c1\"># The &#39;Phone number&#39; label has an id of &quot;i5&quot;, so we will use that to find the input field.</span>\n",
       "\t<span class=\"n\">phone_number_input</span> <span class=\"o\">=</span> <span class=\"n\">page</span><span class=\"o\">.</span><span class=\"n\">locator</span><span class=\"p\">(</span><span class=\"s1\">&#39;input[aria-labelledby=&quot;i5&quot;]&#39;</span><span class=\"p\">)</span>\n",
       "\t\n",
       "\t<span class=\"c1\"># Click on the input field to focus on it</span>\n",
       "\t<span class=\"k\">await</span> <span class=\"n\">phone_number_input</span><span class=\"o\">.</span><span class=\"n\">click</span><span class=\"p\">()</span>\n",
       "\t\n",
       "\t<span class=\"c1\"># Type &#39;+123&#39; into the input field</span>\n",
       "\t<span class=\"k\">await</span> <span class=\"n\">phone_number_input</span><span class=\"o\">.</span><span class=\"n\">type</span><span class=\"p\">(</span><span class=\"s1\">&#39;+123&#39;</span><span class=\"p\">)</span>\n",
       "</pre></div>\n"
      ],
      "text/latex": [
       "\\begin{Verbatim}[commandchars=\\\\\\{\\}]\n",
       "\\PY{k}{async} \\PY{k}{def} \\PY{n+nf}{test\\PYZus{}func}\\PY{p}{(}\\PY{p}{)}\\PY{p}{:}\n",
       "\t\\PY{c+c1}{\\PYZsh{} Let\\PYZsq{}s proceed step by step.}\n",
       "\t\\PY{c+c1}{\\PYZsh{} First we need to identify the input field with the placeholder \\PYZsq{}Your answer\\PYZsq{} that is below the \\PYZsq{}Phone number\\PYZsq{} label.}\n",
       "\t\n",
       "\t\\PY{c+c1}{\\PYZsh{} We can use the aria\\PYZhy{}labelledby attribute to find the input field associated with the \\PYZsq{}Phone number\\PYZsq{} label.}\n",
       "\t\\PY{c+c1}{\\PYZsh{} The \\PYZsq{}Phone number\\PYZsq{} label has an id of \\PYZdq{}i5\\PYZdq{}, so we will use that to find the input field.}\n",
       "\t\\PY{n}{phone\\PYZus{}number\\PYZus{}input} \\PY{o}{=} \\PY{n}{page}\\PY{o}{.}\\PY{n}{locator}\\PY{p}{(}\\PY{l+s+s1}{\\PYZsq{}}\\PY{l+s+s1}{input[aria\\PYZhy{}labelledby=}\\PY{l+s+s1}{\\PYZdq{}}\\PY{l+s+s1}{i5}\\PY{l+s+s1}{\\PYZdq{}}\\PY{l+s+s1}{]}\\PY{l+s+s1}{\\PYZsq{}}\\PY{p}{)}\n",
       "\t\n",
       "\t\\PY{c+c1}{\\PYZsh{} Click on the input field to focus on it}\n",
       "\t\\PY{k}{await} \\PY{n}{phone\\PYZus{}number\\PYZus{}input}\\PY{o}{.}\\PY{n}{click}\\PY{p}{(}\\PY{p}{)}\n",
       "\t\n",
       "\t\\PY{c+c1}{\\PYZsh{} Type \\PYZsq{}+123\\PYZsq{} into the input field}\n",
       "\t\\PY{k}{await} \\PY{n}{phone\\PYZus{}number\\PYZus{}input}\\PY{o}{.}\\PY{n}{type}\\PY{p}{(}\\PY{l+s+s1}{\\PYZsq{}}\\PY{l+s+s1}{+123}\\PY{l+s+s1}{\\PYZsq{}}\\PY{p}{)}\n",
       "\\end{Verbatim}\n"
      ],
      "text/plain": [
       "async def test_func():\n",
       "\t# Let's proceed step by step.\n",
       "\t# First we need to identify the input field with the placeholder 'Your answer' that is below the 'Phone number' label.\n",
       "\t\n",
       "\t# We can use the aria-labelledby attribute to find the input field associated with the 'Phone number' label.\n",
       "\t# The 'Phone number' label has an id of \"i5\", so we will use that to find the input field.\n",
       "\tphone_number_input = page.locator('input[aria-labelledby=\"i5\"]')\n",
       "\t\n",
       "\t# Click on the input field to focus on it\n",
       "\tawait phone_number_input.click()\n",
       "\t\n",
       "\t# Type '+123' into the input field\n",
       "\tawait phone_number_input.type('+123')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      " 67%|██████▋   | 2/3 [00:23<00:11, 11.63s/it]"
     ]
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Code generated:\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<style>pre { line-height: 125%; }\n",
       "td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }\n",
       "span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }\n",
       "td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }\n",
       "span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }\n",
       ".output_html .hll { background-color: #ffffcc }\n",
       ".output_html { background: #f8f8f8; }\n",
       ".output_html .c { color: #3D7B7B; font-style: italic } /* Comment */\n",
       ".output_html .err { border: 1px solid #FF0000 } /* Error */\n",
       ".output_html .k { color: #008000; font-weight: bold } /* Keyword */\n",
       ".output_html .o { color: #666666 } /* Operator */\n",
       ".output_html .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */\n",
       ".output_html .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */\n",
       ".output_html .cp { color: #9C6500 } /* Comment.Preproc */\n",
       ".output_html .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */\n",
       ".output_html .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */\n",
       ".output_html .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */\n",
       ".output_html .gd { color: #A00000 } /* Generic.Deleted */\n",
       ".output_html .ge { font-style: italic } /* Generic.Emph */\n",
       ".output_html .gr { color: #E40000 } /* Generic.Error */\n",
       ".output_html .gh { color: #000080; font-weight: bold } /* Generic.Heading */\n",
       ".output_html .gi { color: #008400 } /* Generic.Inserted */\n",
       ".output_html .go { color: #717171 } /* Generic.Output */\n",
       ".output_html .gp { color: #000080; font-weight: bold } /* Generic.Prompt */\n",
       ".output_html .gs { font-weight: bold } /* Generic.Strong */\n",
       ".output_html .gu { color: #800080; font-weight: bold } /* Generic.Subheading */\n",
       ".output_html .gt { color: #0044DD } /* Generic.Traceback */\n",
       ".output_html .kc { color: #008000; font-weight: bold } /* Keyword.Constant */\n",
       ".output_html .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */\n",
       ".output_html .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */\n",
       ".output_html .kp { color: #008000 } /* Keyword.Pseudo */\n",
       ".output_html .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */\n",
       ".output_html .kt { color: #B00040 } /* Keyword.Type */\n",
       ".output_html .m { color: #666666 } /* Literal.Number */\n",
       ".output_html .s { color: #BA2121 } /* Literal.String */\n",
       ".output_html .na { color: #687822 } /* Name.Attribute */\n",
       ".output_html .nb { color: #008000 } /* Name.Builtin */\n",
       ".output_html .nc { color: #0000FF; font-weight: bold } /* Name.Class */\n",
       ".output_html .no { color: #880000 } /* Name.Constant */\n",
       ".output_html .nd { color: #AA22FF } /* Name.Decorator */\n",
       ".output_html .ni { color: #717171; font-weight: bold } /* Name.Entity */\n",
       ".output_html .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */\n",
       ".output_html .nf { color: #0000FF } /* Name.Function */\n",
       ".output_html .nl { color: #767600 } /* Name.Label */\n",
       ".output_html .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */\n",
       ".output_html .nt { color: #008000; font-weight: bold } /* Name.Tag */\n",
       ".output_html .nv { color: #19177C } /* Name.Variable */\n",
       ".output_html .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */\n",
       ".output_html .w { color: #bbbbbb } /* Text.Whitespace */\n",
       ".output_html .mb { color: #666666 } /* Literal.Number.Bin */\n",
       ".output_html .mf { color: #666666 } /* Literal.Number.Float */\n",
       ".output_html .mh { color: #666666 } /* Literal.Number.Hex */\n",
       ".output_html .mi { color: #666666 } /* Literal.Number.Integer */\n",
       ".output_html .mo { color: #666666 } /* Literal.Number.Oct */\n",
       ".output_html .sa { color: #BA2121 } /* Literal.String.Affix */\n",
       ".output_html .sb { color: #BA2121 } /* Literal.String.Backtick */\n",
       ".output_html .sc { color: #BA2121 } /* Literal.String.Char */\n",
       ".output_html .dl { color: #BA2121 } /* Literal.String.Delimiter */\n",
       ".output_html .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */\n",
       ".output_html .s2 { color: #BA2121 } /* Literal.String.Double */\n",
       ".output_html .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */\n",
       ".output_html .sh { color: #BA2121 } /* Literal.String.Heredoc */\n",
       ".output_html .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */\n",
       ".output_html .sx { color: #008000 } /* Literal.String.Other */\n",
       ".output_html .sr { color: #A45A77 } /* Literal.String.Regex */\n",
       ".output_html .s1 { color: #BA2121 } /* Literal.String.Single */\n",
       ".output_html .ss { color: #19177C } /* Literal.String.Symbol */\n",
       ".output_html .bp { color: #008000 } /* Name.Builtin.Pseudo */\n",
       ".output_html .fm { color: #0000FF } /* Name.Function.Magic */\n",
       ".output_html .vc { color: #19177C } /* Name.Variable.Class */\n",
       ".output_html .vg { color: #19177C } /* Name.Variable.Global */\n",
       ".output_html .vi { color: #19177C } /* Name.Variable.Instance */\n",
       ".output_html .vm { color: #19177C } /* Name.Variable.Magic */\n",
       ".output_html .il { color: #666666 } /* Literal.Number.Integer.Long */</style><div class=\"highlight\"><pre><span></span><span class=\"k\">async</span> <span class=\"k\">def</span> <span class=\"nf\">test_func</span><span class=\"p\">():</span>\n",
       "\t<span class=\"c1\"># Let&#39;s proceed step by step.</span>\n",
       "\t<span class=\"c1\"># First, we need to identify the radio button with the label &#39;Other&#39; under the &#39;Age&#39; section.</span>\n",
       "\t\n",
       "\t<span class=\"c1\"># Based on the HTML structure, we can use the text selector to find the radio button with the label &#39;Other&#39;.</span>\n",
       "\t<span class=\"n\">other_radio_button</span> <span class=\"o\">=</span> <span class=\"n\">page</span><span class=\"o\">.</span><span class=\"n\">locator</span><span class=\"p\">(</span><span class=\"s1\">&#39;text=&quot;Other:&quot;&#39;</span><span class=\"p\">)</span>\n",
       "\t\n",
       "\t<span class=\"c1\"># Click on the radio button</span>\n",
       "\t<span class=\"k\">await</span> <span class=\"n\">other_radio_button</span><span class=\"o\">.</span><span class=\"n\">click</span><span class=\"p\">()</span>\n",
       "\t\n",
       "\t<span class=\"c1\"># Now we need to type &#39;16&#39; into the input field that appears after selecting &#39;Other&#39;.</span>\n",
       "\t<span class=\"c1\"># We can use the aria-label attribute to find the input field.</span>\n",
       "\t<span class=\"n\">other_input_field</span> <span class=\"o\">=</span> <span class=\"n\">page</span><span class=\"o\">.</span><span class=\"n\">locator</span><span class=\"p\">(</span><span class=\"s1\">&#39;input[aria-label=&quot;Other response&quot;]&#39;</span><span class=\"p\">)</span>\n",
       "\t\n",
       "\t<span class=\"c1\"># Type &#39;16&#39; into the input field</span>\n",
       "\t<span class=\"k\">await</span> <span class=\"n\">other_input_field</span><span class=\"o\">.</span><span class=\"n\">fill</span><span class=\"p\">(</span><span class=\"s1\">&#39;16&#39;</span><span class=\"p\">)</span>\n",
       "</pre></div>\n"
      ],
      "text/latex": [
       "\\begin{Verbatim}[commandchars=\\\\\\{\\}]\n",
       "\\PY{k}{async} \\PY{k}{def} \\PY{n+nf}{test\\PYZus{}func}\\PY{p}{(}\\PY{p}{)}\\PY{p}{:}\n",
       "\t\\PY{c+c1}{\\PYZsh{} Let\\PYZsq{}s proceed step by step.}\n",
       "\t\\PY{c+c1}{\\PYZsh{} First, we need to identify the radio button with the label \\PYZsq{}Other\\PYZsq{} under the \\PYZsq{}Age\\PYZsq{} section.}\n",
       "\t\n",
       "\t\\PY{c+c1}{\\PYZsh{} Based on the HTML structure, we can use the text selector to find the radio button with the label \\PYZsq{}Other\\PYZsq{}.}\n",
       "\t\\PY{n}{other\\PYZus{}radio\\PYZus{}button} \\PY{o}{=} \\PY{n}{page}\\PY{o}{.}\\PY{n}{locator}\\PY{p}{(}\\PY{l+s+s1}{\\PYZsq{}}\\PY{l+s+s1}{text=}\\PY{l+s+s1}{\\PYZdq{}}\\PY{l+s+s1}{Other:}\\PY{l+s+s1}{\\PYZdq{}}\\PY{l+s+s1}{\\PYZsq{}}\\PY{p}{)}\n",
       "\t\n",
       "\t\\PY{c+c1}{\\PYZsh{} Click on the radio button}\n",
       "\t\\PY{k}{await} \\PY{n}{other\\PYZus{}radio\\PYZus{}button}\\PY{o}{.}\\PY{n}{click}\\PY{p}{(}\\PY{p}{)}\n",
       "\t\n",
       "\t\\PY{c+c1}{\\PYZsh{} Now we need to type \\PYZsq{}16\\PYZsq{} into the input field that appears after selecting \\PYZsq{}Other\\PYZsq{}.}\n",
       "\t\\PY{c+c1}{\\PYZsh{} We can use the aria\\PYZhy{}label attribute to find the input field.}\n",
       "\t\\PY{n}{other\\PYZus{}input\\PYZus{}field} \\PY{o}{=} \\PY{n}{page}\\PY{o}{.}\\PY{n}{locator}\\PY{p}{(}\\PY{l+s+s1}{\\PYZsq{}}\\PY{l+s+s1}{input[aria\\PYZhy{}label=}\\PY{l+s+s1}{\\PYZdq{}}\\PY{l+s+s1}{Other response}\\PY{l+s+s1}{\\PYZdq{}}\\PY{l+s+s1}{]}\\PY{l+s+s1}{\\PYZsq{}}\\PY{p}{)}\n",
       "\t\n",
       "\t\\PY{c+c1}{\\PYZsh{} Type \\PYZsq{}16\\PYZsq{} into the input field}\n",
       "\t\\PY{k}{await} \\PY{n}{other\\PYZus{}input\\PYZus{}field}\\PY{o}{.}\\PY{n}{fill}\\PY{p}{(}\\PY{l+s+s1}{\\PYZsq{}}\\PY{l+s+s1}{16}\\PY{l+s+s1}{\\PYZsq{}}\\PY{p}{)}\n",
       "\\end{Verbatim}\n"
      ],
      "text/plain": [
       "async def test_func():\n",
       "\t# Let's proceed step by step.\n",
       "\t# First, we need to identify the radio button with the label 'Other' under the 'Age' section.\n",
       "\t\n",
       "\t# Based on the HTML structure, we can use the text selector to find the radio button with the label 'Other'.\n",
       "\tother_radio_button = page.locator('text=\"Other:\"')\n",
       "\t\n",
       "\t# Click on the radio button\n",
       "\tawait other_radio_button.click()\n",
       "\t\n",
       "\t# Now we need to type '16' into the input field that appears after selecting 'Other'.\n",
       "\t# We can use the aria-label attribute to find the input field.\n",
       "\tother_input_field = page.locator('input[aria-label=\"Other response\"]')\n",
       "\t\n",
       "\t# Type '16' into the input field\n",
       "\tawait other_input_field.fill('16')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "100%|██████████| 3/3 [00:32<00:00, 10.84s/it]\n"
     ]
    }
   ],
   "source": [
    "from tqdm import tqdm\n",
    "from IPython.display import display, Markdown, HTML, Code\n",
    "import asyncio\n",
    "\n",
    "page.set_default_timeout(5000)\n",
    "\n",
    "instructions = \"\"\"- Select the input with placeholder 'Your answer' below 'Name', then type 'Daniel'\n",
    "- Select the input placeholder 'Your answer' below 'Phone number', then type '+123'\n",
    "- Select the radio button with label 'Other' under the 'Age' section, then type '16'\"\"\"\n",
    "instructions = instructions.split('\\n')\n",
    "instructions = [instruction.replace(\"- \", \"\") for instruction in instructions]\n",
    "\n",
    "outputs = []\n",
    "\n",
    "for instruction in tqdm(instructions):\n",
    "    query = instruction\n",
    "    html = await page.content()\n",
    "    \n",
    "    output = {}\n",
    "    \n",
    "    code, source_nodes, metadata = remote_action_engine.process_fat_node(query, html)\n",
    "    \n",
    "    retrieve_code = metadata['retrieve_code']\n",
    "    indexing_time = metadata['indexing_time']\n",
    "    completion_time = metadata['completion_time']\n",
    "    model_id = metadata['model_id']\n",
    "    prompt = metadata['prompt']\n",
    "    \n",
    "    context_str = \"\\n\".join(source_nodes)\n",
    "    \n",
    "    print(\"Code generated:\")\n",
    "    \n",
    "    # Executes async the generated code\n",
    "    test_func = None\n",
    "    indented_code = code.replace('\\n', '\\n\\t')\n",
    "    indented_code = f\"async def test_func():\\n\\t{indented_code}\"\n",
    "    display(Code(indented_code, language='python'))\n",
    "    \n",
    "    # We execute the generated code\n",
    "    exec(indented_code, globals())\n",
    "    loop = asyncio.get_event_loop()\n",
    "    if test_func:\n",
    "        try:\n",
    "            await loop.create_task(test_func())\n",
    "            execution_success = True\n",
    "            execution_error = \"\"\n",
    "            identification_result = \"\"\n",
    "        except Exception as e:\n",
    "            print(\"Error occurred:\", e)\n",
    "            execution_success = False\n",
    "            execution_error = str(e)\n",
    "            \n",
    "            identification_prompt = CLASSIFICATION_PROMPT.format(query_str=instruction, context_str=context_str)\n",
    "            identification_result = llm.complete(identification_prompt).text\n",
    "            \n",
    "            for i, node in enumerate(source_nodes):\n",
    "                display(Markdown(f\"### Node {i+1}\"))\n",
    "                display(Code(beautify_html(node), language='html'))\n",
    "                display(HTML(node))\n",
    "    else:\n",
    "        raise Exception(\"test_func not defined, issue generating code\")\n",
    "    output = {\n",
    "        \"html\": html,\n",
    "        \"source_nodes\": source_nodes,\n",
    "        \"query\": query,\n",
    "        \"prompt\": prompt,\n",
    "        \"code\": code,\n",
    "        \"execution_success\": execution_success,\n",
    "        \"execution_error\": execution_error,\n",
    "        \"identification_result\": identification_result,\n",
    "        \"model_id\": model_id,\n",
    "        \"retrieve_code\": retrieve_code,\n",
    "        \"indexing_time\": indexing_time,\n",
    "        \"completion_time\": completion_time\n",
    "    }\n",
    "    outputs.append(output)\n",
    "    "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 57,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>html</th>\n",
       "      <th>source_nodes</th>\n",
       "      <th>query</th>\n",
       "      <th>prompt</th>\n",
       "      <th>code</th>\n",
       "      <th>execution_success</th>\n",
       "      <th>execution_error</th>\n",
       "      <th>identification_result</th>\n",
       "      <th>model_id</th>\n",
       "      <th>retrieve_code</th>\n",
       "      <th>indexing_time</th>\n",
       "      <th>completion_time</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>&lt;!DOCTYPE html&gt;&lt;html lang=\"en\" class=\"HB1eCd-U...</td>\n",
       "      <td>[&lt;div class=\"x0k1lc MbhUzd\"&gt;&lt;/div&gt;&lt;div class=\"...</td>\n",
       "      <td>Select the input with placeholder 'Your answer...</td>\n",
       "      <td>\\nYour goal is to write Playwright Python code...</td>\n",
       "      <td># Let's proceed step by step.\\n# First we need...</td>\n",
       "      <td>True</td>\n",
       "      <td></td>\n",
       "      <td></td>\n",
       "      <td>gpt-4</td>\n",
       "      <td>def get_retriever_recursive(embed, html):\\n   ...</td>\n",
       "      <td>1.634843</td>\n",
       "      <td>11.401597</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>&lt;!DOCTYPE html&gt;&lt;html lang=\"en\" class=\"HB1eCd-U...</td>\n",
       "      <td>[&lt;div class=\"Axnmtb\"&gt;&lt;div class=\"foqfDc gdyQ3c...</td>\n",
       "      <td>Select the input placeholder 'Your answer' bel...</td>\n",
       "      <td>\\nYour goal is to write Playwright Python code...</td>\n",
       "      <td># Let's proceed step by step.\\n# First we need...</td>\n",
       "      <td>True</td>\n",
       "      <td></td>\n",
       "      <td></td>\n",
       "      <td>gpt-4</td>\n",
       "      <td>def get_retriever_recursive(embed, html):\\n   ...</td>\n",
       "      <td>0.365440</td>\n",
       "      <td>9.239383</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>&lt;!DOCTYPE html&gt;&lt;html lang=\"en\" class=\"HB1eCd-U...</td>\n",
       "      <td>[&lt;div class=\"x0k1lc MbhUzd\"&gt;&lt;/div&gt;&lt;div class=\"...</td>\n",
       "      <td>Select the radio button with label 'Other' und...</td>\n",
       "      <td>\\nYour goal is to write Playwright Python code...</td>\n",
       "      <td># Let's proceed step by step.\\n# First, we nee...</td>\n",
       "      <td>True</td>\n",
       "      <td></td>\n",
       "      <td></td>\n",
       "      <td>gpt-4</td>\n",
       "      <td>def get_retriever_recursive(embed, html):\\n   ...</td>\n",
       "      <td>0.366535</td>\n",
       "      <td>7.687490</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "                                                html  \\\n",
       "0  <!DOCTYPE html><html lang=\"en\" class=\"HB1eCd-U...   \n",
       "1  <!DOCTYPE html><html lang=\"en\" class=\"HB1eCd-U...   \n",
       "2  <!DOCTYPE html><html lang=\"en\" class=\"HB1eCd-U...   \n",
       "\n",
       "                                        source_nodes  \\\n",
       "0  [<div class=\"x0k1lc MbhUzd\"></div><div class=\"...   \n",
       "1  [<div class=\"Axnmtb\"><div class=\"foqfDc gdyQ3c...   \n",
       "2  [<div class=\"x0k1lc MbhUzd\"></div><div class=\"...   \n",
       "\n",
       "                                               query  \\\n",
       "0  Select the input with placeholder 'Your answer...   \n",
       "1  Select the input placeholder 'Your answer' bel...   \n",
       "2  Select the radio button with label 'Other' und...   \n",
       "\n",
       "                                              prompt  \\\n",
       "0  \\nYour goal is to write Playwright Python code...   \n",
       "1  \\nYour goal is to write Playwright Python code...   \n",
       "2  \\nYour goal is to write Playwright Python code...   \n",
       "\n",
       "                                                code  execution_success  \\\n",
       "0  # Let's proceed step by step.\\n# First we need...               True   \n",
       "1  # Let's proceed step by step.\\n# First we need...               True   \n",
       "2  # Let's proceed step by step.\\n# First, we nee...               True   \n",
       "\n",
       "  execution_error identification_result model_id  \\\n",
       "0                                          gpt-4   \n",
       "1                                          gpt-4   \n",
       "2                                          gpt-4   \n",
       "\n",
       "                                       retrieve_code  indexing_time  \\\n",
       "0  def get_retriever_recursive(embed, html):\\n   ...       1.634843   \n",
       "1  def get_retriever_recursive(embed, html):\\n   ...       0.365440   \n",
       "2  def get_retriever_recursive(embed, html):\\n   ...       0.366535   \n",
       "\n",
       "   completion_time  \n",
       "0        11.401597  \n",
       "1         9.239383  \n",
       "2         7.687490  "
      ]
     },
     "execution_count": 57,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import pandas as pd\n",
    "\n",
    "df = pd.DataFrame(outputs)\n",
    "df"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Misc"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [],
   "source": [
    "from playwright.sync_api import ElementHandle\n",
    "\n",
    "async def toggle_highlight(element: ElementHandle, highlight: bool):\n",
    "    \"\"\"Highlight or unhighlight the element on the page.\"\"\"\n",
    "    if highlight:\n",
    "        # Apply CSS styles to highlight the element\n",
    "        await element.evaluate('''(element) => {\n",
    "            element.style.outline = \"2px dashed blue\";\n",
    "            element.style.backgroundColor = \"rgba(135, 206, 250, 0.3)\";\n",
    "            element.style.borderRadius = \"10px\";\n",
    "        }''')\n",
    "    else:\n",
    "        # Reset CSS styles to remove the highlight\n",
    "        await element.evaluate('''(element) => {\n",
    "            element.style.outline = \"\";\n",
    "            element.style.backgroundColor = \"\";\n",
    "            element.style.borderRadius = \"\";\n",
    "        }''')\n",
    "    return True"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "True"
      ]
     },
     "execution_count": 25,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "await toggle_highlight(age_section, highlight=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<div aria-checked=\"true\" aria-posinset=\"6\" aria-setsize=\"6\" class=\"Od2TWd hYsg7c N2RpBe\" data-value=\"__other_option__\" id=\"i28\" jsaction=\"keydown:I481le;dyRcpb:dyRcpb;click:cOuCgd; mousedown:UX7yZ; mouseup:lbsD7e; mouseenter:tfO1Yc; mouseleave:JywGue; focus:AHmuwe; blur:O22p3e; contextmenu:mg9Pef;touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc(preventDefault=true); touchcancel:JMtRjd;\" jscontroller=\"D8e5bc\" jsshadow=\"\" role=\"radio\" tabindex=\"0\">\n",
      " <div class=\"x0k1lc MbhUzd\">\n",
      " </div>\n",
      " <div class=\"uyywbd\">\n",
      " </div>\n",
      " <div class=\"vd3tt\">\n",
      "  <div class=\"AB7Lab Id5V1\">\n",
      "   <div class=\"rseUEf nQOrEb\">\n",
      "   </div>\n",
      "  </div>\n",
      " </div>\n",
      "</div>\n",
      "\n"
     ]
    }
   ],
   "source": [
    "outer_html = await other_radio_button.evaluate(\"el => el.outerHTML\") \n",
    "print(beautify_html(outer_html))"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "myenv",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}