Om XPath

XPath är en mekanism för att identifiera noder och attributvärden i XML. HTML uttrycks i XML-format.

Vid t.ex. testautomatisering av webbsidor är det vanligt att man identifierar element att interagera med genom att använda XPath-uttryck. Det är då viktigt att bygga bra XPath för att slippa krävande underhåll när saker ändras på sidan.

Termer

Tag-namn

I HTML används olika typer av element i en hierarki av underobjekt med föräldrar. Objektets typ kallas för dess tag.

Exempel på tag-namn syns i blått i bilden nedan.

Attributnamn och attributvärden

Elementen i HTML förses med attribut. Dessa har vanligen både attribut-namn (i blått nedan) och attribut-värde (i grönt nedan).

Vanliga attribut är t.ex. id (som används för att identifiera element då varje id ska vara unikt värde på en sida) eller class (som används för att identifiera flera element som har gemensamma egenskaper) eller aria (som används för att förse tillgänglighetsverktyg med extra data)

Text, innerHTML

Den text som syns på en webbsida ligger som innerHTML för ett objekt. Denna kan genom XPath användas som filter.

Mer om XPath

Ovanstående är blott en grundläggande XPath-funktionalitet. Det finns mycket mer att utforska.

AND, OR och parenteser

Med hjälp av att gruppera med parenteser och använda logiska uttryck som AND eller OR kan man göra mer komplexa filter.

Alternativa element

Ibland är det värdefullt att kunna ange alternativa element. Gör man det får man tillbaka dessa i en lista utifrån vilken ordning man angivit dessa.

Alternativa element anges med pipe-tecknet: |.

Klättra omkring i DOM-trädet

Det mest användbara av allt i XPath är att identifiera ett element säkert och sedan använda detta för att identifiera dess föräldrar, eller något sibbling-element, något child-element eller någon descendant till detta element.

Man klättrar runt i DOM-trädet med en syntax snarlik den som används för att ange sökvägar i ett filträd:

Begrepp	Betydelse
../	Upp en nivå från detta element
/	En nivå ner från detta element
//	Hur många nivåer som helst ner från detta element

På detta sätt kan man bygga ihop sökvägar med utgångspunkt från ett element till ett annat element:

Testa XPaths redan i webbläsaren

Om man i webbläsaren öppnar utvecklarverktygen (F12) och går till fliken consol/konsol kan man testa XPath-uttryck redan på en sida. Det gör man genom att skriva:$x('mittXpath') där givetvis mittXpath är ersatt av det XPath-uttryck du vill testa. När du sedan trycker ENTER så returneras de element som matchar ditt XPath-uttryck.

Det finns också gott om webbläsar-plugins för att testa XPaths.

Vanliga problem

Listor vs element - och attribut

About XPath

XPath is a mechanism for identifying nodes and attributes in XML. HTML is expressed in XML format.

For example, in test automation of web pages it's common to identify element to interact with throuh XPaths. It's important to create good XPaths to avoid tedious test automation script maintenance.

Terms

Tag name

In HTML a hierarchy of elements are used. Each element has a type name. This is called the element tag.

Sample element tag names may be seen in blue in the picture below.

Attribute name and attribute value

The elements in HTML may carry attributes with additional information. Most attributes consist of both an attribute name (in blue below) and a attribute value (in green below).

Common attributes include e.g. id (used to uniquely identify elements since only one element with a specific element is allowed on each page), class (used to identify multiple elements with shared behaviour or properties), or

aria

(used by screen readers).

Text, innerHTML

The visible text of HTML elements reside in the innerHTML of an element. Through the use of XPath the text may be used as filter.

More about XPath

The XPath generator utility above only include the most basic XPath functionality. There's a lot more to explore.

AND, OR, and parenthesis

With the help of grouping logical operators with parentheses you may form more complex filters.

There's also a possibility to negate, and use logical operators like OR, and AND.

Alternative elements

Sometimes it's valuable to be able to include fallback elements in your XPath expression.

Alternative elements are expressed with the pipe sign: |.

Navigating the DOM hierarchy

The most useful of all in XPath is the possibility to identify one element solidly and use this as a base to climb around from it in the DOM tree to identify other elements. This makes it easy to identify child elements, parents, sibblings, ancestor elements, and nodes among descendant elements.

Climbing the DOM tree is done with a syntax similar to the file tree navigation syntax:

Term	Meaning
../	Up one level from this element
/	One level down from this element
//	Any number of levels down from this element

Testing your XPaths in your web browser

If you open the Developer Tools in a web browser (F12) and open the Console tab you may try your XPath expressions out on a page. You do this by writing $x('myXpath') where myXpath is substituted with your actual XPath expression. When you press ENTER the matching nodes are returned. Hovering these highlights them.

A lot of web browser plugins to test XPath expressions also exist.

Common problems

Lists vs elements - and attributes