Consejos para escribir expresiones XPath

Aprende a escribir expresiones XPath efectivas para Custom Parser con técnicas probadas y buenas prácticas que garantizan una extracción de datos precisa.

La estructura HTML puede diferir entre el documento extraído y el cargado en el navegador

Al escribir funciones de selección de elementos HTML, asegúrate de trabajar con documentos extraídos en lugar de la versión en vivo del sitio web cargada en tu navegador, ya que los documentos pueden diferir. La razón principal detrás de este problema es el renderizado de JavaScript. Cuando se abre un sitio web, tu navegador es responsable de cargar documentos adicionales, como hojas de estilo CSS y scripts de JavaScript, que pueden cambiar la estructura del documento HTML inicial. Al analizar HTMLs extraídos, Custom Parser no carga el documento HTML de la misma manera que lo hacen los navegadores (los analizadores ignoran las instrucciones de JavaScript), por lo tanto, el árbol HTML puede diferir entre lo que el analizador y el navegador renderizan.

Como ejemplo, observa el siguiente documento HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <h3>This is a product</h3>
        <div id="price-container">
            <p>This is the price:</p>
        </div>
        <p>And here is some description</p>
    </div>
    <script>
        const priceContainer = document.querySelector("#price-container");
        const priceElement = document.createElement("p");
        priceElement.textContent = "123";
        priceElement.id = "price"
        priceContainer.insertAdjacentElement("beforeend", priceElement);
    </script>
</body>
</html>

Si abres el documento mediante el navegador, mostrará el precio que puedes seleccionar usando la siguiente expresión XPath //p[@id="price"]:

Ahora, si deshabilitas el renderizado de JavaScript en el navegador, el sitio web se renderizará de la siguiente manera:

La misma //p[@id="price"] La expresión XPath ya no coincide con el precio ya que no está renderizado.

Asegúrate de escribir todos los posibles selectores HTML para el elemento objetivo

Por varias razones, la misma página extraída dos veces puede tener diseños diferentes (diferentes User-Agent usados al extraer, el sitio objetivo realizando pruebas A/B, etc.).

Para abordar este problema, sugerimos definir parsing_instructions para el documento extraído inicialmente y probar estas instrucciones de inmediato con múltiples otros resultados de trabajos extraídos del mismo tipo de página.

Funciones de selector HTML (xpath/xpath_one) admiten selectores de reserva.

Flujo sugerido para escribir selectores HTML

Extrae el documento HTML de la página objetivo usando Scraper API.
Deshabilita JavaScript y abre el HTML extraído localmente en tu navegador. Si JavaScript está deshabilitado después de que se abra el HTML, asegúrate de recargar la página para que el HTML pueda recargarse sin JavaScript.
Usa las herramientas de desarrollador del navegador.

Cómo escribir instrucciones de análisis

Supongamos que tienes la siguiente página para analizar:

