TF-1404 Add CDP example to fish-tank (#48)

* Add CDP example to fish-tank

* Add instruction for selecting google profile

* Address comments

examples/interact_with_external_or_existing_browser/README.md

@@ -0,0 +1,37 @@
+# Example script: interact with an external or existing browser with AgentQL
+
+This example demonstrates how to interact with an external or existing browser with AgentQL.
+
+## Run the script
+
+- [Install AgentQL SDK](https://docs.agentql.com/docs/installation/sdk-installation)
+- Save this Python file locally as **run_script_with_local_browser.py**
+- Close your Google Chrome application if it is open.
+- If you're using **Mac**, open the terminal and run the following command:
+
+```bash
+/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
+```
+
+- If you're using **Windows**, open the Command Prompt and run the command:
+
+```bash
+chrome.exe --remote-debugging-port=9222
+```
+
+**Make sure to replace `chrome.exe` with the path to your Chrome executable if it's not already in your system's PATH.**
+
+- In the browser window that's opened, select the Google profile you would like to use for this session.
+- In `run_script_with_local_browser.py`, replace variable `WEBSOCKET_URL`'s placeholder value with the actual WebSocket URL returned in terminal or command prompt. The URL should be in the format of `ws://127.0.0.1:9222/devtools/browser/387adf4c-243f-4051-a181-46798f4a46f4`.
+
+- Run the following command from the project's folder:
+
+```bash
+python3 run_script_with_local_browser.py
+```
+
+- If you want to learn how to work with open pages, navigate to [Viator website](https://www.viator.com/Rome-tours/Walking-Tours/d511-g16-c56) within the browser, and use `fetch_data_from_open_website_page()` method in the script to fetch data from the page.
+
+## Play with the query
+
+Install the [AgentQL Chrome DevTools extension](https://docs.agentql.com/docs/installation/chrome-extension-installation/) to play with the AgentQL query. [Learn more about the AgentQL query language](https://docs.agentql.com/docs/agentql-query/query-intro)

examples/interact_with_external_or_existing_browser/interact_with_external_or_existing_browser.py

@@ -0,0 +1,74 @@
+"""This example demonstrates how to interact with an external or existing browser with AgentQL."""
+
+from agentql.ext.playwright.sync_api import Page
+from playwright.sync_api import sync_playwright
+
+# The URL of the external or existing browser you wish to connect.
+WEBSOCKET_URL = "YOUR_WEBSOCKET_URL"
+
+URL = "https://scrapeme.live/shop"
+
+VIATOR_TOURS_QUERY = """
+{
+    tours[] {
+        title
+        price
+        length
+    }
+}
+"""
+
+SEARCH_QUERY = """
+{
+    search_products_box
+}
+"""
+
+STOCK_QUERY = """
+{
+    number_in_stock
+}
+"""
+
+
+def fetch_data_from_open_website_page():
+    """This function demonstrates how to fetch data from open pages in your local browser."""
+    with sync_playwright() as p:
+        # Connect to the browser via Chrome DevTools Protocol
+        browser = p.chromium.connect_over_cdp(WEBSOCKET_URL)
+
+        # Get the first page from the opened browser
+        page: Page = browser.contexts[0].pages[0]  # type: ignore
+
+        # Use query_data() method to fetch the data from the page
+        response = page.query_data(VIATOR_TOURS_QUERY)
+
+        print(response)
+
+
+def interact_with_new_page_in_local_browser():
+    """This function demonstrates how to open and interact with a new page your local browser."""
+    with sync_playwright() as p:
+        # Connect to the browser via Chrome DevTools Protocol
+        browser = p.chromium.connect_over_cdp(WEBSOCKET_URL)
+
+        # Create a new tab in the browser window
+        page: Page = browser.contexts[0].new_page()  # type: ignore
+
+        page.goto(URL)
+
+        # Use query_elements() method to locate the search product box from the page
+        response = page.query_elements(SEARCH_QUERY)
+
+        # Use Playwright's API to fill the search box and press Enter
+        response.search_products_box.type("Charmander")
+        page.keyboard.press("Enter")
+
+        # Use query_data() method to fetch the stock number from the page
+        response = page.query_data(STOCK_QUERY)
+
+        print(response)
+
+
+if __name__ == "__main__":
+    interact_with_new_page_in_local_browser()