Submitting Forms and Using Deep Selectors

Modern websites often employ sophisticated techniques such as CAPTCHAs, iframes, and closed-shadow DOM trees to block automated tools. BrowserQL presents you with tools to automate challenging scenarios such as handling CAPTCHAs, submitting forms, and navigating deeply nested elements. The combination of deep selectors and humanized actions ensures that your automation scripts are both effective and resilient.

Submitting Forms

BrowserQL simplifies form submission by automating the process in a human-like manner. It handles tasks like filling input fields, selecting dropdowns, and clicking buttons with minimal configuration. Here’s how you can fill out a form and submit it:

mutation SubmitForm {
  goto(url: "https://example.com/form", waitUntil: firstContentfulPaint) {
    status
  }
  
  fillName: type(
    selector: "input#name"
    text: "John Doe"
  ) {
    time
  }

  fillEmail: type(
    selector: "input#email"
    text: "johndoe@example.com"
  ) {
    time
  }

  submitForm: click(
    selector: "button#submit"
  ) {
    time
  }
}

Humanized Behavior

BrowserQL ensures that the input values are typed with randomized delays, mimicking human behavior to avoid detection. Refer to the following pages for more details:

• Session Settings: Learn to activate human-like behavior on your queries.
• Writing BrowserQL: Understand how to change delay time in your mutations.

Solving CAPTCHAs

CAPTCHAs are a common roadblock in automation. BrowserQL includes built-in support for CAPTCHA challenges. BQL will automatically detect and interacts with CAPTCHAs, even those embedded in iframes or shadow DOMs. You can use the following mutations:

• Verify: Clicks a verification button to assert human-like interaction.
• Solve: Solves a captcha or other challenge, specified by the "type" of captcha to solve.

Verify

mutation Verify {
  goto(url: "https://protected.domain") {
    status
  }

  verify(type: cloudflare) {
    found
    solved
    time
  }
}

Solve

mutation SolveCaptcha {
  goto(url: "https://protected.domain") {
    status
  }

  solve(type: hcaptcha) {
    found
    solved
    time
  }
}

Using Deep Selectors

Deep selectors lets you target elements nested inside iframes or hidden within shadow DOMs. These selectors extend the standard query syntax, allowing precise targeting even on complex web pages.

Anatomy of Deep Selectors

A deep selector has the following format:

selector: "< [optional URL pattern] selector"

1. < Character: Indicates that you’re using a deep selector.
2. Optional URL Pattern: Matches iframe URLs using glob-style patterns.
3. DOM Selector: Identifies the target element within the matched iframe.

Below you can see multiple deep selector examples:

Example 1

Target an iframe of cnn.com and look for a button with an ID of "submit"

selector: "< *cnn.com* button#submit"

Example 2

Target an iframe of google.com/api/verify and click an anchor element with a classname that includes "now":

selector: "< *google.com/api/verify* a[class*='now']"

Example 3

Find any element on any iframe (or top-level page) with an attribute of price:

selector: "< [price]"

Example 4

Find an iframe with an exact URL of "https://amazon.com/ and a span with classname of "submit" and "order":

selector: "< https://amazon.com/ span.submit.order"

Restrictions

• Parent-child relationships are not supported (e.g., div > span).
• Each selector must refer to a single node.

Final Thoughts

We encourage you to explore these features to unlock the full potential of BrowserQL in your projects!