Ksolis at 02:32, 4 October 2017

2017-10-04T02:32:14Z

New page

[[Category:course_code_xmlfund]]
[[Category:XML]]
[[Category:XPath]]
[[File:Nobleprog.svg]]

<div class="np_frontpage_footer"> <p>Copyright © 2015 NobleProg™. All Rights Reserved. www.nobleprog.us</p></div>

{{PB}}



{{PB}}

=Introduction=
*XPath is used to navigate through elements and attributes in an XML document
*HTML is roughly a subset of XML
*XPath can select elements or element sets in an HTML document
::The expressions are similar to specifying a path in a file system
::Generally the purpose of XPath is to allow the user to select a single element or a set of elements

=Terminology=
*See reference [http://www.w3schools.com/xsl/xpath_nodes.asp XPath Terminology]
::Nodes - nodes are in parent child relationships (a tree of nodes)
::Elements - <a href="xxx">Click this Link</a> is an element node
::Attributes - value="Bike" and href="xxx" are attribute nodes
::Text
::Namespace
::Processing-Instruction
::Comment 
::Document

=Node Selection=
*Useful path expressions
<pre style="color:blue;background-color:lightgrey">
nodename - selects all nodes with the name "nodename"
/ - selects from the root node
// - selects nodes from the current node that match the selection
. - selects the current node
.. - selects the parent of the current node
@ - selects attributes
</pre>

*XPath contains a set of Node Tests which when satisfied chooses the node

<pre style="color:blue;background-color:lightgrey">
comment() - Selects nodes that are comments.
node() - Selects nodes of any type.
processing-instruction() - Selects nodes that are processing instructions. You can specify
which processing instruction to select by providing it's name in
the parentheses. These are generally in xml documents
text() - Selects a text node.
</pre>
=Predicates=
:::Used to find a specific node once a path expression is specified
:::Predicates are placed within braces []
:::Positional Predicates have numbers, last() or position() within the braces []

:::Examples of node selection with predicates
<pre style="color:blue;background-color:lightgrey">
//input[@value='Bike'] - get the input element with an attribute of Bike
//a[@href="www.google.com"] - the "a" element (the link) with an href attribute of www.google.com
//img[@src="images/carved bowl.jpg"] - get the img element with a src attribute of images/carved bowl.jpg
//div[@style="color:red"]/text() - get the text within the div tag that has attribute style="color:red"
//div[@style="color:red" and @height="80"]/text()- get the text within the div tag for the two attributes specified
//img[1] - get the first img tag on the page
//img[last()] - get the last img tag on the page
//img[position()<3] - get the first two img tags on the page
//ul[@class="headline-list__list js-split-list js-add-p1"]/li[@class="headline-list__item"][2]/a
</pre>

=XPath Paths=
*Path elements are separated by a slash /

://body/div[@style='color:red'] - from the root find body with a div where style='color:red'
://body/input - find all input elements that are children of the body element

=Wildcards=
*Wildcards allows several elements to be chosen at the same time
<pre style="color:blue;background-color:lightgrey">
* - matches and element node
@* - matches any attribute node
node() - matches any node of any kind
</pre>

:Examples of wildcard use
<pre style="color:blue;background-color:lightgrey">
//*[@height="80"] - all nodes that have a height attribute set to 80
//*[@src="images/carved bowl.jpg"] - any node that has a src attribute of images/carved bowl.jpg
//div[@*] - any div tag that has an attribute of any kind
</pre>

=Selecting Several Paths=
*To select several nodes with varying paths
::Use the | operator between the path expressions
:::For example /book/title | //book/price

=XPath Axes=

*An axes defines a set of nodes with respect to the present node
<pre style="color:blue;background-color:lightgrey">
ancestor - selects all ancestors of the current node
ancestor-or-self - selects ancestors and the current node itself
attribute - selects all attributes of the current node
child - selects all child nodes of the current node
descendant - selects all descendants of the current node children, grandchildren, etc.
descendant-or-self - selects all descendants and the node itself
following - selects everything in the document after the closing tag of the current node
following-sibling - selects all following siblings of the current node
namespace - selects all namespace nodes of the current node
parent - selects the parent of the current node
preceding - selects the nodes in the document before the current node, excluding ancestors,
attributes, and namespaces
preceding-sibling - selects all siblings before the current node
self - selects the current node
</pre>

*Examples of Axes Use

<pre style="color:blue;background-color:lightgrey">
//div[@style="color:red" and @height="80"]/attribute::style - select the style attribute of the div tag
//img/attribute::src - select the src attribute of all the image tags
//img[last()]/following::a - find the "a" tag (the link) that follows the last image tag in the page
</pre>

=XPath Functions=
*XPath has a significant number of functions that are available.
::See reference [http://www.w3schools.com/xpath/xpath_functions.asp XPath Functions]

*Examples of Functions use
<pre style="color:blue;background-color:lightgrey">
//div[contains(text(),'Some')] - find a div tag where the text starts with 'Some'
//input[starts-with(@id, 'text-')] - find an input tag where the id starts with 'text-'
</pre>

=XPath Hands on Exercise=
:<big><span style="color:#FF0000">Hands on Exercise</span></big>
::In this exercise use the XPath tester at [http://www.freeformatter.com/xpath-tester.html XPath Tester]
::Go to the XPath Tester and put the following HTML code into the tester
:::Note that his code has been corrected slightly so that it is valid XML
:::For example the meta tag on line 3 has had a slash added before the final >
<pre style="color:blue;background-color:khaki">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>Text Image and Video Demo</title>
</head>
<body>
<div style="color:red"> this is it</div>
<div>This is the divs tag's contents</div>
<a href="seleniumTest.jsp">back to main page</a>
<br/><br/>
North America is a continent wholly within the Northern Hemisphere and almost wholly within
the Western Hemisphere. It can also be considered a northern subcontinent of the Americas.[1]
It is bordered to the north by the Arctic Ocean, to the east by the Atlantic Ocean, to the west
and south by the Pacific Ocean, and to the southeast by South America and the Caribbean Sea.

North America covers an area of about 24,709,000 square kilometers (9,540,000 square miles),
about 4.8% of the planet's surface or about 16.5% of its land area. As of 2013, its population
was estimated at nearly 565 million people across 23 independent states, representing about 7.5%
of the human population. Most of the continent's land area is dominated by Canada, the United States,
Greenland, and Mexico, while smaller states exist in the Central American and Caribbean regions.
North America is the third largest continent by area, following Asia and Africa,[2] and the fourth
by population after Asia, Africa, and Europe.[3]

The first people to live in North America were Paleoindians who began to arrive during the last
glacial period by crossing the Bering land bridge. They differentiated into a number of diverse
cultures and communities across the continent. The largest and most advanced Pre-Columbian
civilizations in North America were the Aztecs in what is now Mexico and the Maya in Central
America. European colonists began to arrive starting in the 16th and 17th centuries, wiping out
large numbers of the native populations and beginning an era of European dominance.
<br/><br/>
<iframe width="640" height="360" src="https://www.youtube.com/embed/PEtz0twft2U?feature=player_detailpage"
frameborder="0" allowfullscreen="true"></iframe><br/><br/>
<iframe width="640" height="360" src="https://www.youtube.com/embed/PEtz0twft2U?feature=player_detailpage"
frameborder="0" allowfullscreen="true"></iframe><br/><br/>
<iframe width="640" height="360" src="https://www.youtube.com/embed/OnzZye5tGdY?feature=player_detailpage"
frameborder="0" allowfullscreen="true"></iframe>
<br/><br/>
<img src="images/bowl.jpg" alt="Bowl with filigree" height="80" width="100"/>
<img src="images/bluebowl.jpg" alt="Bowl with filigree" height="80" width="100"/>
<img src="images/bowl with glass.jpg" alt="Bowl with filigree" height="80" width="100"/>
<img src="images/carved bowl.jpg" alt="Bowl with filigree" height="80" width="100"/>
<br/><br/>
<a href="seleniumTest.jsp">back to main page</a>
</body>
</html>
</pre>

::Find the XPath expressions that will find the following elements
::*All iframes on the page
::*The image with a source file of images/bluebowl.jpg
::*Any div tags on the page
::*All image tags on the page
::*The text contents of the div tag with an attribute

:<big>References:</big>
::: [http://www.w3schools.com/xsl/xpath_intro.asp XPath Tutorial]
::: [http://www.quackit.com/xml/tutorial/xpath_introduction.cfm Another XPath Tutorial]
::: [http://www.tutorialspoint.com/xpath/ A third XPath Tutorial]
::: [http://www.freeformatter.com/xpath-tester.html XPath Tester]
::: [http://www.xpathtester.com/xpath XPath Tester (Another one, previous one seems better)]

XPath Primer - Revision history

Ksolis at 02:32, 4 October 2017