# JavaScript Instructions

Interacting with the website you are scraping is very important, especially if you want to retrieve custom information. BrowserAPI allows you to do so, by simply adding the `js_instructions` parameter to your request.

This parameter's value is a `stringified object`, which accepts the following options:

<table><thead><tr><th width="200">Parameter</th><th width="113" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>action</code><br><mark style="color:red;background-color:red;">Required</mark></td><td align="center"><code>string</code></td><td><p>The action that you want to perform. Accepted values are:</p><p>-<code>click</code> - click on an element specified by the <code>selector</code> option<br>-<code>click_and_navigate</code> - same as <code>click</code>, except it also handles the page navigation that is triggered by the click</p><p>-<code>scrollTo</code> - scroll to an element specified by the <code>selector</code> option</p><p>-<code>scrollPx</code> - scroll a specified distance in pixels specified by the <code>pixels</code> option</p><p>-<code>scrollInf</code> - scroll a specified number of times specified by the <code>count</code> option</p><p>-<code>delete_element</code> - delete the first element found for a given <code>selector</code>. If the <code>multiple</code> property on the instuction is <code>true</code>, it will delete all the elements.</p><p>-<code>focus</code> - sets the focus on a HTML element</p><p>-<code>value</code> - sets the value of a HTML input</p><p>-<code>typed_value</code> - same as <code>value</code>, but the value is typed like a user would</p><p>-<code>submit</code> - works only on <code>FORM</code> elements<br>-<code>submit_and_navigate</code> - same as <code>submit</code>, except it also handles the page navigation that is triggered by the submit<br>-<code>solve_captcha</code> - solve any reCaptcha or hCaptcha challenge.<br>- <code>wait_for_css</code> - wait for a CSS selector to exist in the page.</p></td></tr><tr><td><code>selector</code></td><td align="center"><code>string</code></td><td>The CSS selector on which you want to perform your action.</td></tr><tr><td><code>block</code></td><td align="center"><code>string</code></td><td>The area of the HTML element identified by the specified CSS selector. Used with the <code>scrollTo</code> action. Accepted values are <code>start</code>, <code>center</code> and <code>end</code>. The default value is <code>start</code>.</td></tr><tr><td><code>value</code></td><td align="center"><code>string</code></td><td>The value of a HTML input identified by the specified CSS selector. Used with the <code>value</code> action.</td></tr><tr><td><code>pixels</code></td><td align="center"><code>string</code></td><td>The distance for vertically scrolling. Used with the <code>scrollPx</code> action.</td></tr><tr><td><code>count</code></td><td align="center"><code>int</code></td><td>The number of times to perform a vertically scroll. Used with the <code>scrollInf</code> action. The scrolling distance is calculated by the window height. Useful for lazy-loaded lists.</td></tr><tr><td><code>timeout</code></td><td align="center"><code>int</code></td><td>Perform a delay after each JavaScript instruction. For the <code>scrollInf</code> action, the delay is performed after each individual scroll. For the <code>wait_for_css</code> action, it represents to time to wait for the CSS selector to appear and it defaults to 5 seconds. Measured in <code>ms</code>.</td></tr><tr><td><code>strict</code></td><td align="center"><code>string</code></td><td><p>By default, the JavaScript instructions are executed in "strict mode", which means that if an error occurs during the execution of one instruction, the request will be aborted and an error will be returned.</p><p>You have the option to deactivate this behaviour by assigning the strict key the value <code>"false"</code> within your instruction.</p></td></tr></tbody></table>

A full example of how this parameter would look like in production is:

{% code overflow="wrap" %}

```
js_instructions='[{"action":"scrollTo","selector":"div.navFooterBackToTop","timeout": 5000, "block": "start"}]'
```

{% endcode %}

The js\_instructions parameter will accept a URL encoded JSON string that represents an array. This is a mock example that uses multiple actions:

{% code overflow="wrap" %}

