circle-check
Documentation has been updated: see help center and changelog in one place.
search
Oxylabs dashboardContact us

Tips for writing XPath expressions

Learn how to write effective XPath expressions for Custom Parser with proven techniques and best practices that ensure accurate data extraction.

hashtag
HTML structure may differ between scraped and browser-loaded document

When writing HTML element selection functions, make sure to work with scraped documents instead of live website version loaded on your browser, as the documents can differ. The main reason behind this issue is JavaScript rendering. When a website is opened, your browser is responsible for loading additional documents, such as CSS stylesheets and JavaScript scripts, which can change the structure of the initial HTML document. When parsing scraped HTMLs, Custom Parser does not load the HTML document the same way browsers do (parsers ignore JavaScript instructions), thus the HTML tree can differ between what the parser and browser render.

As an example, take a look at the following HTML document:

<!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>

If you open the document via browser, it will show the price you can select using the following XPath expression //p[@id="price"]:

Now if you disable JavaScript rendering in the browser, the website will render as follows:

The same //p[@id="price"] XPath expression no longer matches the price as it is not rendered.

hashtag
Make sure to write all possible HTML selectors for the target element

For various reasons, the same page scraped twice may have different layouts (different User Agents used when scraping, target website doing A/B testing, etc.).

To tackle this problem, we suggest defining parsing_instructions for the initially scraped document and testing these instructions right away with multiple other scraped job results of the same page type.

HTML selector functions (xpath/xpath_one) support selector fallbacks.

hashtag
Suggested HTML selector writing flow

  1. Scrape the HTML document of the target page using Scraper API.

  2. Disable JavaScript and open the scraped HTML locally on your browser. If JavaScript is disabled after the HTML is opened, make sure to reload the page so that the HTML can reload without JavaScript.

  3. Use browser dev toolsarrow-up-right.

hashtag
How to write parsing instructions

Let's say you have the following page to parse:

hashtag
Parse product title

Create a new JSON object and assign a new field to it.

You can name the field any way you prefer with some exceptions (user-defined field name cannot start with an underscore _ , e.g., "_title").

The field name will be displayed in the parsed result.

The new field must hold a value of JSON object type:

If you provide these instructions to Custom Parser, it would do nothing or send a complaint that you haven’t provided any instructions.

To actually parse the title into the title field, you must define a data processing pipeline inside of the title object using the reserved _fns property (which is always of array type):

For Custom Parser to select the text of the title, you can utilize the HTML selector function xpath_one. To use the function on the HTML document, it should be added to the data processing pipeline. The function is defined as a JSON object with required _fn (function name) and required _args (function arguments) fields. See the full list of function definitions here.

The parsing instructions above should produce the following result:

hashtag
Parse description

Similarly, in parsing instructions, you can define another field where the product description container, description title, and items will be parsed. For the title and the items of the description to be nested under the description object, the structure of instructions should be as follows:

The given structure of parsing instructions implies that description.title and description.items will be parsed based on description element. You can define a pipeline for the description field. In this case, it's done first as it will simplify the XPath expression of the title of the description.

In the example, the description._fns pipeline will select the description-container HTML element, which will be used as a reference point for parsing the description title and items.

To parse the remaining description fields, add two different pipelines for fields description.items, and description.title:

Notice how the xpath function is used instead of xpath_one to extract all items that match the XPath expression.

The parsing instructions produce the following result:

hashtag
Parse product variants

The following example shows the structure of instructions if you want to parse information into product_variants field, which will contain a list of variant objects. In this case, the variant object has price and color fields.

Start with selecting all product variant elements:

To make product_variants a list containing JSON objects, you will have to iterate through found variants using _items iterator:

Lastly, define instructions on how to parse the color and price fields:

With product_variants described, the final instructions will look as follows:

Which will produce the following output:

You can find more examples of parsing instructions here: Parsing instruction examples.

PreviousParsing instruction examplesNextList of parsing functions

Last updated

Was this helpful?