Example: DOM Interaction

Interact with page elements using CSS selectors — query content, fill forms, and click buttons.

Code

import asyncio

from voidcrawl import BrowserConfig, BrowserSession

FORM_PAGE = """data:text/html,
<html>
<body>
  <h1 id="greeting">Hello</h1>
  <input id="name" type="text" placeholder="Your name" />
  <button id="btn" onclick="
    document.getElementById('greeting').textContent =
      'Hello, ' + document.getElementById('name').value + '!';
  ">Greet</button>
</body>
</html>
"""


async def main() -> None:
    async with BrowserSession(BrowserConfig()) as browser:
        page = await browser.new_page(FORM_PAGE)

        # Query a single element (returns inner HTML or None)
        heading = await page.query_selector("#greeting")
        print(f"Heading HTML: {heading}")

        # Query multiple elements
        all_inputs = await page.query_selector_all("input")
        print(f"Found {len(all_inputs)} input(s)")

        # Type into the input and click the button
        await page.type_into("#name", "World")
        await page.click_element("#btn")

        # Check the updated heading
        updated = await page.query_selector("#greeting")
        print(f"Updated heading: {updated}")

        # Missing selectors return None
        missing = await page.query_selector("#does-not-exist")
        print(f"Missing element: {missing}")

        await page.close()


if __name__ == "__main__":
    asyncio.run(main())

Key Points

query_selector(selector) returns the inner HTML of the first match, or None if nothing matches.
query_selector_all(selector) returns a list of inner HTML strings for all matches.
type_into(selector, text) types text into the first matching input element.
click_element(selector) clicks the first matching element via JS.
This example uses a data: URL to load inline HTML — useful for testing without a server.

Expected Output

Heading HTML: Hello
Found 1 input(s)
Updated heading: Hello, World!
Missing element: None