# Browser Instructions

You can define your own browser instructions that are executed when rendering JavaScript.

{% hint style="success" %}
The easiest way to set up browser instructions is by using the AI-powered visual browser instruction builder on the [Web Scraper API Playground](https://dashboard.oxylabs.io/?route=/api-playground). Read about it [here](https://developers.oxylabs.io/scraping-solutions/web-scraper-api-playground/oxycopilot#browser-instruction-builder).
{% endhint %}

### Usage

To use browser instructions, provide a set of `browser_instructions` when creating a job.

Let’s say you want to search for the term `pizza boxes` in a website.

<figure><img src="https://63892162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzrXw45naRpCZ0Ku9AjY1%2Fuploads%2FVVCJxliUYBEPcG34IThU%2Fbi_1.png?alt=media&#x26;token=1f689105-300d-49ce-a38a-145fd925f54f" alt=""><figcaption></figcaption></figure>

An example job parameters would look as follows:

```json
{
    "source": "universal",
    "url": "https://www.ebay.com/",
    "render": "html",
    "browser_instructions": [
        {
            "type": "input",
            "value": "pizza boxes",
            "selector": {
                "type": "xpath",
                "value": "//input[@class='gh-tb ui-autocomplete-input']"
            }
        },
        {
            "type": "click",
            "selector": {
                "type": "xpath",
                "value": "//input[@type='submit']"
            }
        },
        {
            "type": "wait",
            "wait_time_s": 5
        }
    ]
}
```

**Step 1.** You must provide the `"render": "html"` parameter.

**Step 2.** Browser instructions should be described in the `"browser_instructions"` field.

The sample browser instructions above specifies that the aim is to enter a search term `pizza boxes` into a search field, click `search` button and wait for 5 seconds for content to load.

The scraped result should look as follows:

```json
{
  "results": [
    {
      "content": "<!doctype html><html>
        Content after executing the instructions      
      </html>",
      "created_at": "2023-10-11 11:35:23",
      "updated_at": "2023-10-11 11:36:08",
      "page": 1,
      "url": "https://www.ebay.com/",
      "job_id": "7117835067442906113",
      "status_code": 200
    }
  ]
}
```

Scraped HTML should look like this:

<figure><img src="https://63892162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzrXw45naRpCZ0Ku9AjY1%2Fuploads%2Fskb19h4I9wV9pBJSQIP6%2Fbi_2.png?alt=media&#x26;token=36c0fa1e-7bb6-4bf6-8047-ab9d9bbd20dd" alt=""><figcaption></figcaption></figure>

#### Fetching browser resources <a href="#fetching-browser-resources" id="fetching-browser-resources"></a>

We provide a standalone browser instruction for fetching browser resources.

The function is defined here:

Using `fetch_resource` will result in job returning the first occurrence of a Fetch/XHR resource that matches the format provided instead of the HTML that is being targeted.

Let’s say we want to target a GraphQL resource that is fetched when visiting a product page organically in the browser. We will provide job information as such:

```json
{
    "source": "universal",
    "url": "https://www.example.com/product-page/123",
    "render": "html",
    "browser_instructions": [
        {
            "type": "fetch_resource",
            "filter": "/graphql/product-info/123"
        }
    ]
}
```

These instructions will result in a result as such:

```json
{
  "results": [
    {
      "content": "{'product_id': 123, 'description': '', 'price': 123}",
      "created_at": "2023-10-11 11:35:23",
      "updated_at": "2023-10-11 11:36:08",
      "page": 1,
      "url": "https://example.com/v1/graphql/product-info/123/",
      "job_id": "7117835067442906114",
      "status_code": 200
    }
  ]
}
```

### List of supported browser instructions <a href="#list-of-supported-browser-instructions" id="list-of-supported-browser-instructions"></a>

{% content-ref url="browser-instructions/list-of-instructions" %}
[list-of-instructions](https://developers.oxylabs.io/scraping-solutions/web-scraper-api/features/js-rendering-and-browser-control/browser-instructions/list-of-instructions)
{% endcontent-ref %}

### Status codes <a href="#status-codes" id="status-codes"></a>

See our response codes outlined [**here**](https://developers.oxylabs.io/scraping-solutions/web-scraper-api/response-codes).

Status codes in regards to instructions validation are documented [**here**](https://developers.oxylabs.io/scraping-solutions/web-scraper-api/features/js-rendering-and-browser-control/list-of-instructions#instructions-validation).

### Errors and warnings

If there’s an error or warning resulting from your browsing actions, you’ll find it in the outcome under the keys `browser_instructions_error` or `browser_instructions_warnings`. For instance, if you’ve sent the following browser instructions and the expected xpath isn’t located on the page, the result will include a warning.

`browser_instructions`:

```json
[
    {
        "type": "input", 
        "selector": {
            "type": "xpath",
            "value": "//input[@type='search']"
        },
        "value": "oxylabs"
    }
]
```

Results:

```json
{
  "results": [
    {
      "content": "<!doctype html><html>
        Content after executing the instructions      
      </html>",
      "created_at": "2023-10-11 11:35:23",
      "updated_at": "2023-10-11 11:36:08",
      "browser_instructions_warnings": [
        {
          "action_type": "click",
          "msg": "Unable to find selector type `xpath` with value `//input[@type=search]` on the page."
        },
      ],
      "page": 1,
      "url": "https://example.com",
      "job_id": "7117835067442906113",
      "status_code": 200
    }
  ]
}

```

| Possible errors and warnings                                                              |
| ----------------------------------------------------------------------------------------- |
| Unexpected error happened while converting browser instructions to actions.               |
| Unexpected error happened while executing `{action.type}` browser instructions.           |
| Action `{action.type}` timed out.                                                         |
| Unable to find selector type `{selector.type}` with value `{selector.value}` on the page. |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.oxylabs.io/scraping-solutions/web-scraper-api/features/js-rendering-and-browser-control/browser-instructions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
