Basic XPath

Basic Understanding of XPath

1. What is XPath

XPath (XML Path Language) is a syntax for specifying particular parts of an XML document. HTML can also use XPath to specify elements. In akaBot, XPath is used to specify UI (User Interface) elements to be operated on in activities related to browser operations.

2. XPath Syntax

XPath treats an XML document as a tree and can specify the positions of elements and attributes. It is written by connecting elements with a "/" similar to a URL. Let's obtain the XPath of an existing page and look at the syntax.

Obtaining XPath in Google Chrome

Using the "Developer Tools" built into Chrome, we will obtain the XPath that specifies the "Knowledge Base" part on the akaBot Portal site.

1. Open the top page of the akaBot Portal in Chrome.

2. Right-click on the "Knowledge Base" section, and click "Inspect" from the context menu.

3. The "Developer tools" will be displayed, and the element of the "Knowledge Base" part will be highlighted in blue. Right-click on the highlighted part.

4. Click "Copy" > "Copy XPath". This will copy the XPath to the clipboard.

Note: In this example, it is displayed on the right side of the browser, but depending on the settings, the Developer Tools may be displayed on the left side, bottom, or in a separate window. If you want to display it on the right side of the browser, click on the (Customize and control DevTools) in the top right of the Developer Tools, and click "Dock side" > "Dock to bottom" icon.

Checking the Obtained XPath

Using Notepad or other text editors, let's check the XPath obtained in the clipboard.

bash

Copy code

//*[@id="custom-blocks"]/div/div/div[2]/a

This XPath is a simplified notation. XPath treats HTML documents as a tree structure and specifies positions by connecting elements with "/". The "Knowledge Base" element, when described from the root of this page, is as follows:

css

Copy code

/html/body/div[2]/div[1]/div/div/div[2]/a

This means "the a element inside the second div under the body element directly under the html element," and so on.

Note: You can also obtain a non-simplified XPath using the Developer Tools. The method is to select "Copy" > "Copy full XPath" instead of "Copy" > "Copy XPath".

Let's look at the syntax of the simplified XPath.

• //*[@id="custom-blocks"]/div/div/div[2]/a
  • // means descendant elements, and * means all child elements. //* means "all elements in the document".
  • @ is the prefix for attribute names and is used to specify attributes associated with elements. = is the equal operator (not assignment). The brackets [ ] are used to write conditions. This part specifies "elements with the id attribute of 'custom-blocks'".
  • / means the direct child element, specifying "the div element directly under the element written before '/'".

The obtained XPath //*[@id="custom-blocks"]/div/div/div[2]/a specifies "the a element surrounded by the div element directly under the element with the id attribute of 'custom-blocks'".