> For the complete documentation index, see [llms.txt](https://developers.oxylabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.oxylabs.io/products/es/web-scraper-api/features/js-rendering-and-browser-control.md). # Renderizado de JS y control del navegador Aprende a usar un parámetro render para definir instrucciones del navegador en Web Scraper API, de modo que puedas extraer páginas dinámicas complejas. ## Renderizado de JavaScript Si la página que quieres extraer usa JavaScript para cargar sus datos en el DOM, añade el `render` parámetro a tu solicitud. La página se renderiza completamente antes de devolver el resultado, en uno de dos formatos:

valor de render	Obtienes
`html`	El HTML sin procesar de la página completamente renderizada
`png`	Una captura de pantalla (PNG) codificada en Base64 de la página renderizada

{% hint style="info" %} Si quieres extraer una imagen y descargarla, consulta [**esta sección**](/products/es/web-scraper-api/features/result-processing-and-storage/output-types/download-images.md)**.** {% endhint %} ### Ejemplo de solicitud {% tabs %} {% tab title="cURL" %} ```shell curl --user "USERNAME:PASSWORD" \\ 'https://realtime.oxylabs.io/v1/queries' \\ -H "Content-Type: application/json" \\ -d '{"source": "universal", "url": "https://www.example.com", "render": "html"}' ``` {% endtab %} {% tab title="Python" %} ```python import requests from pprint import pprint # Structure payload. payload = { 'source': 'universal', 'url': 'https://www.example.com', 'render': 'html', } # Get response. response = requests.request( 'POST', 'https://realtime.oxylabs.io/v1/queries', auth=('USERNAME', 'PASSWORD'), json=payload, ) # Instead of response with job status and results url, this will return the # JSON response with the result. pprint(response.json()) ``` {% endtab %} {% tab title="PHP" %} ```php 'universal', 'url' => 'https://www.example.com', 'render' => 'html', ]; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, "https://realtime.oxylabs.io/v1/queries"); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($params)); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_USERPWD, "USERNAME" . ":" . "PASSWORD"); $headers = array(); $headers[] = "Content-Type: application/json"; curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); $result = curl_exec($ch); echo $result; if (curl_errno($ch)) { echo 'Error:' . curl_error($ch); } curl_close($ch); ``` {% endtab %} {% tab title="C#" %} ```csharp using System; using System.Collections.Generic; using System.Net.Http; using System.Net.Http.Json; using System.Threading.Tasks; namespace OxyApi { class Program { static async Task Main() { const string Username = "YOUR_USERNAME"; const string Password = "YOUR_PASSWORD"; var parameters = new Dictionary() { { "source", "universal" }, { "url", "https://www.example.com" }, { "render" : "html" }, }; var client = new HttpClient(); Uri baseUri = new Uri("https://realtime.oxylabs.io"); client.BaseAddress = baseUri; var requestMessage = new HttpRequestMessage(HttpMethod.Post, "/v1/queries"); requestMessage.Content = JsonContent.Create(parameters); var authenticationString = $"{Username}:{Password}"; var base64EncodedAuthenticationString = Convert.ToBase64String(System.Text.ASCIIEncoding.UTF8.GetBytes(authenticationString)); requestMessage.Headers.Add("Authorization", "Basic " + base64EncodedAuthenticationString); var response = await client.SendAsync(requestMessage); var contents = await response.Content.ReadAsStringAsync(); Console.WriteLine(contents); } } } ``` {% endtab %} {% tab title="Golang" %} ```go package main import ( "bytes" "encoding/json" "fmt" "io/ioutil" "net/http" ) func main() { const Username = "YOUR_USERNAME" const Password = "YOUR_PASSWORD" payload := map[string]string{ "source": "universal", "url": "https://www.example.com", "render": "html", } jsonValue, _ := json.Marshal(payload) client := &http.Client{} request, _ := http.NewRequest("POST", "https://realtime.oxylabs.io/v1/queries", bytes.NewBuffer(jsonValue), ) request.SetBasicAuth(Username, Password) response, _ := client.Do(request) responseText, _ := ioutil.ReadAll(response.Body) fmt.Println(string(responseText)) } ``` {% endtab %} {% tab title="Java" %} ```java package org.example; import okhttp3.*; import org.json.JSONObject; public class Main implements Runnable { private static final String AUTHORIZATION_HEADER = "Authorization"; public static final String USERNAME = "YOUR_USERNAME"; public static final String PASSWORD = "YOUR_PASSWORD"; public void run() { JSONObject jsonObject = new JSONObject(); jsonObject.put("source", "universal"); jsonObject.put("url", "https://www.example.com"); jsonObject.put("render", "html"); Authenticator authenticator = (route, response) -> { String credential = Credentials.basic(USERNAME, PASSWORD); return response .request() .newBuilder() .header(AUTHORIZATION_HEADER, credential) .build(); }; var client = new OkHttpClient.Builder() .authenticator(authenticator) .build(); var mediaType = MediaType.parse("application/json; charset=utf-8"); var body = RequestBody.create(jsonObject.toString(), mediaType); var request = new Request.Builder() .url("https://realtime.oxylabs.io/v1/queries") .post(body) .build(); try (var response = client.newCall(request).execute()) { assert response.body() != null; System.out.println(response.body().string()); } catch (Exception exception) { System.out.println("Error: " + exception.getMessage()); } System.exit(0); } public static void main(String[] args) { new Thread(new Main()).start(); } } ``` {% endtab %} {% tab title="Node.js" %} ```javascript import fetch from 'node-fetch'; const username = 'YOUR_USERNAME'; const password = 'YOUR_PASSWORD'; const body = { 'source': 'universal', 'url': 'https://www.example.com', 'render': 'html' }; const response = await fetch('https://realtime.oxylabs.io/v1/queries', { method: 'post', body: JSON.stringify(body), headers: { 'Content-Type': 'application/json', 'Authorization': 'Basic ' + Buffer.from(`${username}:${password}`).toString('base64'), } }); console.log(await response.json()); ``` {% endtab %} {% tab title="JSON" %} ```json { "source": "universal", "url": "https://www.example.com", "render": "html" } ``` {% endtab %} {% endtabs %} {% hint style="warning" %} El renderizado de JavaScript tarda más en extraer la página. Por favor, establece el tiempo de espera del lado del cliente en 180 segundos si usas los métodos de integración Realtime o Proxy Endpoint. {% endhint %} {% hint style="warning" %} Para garantizar el menor consumo de tráfico, nuestro sistema no carga activos innecesarios durante el renderizado de la página. {% endhint %} ## Forzando el renderizado en páginas específicas Para una extracción exitosa, algunos tipos de página de dominios específicos requieren renderizado debido a su contenido dinámico. Para estos, nuestro sistema **aplica automáticamente el renderizado** aunque no establezcas el `render` parámetro, así siempre obtienes datos precisos y fiables de estas páginas, que de otro modo son difíciles. {% hint style="warning" %} Ten en cuenta que los trabajos renderizados consumen más tráfico en comparación con los trabajos sin renderizado. {% endhint %} Si deseas desactivar el renderizado, puedes hacerlo añadiendo el siguiente parámetro a tus solicitudes: ``` "render": "" ``` La lista completa de objetivos afectados se mantiene en el archivo de abajo. Queremos que nuestros usuarios sean plenamente conscientes de esto al extraer las siguientes páginas:

Dominios con renderizado forzado

Dominio	Categoría de renderizado
`acmemarkets`	`product_pages`
`adorebeauty`	`product`
`aeroin`	`all`
`agrizone`	`all`
`ajog`	`all`
`albertsons`	`aisles`; `product_pages`; `search`
`allegro`	`all`
`amazon`	`amazon_bestsellers`
`anbima`	`all`
`andronicos`	`product_pages`
`appliancesonline`	`all`
`aruodas`	`all`
`asda`	`search`
`auto5`	`all`
`avfoni`	`all`
`avito`	`all`
`b-parts`	`product`
`bakersplus`	`product`; `categoría`
`bedbathandbeyond`	`all`
`bergdorfgoodman`	`all`
`Bestbuy`	`site`
`bevmo`	`all`
`bidfax`	`all`
`bilbasen`	`all`
`binglee`	`all`
`blibli`	`all`
`bloomingdales`	`all`
`book-secure`	`all`
`bookscouter`	`all`
`boulanger`	`all`
`canadagoose`	`all`
`canadiangamingbusiness`	`all`
`car`	`all`
`carfax`	`all`
`cargurus`	`all`
`carrefour`	`all`
`carrsqc`	`product_pages`
`carsales`	`all`
`carters`	`all`
`casasbahia`	`search`
`cec`	`all`
`ceneo`	`all`
`challenger`	`all`
`chewy`	`all`
`choicehotels`	`all`
`chrono24`	`all`
`citymarket`	`product`; `categoría`
`continentalwigs`	`all`
`costco`	`products`; `categories (url)`
`crunchbase`	`all`
`csod`	`all`
`cuinsight`	`all`
`darty`	`all`
`davidyurman`	`all`
`dillons`	`product`; `categoría`
`dergahtesbih`	`all`
`dextools`	`all`
`didi-food`	`all`
`didongviet`	`all`
`displays2go`	`all`
`ebay`	`all`
`ecsc-expat`	`all`
`edaboard`	`all`
`elcajonmitsubishi`	`all`
`elcapitalfinanciero`	`all`
`electroplanet`	`all`
`eraspace`	`all`
`etsy`	`all`
`exchange4media`	`all`
`expedia`	`organic_requests`
`extendedstayamerica`	`all`
`facebook`	`marketplace`
`fedex`	`all`
`flooranddecor`	`all`
`fmkorea`	`all`
`fotocasa`	`all`
`food4less`	`product`; `categoría`
`foodsco`	`product`; `categoría`
`fredmeyer`	`product`; `categoría`
`frysfood`	`product`; `categoría`
`g2`	`all`
`gemini`	`all`
`gerbes`	`product`; `categoría`
`glassdoor`	`all`
`gnc`	`product`
`goflink`	`all`
`google`	`google_ai_mode`;`maps`
`gopuff`	`all`
`grainger`	`all`
`greggyoungcdjratlantic`	`all`
`grofers`	`all`
`grok`	`all`
`haldex`	`all`
`harristeeter`	`product`; `search`; `categoría`; `root`
`harrods`	`all`
`harveynorman`	`all`
`hasznaltauto`	`all`
`headtopics`	`all`
`homecare`	`all`
`homedepot`	`search`
`homehardware`	`all`
`hyatt`	`all`
`hydradynellc`	`all`
`icrimewatch`	`all`
`ifood`	`delivery`
`immobilienscout24`	`all`
`indeed`	`all`
`instagram`	`all`
`interdiscount`	`all`
`intermarche`	`all`
`itsynergy`	`all`
`janesvillevw`	`all`
`jaycfoods`	`product`; `categoría`
`jbhifi`	`all`
`jewelosco`	`product_pages`
`kaina24`	`all`
`kayak`	`all`
`kingsoopers`	`product`; `categoría`
`kroger`	`all`
`laprensagrafica`	`all`
`latamairlines`	`all`
`lazada`	`all`
`leboncoin`	`all`
`leclercdrive`	`all`
`lexusofatlanticcity`	`all`
`lifestyleasia`	`all`
`loblaws`	`all`
`loccitane`	`all`
`lowes`	`product`
`loyalty360`	`all`
`luisaviaroma`	`all`
`macys`	`marca`;`destacado`;`product`
`magazineluiza`	`product`
`marianos`	`product`; `categoría`
`master-outillage`	`all`
`mavs`	`all`
`mcmaster`	`all`
`medscape`	`all`
`menards`	`all`
`mercadolibre`	`all`
`metromarket`	`product`; `categoría`
`milatcikolata`	`all`
`mister-auto`	`all`
`neimanmarcus`	`all`
`norauto`	`all`
`nordstrom`	`all`
`oocl`	`all`
`openai` (`chatgpt`)	`all`
`ozon`	`all`
`pay-less`	`all`
`pedidosya`	`all`
`perplexity`	`all`
`petco`	`all`
`picknsave`	`product`; `categoría`
`pointp`	`all`
`powerbuy`	`all`
`pricerunner`	`all`
`printus`	`all`
`publix`	`all`
`qfc`	`product`; `categoría`
`radwell`	`all`
`ralphs`	`product`; `categoría`
`raptorsupplies`	`all`
`realadvisor`	`API`
`realestate`	`all`
`redfin`	`localización`
`reporteindigo`	`all`
`researchgate`	`PDF`
`reuters`	`all`
`ripley`	`product_pages`
`runnersneed`	`all`
`rvtrader`	`all`
`safeway`	`aisles`;`product_pages`;`search`
`sahibinden`	`all`
`saksfifthavenue`	`all`
`sbermarket`	`all`
`secure-hotel-booking`	`all`
`senheng`	`all`
`sephora`	`all`
`shaws`	`product_pages`
`shein`	`all`
`shi`	`all`
`shoppersdrugmart`	`all`
`similarweb`	`all`
`smappliance`	`all`
`smithsfoodanddrug`	`product`; `categoría`
`smythstoys`	`all`
`sobeys`	`all`
`sociolla`	`all`
`speedo`	`all`
`starmarket`	`product_pages`
`stockx`	`all`
`stupiddope`	`all`
`svastara`	`all`
`takealot`	`all`
`target`	`all`
`theaustralian`	`all`
`theiet`	`all`
`thenonprofittimes`	`all`
`thespaces`	`all`
`tiki`	`all`
`tiktok`	`all`;`search`;`usuario`
`tmall`	`all`
`tomthumb`	`product_pages`
`tractorsupply`	`search`
`trendyol`	`all`
`truckpaper`	`all`
`truclothing`	`all`
truepeoplesearch	`all`
`upwork`	`all`
`vimeo`	`all`
`vivadodgeramfiat`	`all`
`vons`	`all`
`wabco-customercentre`	`all`
`walmart`	`geo_location`; `search_with_video`
`watchfinder`	`all`
`weismarkets`	`orgánico`
`vino`	`all`
`winoui`	`all`
`wipo`	`all`
`worten`	`products`
`wyndhamhotels`	`all`
`yelp`	`all`
`zalando`	`all`
`zoro`	`all`

## Instrucciones del navegador Cuando una página necesita interacción, como hacer clic en un botón, introducir un término de búsqueda o desplazarse para cargar más elementos, puedes definir tus propias `browser_instructions` que se ejecutan mientras la página se renderiza. {% hint style="success" %} La forma más sencilla de crear instrucciones del navegador es el generador visual impulsado por IA en el [Web Scraper API Playground](https://dashboard.oxylabs.io/?route=/api-playground). Lee sobre ello [aquí](/products/es/web-scraper-api/web-scraper-api-playground/oxycopilot.md#browser-instruction-builder). {% endhint %} ### Inicio rápido En primer lugar, las instrucciones del navegador requieren el `render` parámetro, ya sea `html` o `png`, y se proporcionan como una lista en el `browser_instructions` campo. Cada elemento de la lista se ejecuta en orden. Digamos que quieres buscar `cajas de pizza` en un sitio web: escribe el término en el campo de búsqueda, haz clic en el botón de búsqueda y espera 5 segundos a que se carguen los resultados: ```json { "source": "universal", "url": "https://www.etsy.com/", "render": "html", "browser_instructions": [ { "type": "input", "value": "pizza boxes", "selector": { "type": "css", "value": "#global-enhancements-search-query" } }, { "type": "click", "selector": { "type": "css", "value": "button[data-id='gnav-search-submit-button']" } }, { "type": "wait", "wait_time_s": 5 } ] } ``` El resultado contiene el HTML después de que se ejecutaron las instrucciones: ```json { "results": [ { "content": " Search results for \"pizza boxes\" ", "created_at": "2026-08-19 12:23:06", "updated_at": "2026-08-19 12:23:24", "page": 1, "url": "https://www.etsy.com/search?q=pizza+boxes&ref=search_bar&instant_download=false", "job_id": "7495817623108602881", "is_render_forced": false, "type": "raw", "status_code": 200 } ] } ``` El HTML extraído debería verse así:

#### Obteniendo recursos del navegador Proporcionamos una instrucción de navegador independiente para obtener recursos del navegador. La función se define aquí: Usando `fetch_resource` hará que el trabajo devuelva la primera ocurrencia de un recurso Fetch/XHR que coincida con el formato proporcionado en lugar del HTML al que se dirige. Digamos que queremos apuntar a un recurso GraphQL que se obtiene cuando se visita orgánicamente una página de producto en el navegador. Proporcionaremos la información del trabajo así: ```json { "source": "universal", "url": "https://petstore.swagger.io/", "render": "html", "browser_instructions": [ { "type": "fetch_resource", "filter": "/v2/swagger.json" } ] } ``` Estas instrucciones darán como resultado un resultado como este: ```json { "results": [ { "content": "{\"swagger\":\"2.0\",\"info\":{\"description\":\"This is a sample server Petstore server. ...", "created_at": "2026-09-17 12:27:43", "updated_at": "2026-09-17 12:28:29", "page": 1, "url": "https://petstore.swagger.io/v2/swagger.json", "job_id": "7506328031753955329", "status_code": 200 } ], "job": {...} } ``` ## Lista de instrucciones del navegador compatibles ### Argumentos generales Todas las instrucciones definidas a continuación tienen un conjunto coherente de argumentos. Los argumentos son los siguientes. #### `tipo` * **Tipo**: `Enum["click", "input", "scroll", "scroll_to_bottom", "wait", "wait_for_element", "fetch_resource"]` * **Descripción:** Tipo de instrucción del navegador. * **Requerido**: `true` #### `timeout_s` * **Tipo**: `entero` * **Descripción:** Cuánto tiempo hasta que la acción se omite si no se completa a tiempo. * **Restricciones**: 0 < `timeout_s` <= 60 * **Valor predeterminado**: 5 #### `wait_time_s` * **Tipo**: `entero` * **Descripción:** Cuánto tiempo esperar antes de ejecutar la siguiente acción. * **Restricciones**: 0 < `wait_time_s` <= 60 * **Valor predeterminado**: 0 #### `on_error` * **Tipo**: `Enum["error", "skip"]` * **Descripción:** Indicador de qué hacer con las instrucciones en caso de que esta instrucción falle: * `"error"`: Detiene la ejecución de las instrucciones del navegador. * `"skip"`: Continúa con la siguiente instrucción. * **Valor predeterminado**: `"error"` #### Ejemplo con argumentos generales ```json { "type": "wait_for_element", "selector": { "type": "text", "value": "Load More Items" }, "timeout_s": 5, "wait_time_s": 2, "on_error": "skip" } ``` ### Instrucciones #### `click` * **Descripción**: Hace clic en un elemento y espera una cantidad establecida de segundos. * **Argumentos:** * `type: str = "click"` * `selector: dict` * `type: Enum["xpath", "css", "text"]` * `value: str` **Ejemplo**: ```json { "type": "click", "selector": { "type": "xpath", "value": "//button" } } ``` #### `input` * **Descripción**: Introduce texto en un elemento seleccionado. * **Argumentos:** * `type: str = "input"` * `selector: dict` * `type: Enum["xpath", "css", "text"]` * `value: str` * `value: str` **Ejemplo:** ```json { "type": "input", "selector": { "type": "xpath", "value": "//input" }, "value": "pizza boxes" } ``` #### `scroll` * **Descripción**: Desplaza una cantidad establecida de píxeles. * **Argumentos:** * `type: str = "scroll"` * `x: int` * `y: int` **Ejemplo:** ```json { "type": "scroll", "x": 0, "y": 100 } ``` #### `scroll_to_bottom` * **Descripción**: Desplaza hasta abajo durante una cantidad establecida de segundos. * **Argumentos:** * `type: str = "scroll_to_bottom"` **Ejemplo**: ```json { "type": "scroll_to_bottom", "timeout_s": 10 } ``` #### `wait` * **Descripción**: Espera una cantidad establecida de segundos. * **Argumentos:** * `type: str = "wait"` **Ejemplo**: ```json { "type": "wait", "wait_time_s": 2 } ``` #### `wait_for_element` * **Descripción**: Espera a que el elemento cargue durante una cantidad establecida de segundos. * **Argumentos:** * `type: str = "wait_for_element"` * `selector: dict` * `type: Enum["xpath", "css", "text"]` * `value: str` **Ejemplo:** ```json { "type": "wait_for_element", "selector": { "type": "text", "value": "Load More Items" }, "timeout_s": 5 } ``` #### `fetch_resource` {% hint style="warning" %} La `fetch_resource` instrucción debe ser la última instrucción en la lista de instrucciones del navegador; cualquier instrucción posterior no se ejecutará. {% endhint %} * **Descripción**: Obtiene la primera ocurrencia de un recurso Fetch/XHR que coincida con el patrón establecido. * **Argumentos:** * `type: str = "fetch_resource"` * `filter: str(expresión RegEx)` * `on_error: Enum["error", "skip"]` **Ejemplo:** ```json { "type": "fetch_resource", "filter": "/graphql/item/" } ``` ### Validación de instrucciones Cualquier inconsistencia respecto al formato de la instrucción dará como resultado un `400` código de estado y un mensaje de error correspondiente. Por ejemplo, una carga útil como esta: ```json { "source": "universal", "url": "https://www.example.com/", "render": "html", "browser_instructions": [ { "type": "unsupported-wait", "wait_time_s": 5 } ] } ``` Dará como resultado: ```json { "errors": { Tipo de acción no compatible `unsupported-wait`, elige entre 'click,fetch_resource,input,scroll,scroll_to_bottom,wait,wait_for_element' } } ``` ## Solución de problemas ### Códigos de estado Consulta nuestros códigos de respuesta detallados [**aquí**](/products/es/web-scraper-api/response-codes.md). Los códigos de estado relativos a la validación de instrucciones están documentados [**aquí**](#instruction-validation). ### Errores y advertencias Si hay un error o advertencia resultante de tus acciones de navegación, lo encontrarás en el resultado bajo las claves `browser_instructions_error` o `browser_instructions_warnings`. Por ejemplo, si has enviado las siguientes instrucciones del navegador y el `xpath` esperado no se encuentra en la página, el resultado incluirá una advertencia. `browser_instructions`: ```json [ { "type": "input", "selector": { "type": "xpath", "value": "//input[@type='search']" }, "value": "oxylabs" } ] ``` Resultados: ```json { "results": [ { "content": " Contenido después de ejecutar las instrucciones ", "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 } ] } ``` | Posibles errores y advertencias | | ----------------------------------------------------------------------------------------------------- | | Se produjo un error inesperado al convertir las instrucciones del navegador en acciones. | | Se produjo un error inesperado al ejecutar `{action.type}` instrucciones del navegador. | | Acción `{action.type}` agotó el tiempo. | | No se pudo encontrar el tipo de selector `{selector.type}` con valor `{selector.value}` en la página. | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://developers.oxylabs.io/products/es/web-scraper-api/features/js-rendering-and-browser-control.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.