```
[{"action":"click","selector":"<selector>","timeout":2000, "strict":"false"},{"action":"click","selector":"<selector>","timeout":2000, "strict":"true"},{"action":"click","selector":"<selector>","timeout":2000},{"action":"scrollTo","selector":"<selector>","timeout": 2000, "block": "end"}]
```

{% endcode %}

And this is the URL encoded value from the example above:

{% code overflow="wrap" %}

```
%5B%7B%22action%22%3A%22click%22%2C%22selector%22%3A%22%3Cselector%3E%22%2C%22timeout%22%3A2000%2C%20%22strict%22%3A%22false%22%7D%2C%7B%22action%22%3A%22click%22%2C%22selector%22%3A%22%3Cselector%3E%22%2C%22timeout%22%3A2000%2C%20%22strict%22%3A%22true%22%7D%2C%7B%22action%22%3A%22click%22%2C%22selector%22%3A%22%3Cselector%3E%22%2C%22timeout%22%3A2000%7D%2C%7B%22action%22%3A%22scrollTo%22%2C%22selector%22%3A%22%3Cselector%3E%22%2C%22timeout%22%3A%202000%2C%20%22block%22%3A%20%22end%22%7D%5D
```

{% endcode %}

## JavaScript Instructions Integration Examples

<mark style="color:blue;">`GET`</mark> `https://api.webscrapingapi.com/v1`

The following examples shows how the `js_instructions` parameter is used in order to interact with the scraped url, before retrieving the HTML code.

#### Query Parameters

| Name                                       | Type    | Description                                                                                     |
| ------------------------------------------ | ------- | ----------------------------------------------------------------------------------------------- |
| api\_key<mark style="color:red;">\*</mark> | String  | `<YOUR_API_KEY>`                                                                                |
| url<mark style="color:red;">\*</mark>      | String  | `https://webscrapingapi.com`                                                                    |
| render\_js                                 | Integer | `1`                                                                                             |
| js\_instructions                           | Object  | `[{"action":"scrollTo","selector":"div.navFooterBackToTop","timeout": 5000, "block": "start"}]` |

The full **GET** request for the `js_instructions` should be:

```
https://api.webscrapingapi.com/v1?api_key=<YOUR_API_KEY>&url=https://webscrapingapi.com&js_instructions=%5B%7B%22action%22%3A%22scrollTo%22%2C%22selector%22%3A%22div.navFooterBackToTop%22%2C%22timeout%22%3A%205000%2C%20%22block%22%3A%20%22start%22%7D%5D%0A
```

{% tabs %}
{% tab title="cURL" %}
{% code overflow="wrap" %}

```bash
curl "https://api.webscrapingapi.com/v1?api_key=<YOUR_API_KEY>&url=https://webscrapingapi.com&js_instructions=%5B%7B%22action%22%3A%22scrollTo%22%2C%22selector%22%3A%22div.navFooterBackToTop%22%2C%22timeout%22%3A%205000%2C%20%22block%22%3A%20%22start%22%7D%5D%0A"
```

{% endcode %}
{% endtab %}

{% tab title="NodeJS" %}
{% code overflow="wrap" %}

```javascript
const http = require("https");

const options = {
  "method": "GET",
  "hostname": "api.webscrapingapi.com",
  "port": null,
  "path": "/v1?api_key=<YOUR_API_KEY>&url=https://webscrapingapi.com&js_instructions=%5B%7B%22action%22%3A%22scrollTo%22%2C%22selector%22%3A%22div.navFooterBackToTop%22%2C%22timeout%22%3A%205000%2C%20%22block%22%3A%20%22start%22%7D%5D%0A",
  "headers": {}
};

const req = http.request(options, function (res) {
  const chunks = [];

  res.on("data", function (chunk) {
    chunks.push(chunk);
  });

  res.on("end", function () {
    const body = Buffer.concat(chunks);
    console.log(body.toString());
  });
});

req.end();
```

{% endcode %}
{% endtab %}

{% tab title="Python" %}
{% code overflow="wrap" %}