`<!doctype html>
<html lang="en">
<head></head>
<body>
<style>
.variant {
  display: flex;
  flex-wrap: nowrap;
}
.variant p {
  white-space: nowrap;
  margin-right: 20px;
}
</style>
<div>
    <h1 id="title">This is a cool product</h1>
    <div id="description-container">
        <h2>This is a product description</h2>
        <ul>
            <li class="description-item">Durable</li>
            <li class="description-item">Nice</li>
            <li class="description-item">Sweet</li>
            <li class="description-item">Spicy</li>
        </ul>
    </div>
    <div id="price-container">
        <h2>Variants</h2>
        <div id="variants">
            <div class="variant">
                <p class="color">Red</p>
                <p class="price">99.99</p>
            </div>
            <div class="variant">
                <p class="color">Green</p>
                <p class="price">87.99</p>
            </div>
            <div class="variant">
                <p class="color">Blue</p>
                <p class="price">65.99</p>
            </div>
            <div class="variant">
                <p class="color">Black</p>
                <p class="price">99.99</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Analizar el título del producto

Crea un nuevo objeto JSON y asígnale un nuevo campo.

Puedes nombrar el campo como prefieras con algunas excepciones (el nombre de campo definido por el usuario no puede comenzar con un guion bajo _ , p. ej., "_title").

El nombre del campo se mostrará en el resultado analizado.

El nuevo campo debe contener un valor de tipo objeto JSON:

{
    "title": {}  // defining a title field to be parsed
}

Si proporcionas estas instrucciones a Custom Parser, no hará nada o enviará una queja de que no has proporcionado ninguna instrucción.

Para realmente analizar el título en el campo title debés definir una canalización de procesamiento de datos dentro del objeto title usando la propiedad reservada _fns (que siempre es de tipo array):

{
    "title": {
        "_fns": []  // defining data processing pipeline for the title field
    }
}

Para que Custom Parser seleccione el texto del título, puedes utilizar la función de selector HTML xpath_one. Para usar la función en el documento HTML, debe agregarse a la canalización de procesamiento de datos. La función se define como un objeto JSON con _fn (nombre de la función) y _args (argumentos de la función) obligatorios. Consulta la lista completa de definiciones de funciones aquí.

{
    "title": {
        "_fns": [
            {
                "_fn": "xpath_one",
                "_args": ["//h1/text()"]
            }
        ]
    }
}

Las instrucciones de análisis anteriores deberían producir el siguiente resultado:

{
    "title": "This is a cool product"
}

Analizar la descripción

De manera similar, en las instrucciones de análisis, puedes definir otro campo donde se analizarán el contenedor de la descripción del producto, el título de la descripción y los ítems. Para que el título y los ítems de la descripción estén anidados bajo el objeto description la estructura de las instrucciones debe ser la siguiente:

{
    "title": {...},
    "description": { // description container
        "title": {}, // description title
        "items": {} // description items
    } 
}

La estructura dada de las instrucciones de análisis implica que description.title y description.items se analizarán basándose en el description elemento. Puedes definir una canalización para el campo description En este caso, se hace primero ya que simplificará la expresión XPath del título de la descripción.

{
    "title": {...},
    "description": {
        "_fns": [
            {
                "_fn": "xpath_one",
                "_args": ["//div[@id='description-container']"]
            }
        ],  // Pipeline result will be used when parsing `title` and `items`.
        "title": {},
        "items": {}
    }
}

En el ejemplo, la canalización description._fns seleccionará el elemento HTML description-container que se utilizará como punto de referencia para analizar el título y los ítems de la descripción.

Para analizar los campos restantes de la descripción, agrega dos canalizaciones diferentes para los campos description.items, y description.title:

{
    "title": {...},
    "description": {
        "_fns": [
            {
                "_fn": "xpath_one",
                "_args": [
                    "//div[@id='description-container']"
                ]
            }
        ],
        "title": {
            "_fns": [
                {
                    "_fn": "xpath_one",
                    "_args": [
                        "//h2/text()"
                    ]
                }
            ]
        },
        "items": {
            "_fns": [
                {
                    "_fn": "xpath",
                    "_args": [
                        "//li/text()"
                    ]
                }
            ]
        }
    }
}

Observa cómo la xpath se usa la función en lugar de xpath_one para extraer todos los elementos que coinciden con la expresión XPath.

Las instrucciones de análisis producen el siguiente resultado:

{
    "title": {...},
    "description": {
        "title": "This is description about the product",
        "items": [
            "Durable",
            "Nice",
            "Sweet",
            "Spicy"
        ]
    }
}

Analizar variantes de producto

El siguiente ejemplo muestra la estructura de instrucciones si deseas analizar información en el campo product_variants que contendrá una lista de objetos de variantes. En este caso, el objeto variante tiene los campos precio y color y precio.

{
    "title": {...},
    "description": {...},
    "product_variants": [
        {
            "price": ...,
            "color": ...
        },
        {
            ...
        },
        ...
    ]
}

Comienza seleccionando todos los elementos de variantes de producto:

{
    "title": {...},
    "description": {...},
    "product_variants": {
        "_fns": [
            {
                "_fn": "xpath",
                "_args": ["//div[@class='variant']"]
            }
        ]
    }
}

Para hacer de product_variants una lista que contenga objetos JSON, tendrás que iterar a través de las variantes encontradas usando _items iterator:

{
    "title": {...},
    "description": {...},
    "product_variants": {
        "_fns": [
            {
                "_fn": "xpath",
                "_args": ["//div[@class='variant']"]
            }
        ],
        "_items": { // con esto, estás instruyendo procesar los elementos encontrados uno por uno
            // aquí se describirán las instrucciones de los campos
        } 
    }
}

Por último, define instrucciones sobre cómo analizar los campos color y precio y:

{
    "title": {...},
    "description": {...},
    "product_variants": {
        "_fns": [
            {
                "_fn": "xpath",
                "_args": [
                    "//div[@class='variant']"
                ]
            }
        ],
        "_items": {
            "color": {
                "_fns": [
                    {
                        "_fn": "xpath_one",
                        "_args": [
                            // Como estamos usando expresiones XPath relativas,
                            // asegúrate de que XPath comience con un punto (.)
                            ".//p[@class='color']/text()"
                        ]
                    }
                ]
            },
            "price": {
                "_fns": [
                    {
                        "_fn": "xpath_one",
                        "_args": [
                            ".//p[@class='price']/text()"
                        ]
                    }
                ]
            }
        }
    }
}

Con product_variants descrito, las instrucciones finales se verán de la siguiente manera:

{
    "title": {
        "_fns": [
            {
                "_fn": "xpath_one",
                "_args": [
                    "//h1/text()"
                ]
            }
        ]
    },
    "description": {
        "_fns": [
            {
                "_fn": "xpath_one",
                "_args": [
                    "//div[@id='description-container']"
                ]
            }
        ],
        "title": {
            "_fns": [
                {
                    "_fn": "xpath_one",
                    "_args": [
                        "//h2/text()"
                    ]
                }
            ]
        },
        "items": {
            "_fns": [
                {
                    "_fn": "xpath",
                    "_args": [
                        "//li/text()"
                    ]
                }
            ]
        }
    },
    "product_variants": {
        "_fns": [
            {
                "_fn": "xpath",
                "_args": [
                    "//div[@class='variant']"
                ]
            }
        ],
        "_items": {
            "color": {
                "_fns": [
                    {
                        "_fn": "xpath_one",
                        "_args": [
                            ".//p[@class='color']/text()"
                        ]
                    }
                ]
            },
            "price": {
                "_fns": [
                    {
                        "_fn": "xpath_one",
                        "_args": [
                            ".//p[@class='price']/text()"
                        ]
                    }
                ]
            }
        }
    }
}

Lo cual producirá la siguiente salida:

{
    "title": "This is a cool product",
    "description": {
        "title": "This is a product description",
        "items": [
            "Durable",
            "Nice",
            "Sweet",
            "Spicy"
        ]
    },
    "product_variants": [
        {
            "color": "Red",
            "price": "99.99"
        },
        {
            "color": "Green",
            "price": "87.99"
        },
        {
            "color": "Blue",
            "price": "65.99"
        },
        {
            "color": "Black",
            "price": "99.99"
        }
    ]
}

Puedes encontrar más ejemplos de instrucciones de análisis aquí: Ejemplos de instrucciones de análisis.

AnteriorEjemplos de instrucciones de parsing SiguienteLista de funciones de parsing

Última actualización hace 3 meses

¿Te fue útil?

Buenas tardes

hashtagLa estructura HTML puede diferir entre el documento extraído y el cargado en el navegador

hashtagAsegúrate de escribir todos los posibles selectores HTML para el elemento objetivo

hashtagFlujo sugerido para escribir selectores HTML

hashtagCómo escribir instrucciones de análisis

hashtagAnalizar el título del producto

hashtagAnalizar la descripción

hashtagAnalizar variantes de producto