XPath is a powerful language for finding and processing elements in HTML and XML documents. It allows you to select elements based on attributes, classes, and other characteristics. In this guide, we will review the main XPath constructs, as well as some practical examples for better understanding.

Basic XPath Constructs

Selecting Elements by Class Attribute

Example:

Suppose we have the following HTML:

<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_disable"></div>
<div class="style_taskCard style_box"></div>
<div class="style_disable"></div>

XPath Query:

• Query: //div[contains(@class, "style_taskCard")]
• Result: Selects all div elements whose class attribute contains style_taskCard.

Result:

<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_disable"></div>
<div class="style_taskCard style_box"></div>

Excluding Elements with a Specific Class

Example:

Now, if we want to exclude elements with the class style_disable:

XPath Query:

• Query: //div[contains(@class, "style_taskCard")][not(contains(@class, "style_disable"))]
• Result: Selects all div elements whose class attribute contains style_taskCard but does not contain style_disable.

Result:

<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_box"></div>

Advanced XPath Capabilities

Finding Elements with Multiple Conditions

Example: Consider the following HTML:

<div attr-id="1" id="2" class="gena style_box"></div>
<div attr-id="1" id="3" class="gena style_box"></div>
<div attr-id="2" id="2" class="gena style_disable"></div>
<div attr-id="1" id="2" class="style_taskCard style_box"></div>

XPath Query:

Query: //div[contains(@attr-id, "1")][contains(@id, "2")] Result: Selects all div elements where attr-id contains 1 and id contains 2.

Result:

<div attr-id="1" id="2" class="gena style_box"></div>
<div attr-id="1" id="2" class="style_taskCard style_box"></div>

Excluding Elements with Additional Class

Example: Now, we want to exclude elements with the class style_disable, while still requiring them to have the classes style_taskCard and style_box.

<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_disable"></div>
<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_active style_box"></div>
<div class="style_taskCard style_active style_disable"></div>
<div class="style_taskCard style_disable"></div>

XPath Query:

Query: //div[contains(@class, "style_taskCard")][contains(@class, "style_box")][not(contains(@class, "style_disable"))]

Result: This query will select only those elements that contain both classes style_taskCard and style_box, but do not contain the class style_disable.

Result:

<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_active style_box"></div>

Clarification on Additional Class for Active State

Example:

Imagine there are elements on the page with the class style_taskCard, and we need to find only those that simultaneously have the classes style_box and style_active.

<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_disable"></div>
<div class="style_taskCard style_box"></div>
<div class="style_taskCard style_active style_box"></div>
<div class="style_taskCard style_active style_disable"></div>
<div class="style_taskCard style_disable"></div>

XPath Query:

Query:

//div[contains(@class, "style_taskCard")][contains(@class, "style_box")][contains(@class, "style_active")]

Result: This query will select only those elements that have all three classes: style_taskCard, style_box, and style_active.

Result:

<div class="style_taskCard style_active style_box"></div>

Practical Examples

Working with Attributes

Example:

Suppose we have the following HTML:

<span class="FontBold">Text 1</span>
<span class="FontBold Highlight">Text 2</span>
<span class="FontItalic">Text 3</span>

XPath Query:

Query: //span[contains(@class, "FontBold")]

Result: Selects all spans that have FontBold in the class attribute.

Result:

<span class="FontBold">Text 1</span>
<span class="FontBold Highlight">Text 2</span>

Selection by Specific Attribute Value

Example:

Consider the following HTML:

<div data-role="admin"></div>
<div data-role="user"></div>
<div data-role="guest"></div>
<div data-role="admin"></div>

XPath Query:

Query: //div[@data-role="admin"]

Result: Selects all div elements with the data-role attribute equal to admin.

Result:

<div data-role="admin"></div>
<div data-role="admin"></div>

In XPath, you can work with any attributes, not just standard ones like class or id. Attributes can be arbitrary and contain any values. Here are some examples of working with such attributes:

Example: Consider the following HTML:

<div attr-id="1" attr-name="item1" role="admin" code="123"></div>
<div attr-id="2" attr-name="item2" role="user" code="456"></div>
<div attr-id="3" attr-name="item3" role="guest" code="789"></div>
<div attr-id="4" attr-name="item4" role="admin" code="000"></div>

XPath Queries:

Selection by attr-id attribute:

//div[@attr-id="1"]

Result:

<div attr-id="1" attr-name="item1" role="admin" code="123"></div>

Selection by attribute role:

//div[@role="admin"]

Result:

<div attr-id="1" attr-name="item1" role="admin" code="123"></div> <div attr-id="4" attr-name="item4" role="admin" code="000"></div>

Selection by multiple attributes:

//div[@role="admin"][contains(@code, "123")]

Result:

<div attr-id="1" attr-name="item1" role="admin" code="123"></div>

Attributes can be arbitrary and set in any format, so XPath allows for flexible selection of elements based on any conditions.

Conclusion

These examples show how XPath can be used to find elements in HTML documents, including selecting elements by attributes, excluding elements, and combining conditions. Scenarios where it is necessary to refine the selection using additional classes are also covered, making XPath a powerful tool for working with web pages.

This tutorial will help you better understand and use XPath for solving various tasks. If you have any additional questions or need to add something, I am always ready to help!