```python
import requests

API_KEY = '<YOUR_API_KEY>'
SCRAPER_URL = 'https://api.webscrapingapi.com/v1'

TARGET_URL = 'https://webscrapingapi.com/'

PARAMS = {
    "api_key":API_KEY,
    "url": TARGET_URL,
    "render_js": 1,
    "js_instructions":'[{"action":"scrollTo","selector":"div.navFooterBackToTop","timeout": 5000, "block": "start"}]'
}

response = requests.get(SCRAPER_URL, params=PARAMS)

print(response.text)
```

{% endcode %}
{% endtab %}

{% tab title="PHP" %}
{% code overflow="wrap" %}

```php
<?php

$curl = curl_init();

curl_setopt_array($curl, [
  CURLOPT_URL => "https://api.webscrapingapi.com/v1?api_key=<YOUR_API_KEY>&url=https://webscrapingapi.com&js_instructions=%5B%7B%22action%22%3A%22scrollTo%22%2C%22selector%22%3A%22div.navFooterBackToTop%22%2C%22timeout%22%3A%205000%2C%20%22block%22%3A%20%22start%22%7D%5D%0A",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "GET",
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}
```

{% endcode %}
{% endtab %}

{% tab title="Go" %}
{% code overflow="wrap" %}

```go
package main

import (
	"fmt"
	"net/http"
	"io/ioutil"
)

func main() {

	url := "https://api.webscrapingapi.com/v1?api_key=<YOUR_API_KEY>&url=https://webscrapingapi.com&js_instructions=%5B%7B%22action%22%3A%22scrollTo%22%2C%22selector%22%3A%22div.navFooterBackToTop%22%2C%22timeout%22%3A%205000%2C%20%22block%22%3A%20%22start%22%7D%5D%0A"

	req, _ := http.NewRequest("GET", url, nil)

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := ioutil.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

{% endcode %}
{% endtab %}

{% tab title="Java" %}
{% code overflow="wrap" %}

```java
HttpResponse<String> response = Unirest.get("https://api.webscrapingapi.com/v1?api_key=<YOUR_API_KEY>&url=https://webscrapingapi.com&js_instructions=%5B%7B%22action%22%3A%22scrollTo%22%2C%22selector%22%3A%22div.navFooterBackToTop%22%2C%22timeout%22%3A%205000%2C%20%22block%22%3A%20%22start%22%7D%5D%0A")
  .asString();
```

{% endcode %}
{% endtab %}

{% tab title=".NET" %}
{% code overflow="wrap" %}

```csharp
var client = new RestClient("https://api.webscrapingapi.com/v1?api_key=<YOUR_API_KEY>&url=https://webscrapingapi.com&js_instructions=%5B%7B%22action%22%3A%22scrollTo%22%2C%22selector%22%3A%22div.navFooterBackToTop%22%2C%22timeout%22%3A%205000%2C%20%22block%22%3A%20%22start%22%7D%5D%0A");
var request = new RestRequest(Method.GET);
IRestResponse response = client.Execute(request);
```

{% endcode %}
{% endtab %}

{% tab title="Ruby" %}
{% code overflow="wrap" %}

```ruby
require 'uri'
require 'net/http'
require 'openssl'

url = URI("https://api.webscrapingapi.com/v1?api_key=<YOUR_API_KEY>&url=https://webscrapingapi.com&js_instructions=%5B%7B%22action%22%3A%22scrollTo%22%2C%22selector%22%3A%22div.navFooterBackToTop%22%2C%22timeout%22%3A%205000%2C%20%22block%22%3A%20%22start%22%7D%5D%0A")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE

request = Net::HTTP::Get.new(url)

response = http.request(request)
puts response.read_body
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="warning" %} <mark style="color:red;">**Important!**</mark> The `url` & `js_instructions` parameters have to be encoded.

*( i.e. **\&url=https%3A%2F%2Fwww\.webscrapingapi.com%2F\&js\_instructions=%5B%7B%22action%22%3A%22scrollTo%22%2C%22selector%22%3A%22div...** )*
{% endhint %}


---

# 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://docs.webscrapingapi.com/browser-api/advanced-api-features/javascript-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.