Skip to content

Commit a1d8163

Browse files
authored
Merge pull request #19 from jetbrains-academy/stephen-hero-patch-11
Update task.md
2 parents 6250abe + 9e2f838 commit a1d8163

File tree

1 file changed

+20
-20
lines changed
  • introduction/finding_elements/finding elements with XPath

1 file changed

+20
-20
lines changed

introduction/finding_elements/finding elements with XPath/task.md

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<h2>Finding elements with XPath</h2>
22

3-
<p>When working with web pages, we can't always find a selector unambiguously describing the path to the required element. In such cases, the best solution would be talking to the front-end developer of the project and agree on a special attribute that will be used in automated tests. This way, you can increase the testability of the application. However, projects vary, and it's not always possible to do that. When there is no other solution for automating your tests, you can use the&nbsp;<strong>XPath</strong> query language.</p>
3+
<p>When working with web pages, we can't always find a selector unambiguously describing the path to the required element. In such cases, the best solution would be talking to the front-end developer of the project and agreeing on a special attribute that will be used in automated tests. This way, you can increase the testability of the application. However, projects vary, and it's not always possible to do that. When there is no other solution for automating your tests, you can use the&nbsp;<strong>XPath</strong> query language.</p>
44

55
<p>There are different opinions as regards XPath. However, it is a powerful and versatile tool, which allows writing complex queries to find elements.</p>
66

7-
<p>First of all, XPath (XML Path Language) is a query language that uses the tree-structure of a document. You can check XPath queries the same way as CSS selectors&nbsp;&mdash; in the developer console. Let's open the console at the cats page <a href="http://suninjuly.github.io/cats.html" rel="noopener noreferrer nofollow">http://suninjuly.github.io/cats.html</a> and use it to figure out the syntax basics. Try typing each of the example queries in the search box and see what exactly will be found.</p>
7+
<p>First of all, XPath (XML Path Language) is a query language that uses the tree structure of a document. You can check XPath queries the same way as CSS selectors&nbsp;&mdash; in the developer console. Let's open the console at the cats page <a href="http://suninjuly.github.io/cats.html" rel="noopener noreferrer nofollow">http://suninjuly.github.io/cats.html</a> and use it to figure out the syntax basics. Try typing each of the example queries in the search box and see what exactly will be found.</p>
88

99
<h3>&nbsp;1. XPath query always starts with the / or // symbol</h3>
1010

@@ -24,25 +24,25 @@
2424
<ul>
2525
</ul>
2626

27-
<h3>2. The [ ]&nbsp;symbol &mdash; filtering command</h3>
27+
<h3>2. The [ ]&nbsp;symbol&mdash;filtering command</h3>
2828

2929
<p>If a query found several elements, they will be filtered according to the rule indicated in square brackets.</p>
3030

3131
<p>There are lots of filtering rules:</p>
3232

3333
<ul>
34-
<li>by any <strong>attribute</strong> – id, class, title, or any other. For example, if we want to find the picture with a flying cat, we can write the following query: <code>//img[@id=&#39;bullet&#39;]</code></li>
35-
<li>by <strong>ordinal number</strong>. For example, we want to find the second picture with a cat. To do that, we will find the element with the &quot;row&quot; class and take its second descendant: <code>//div[@class=&quot;row&quot;]/div[2]</code></li>
36-
<li>by <strong>exact text match</strong>. Yes, XPath is the only way to find an element by its inner text. If we want to find the text block with Lenin cat, we can use the XPath selector <code>//p[text()=&quot;Lenin cat&quot;]</code>. Such a selector will return the element only if the text matches exactly. It's important to notice that searching by text is not always a good practice, especially in the case of multilingual sites.</li>
37-
<li>by <strong>partial text match</strong> in text or attribute. It requires the <code>contains</code> function. The query <code>//p[contains(text(), &quot;cat&quot;)]</code> will return all text paragraphs that contain the word "cat". In a similar manner, we can search by partial match in other attributes; that may be helpful if an element has several classes. Take a look at the navbar code from the site with cats. You can find it with the following selector: <code>//div[contains(@class, &quot;navbar&quot;)]</code></li>
38-
<li>in filtering, we can also use boolean operations (and, or, not) and some simple arithmetic expressions (although it's not recommended). Imagine we want to find a picture with the data-type &quot;animal&quot; and the name &quot;bullet-cat&quot;. The query will be:&nbsp;<code>//img[@name=&#39;bullet-cat&#39; and @data-type=&#39;animal&#39;]</code></li>
34+
<li>By any <strong>attribute</strong> – id, class, title, or any other. For example, if we want to find the picture with a flying cat, we can write the following query: <code>//img[@id=&#39;bullet&#39;]</code>.</li>
35+
<li>By <strong>ordinal number</strong>. For example, we want to find the second picture with a cat. To do that, we will find the element with the &quot;row&quot; class and take its second descendant: <code>//div[@class=&quot;row&quot;]/div[2]</code>.</li>
36+
<li>By <strong>exact text match</strong>. Yes, XPath is the only way to find an element by its inner text. If we want to find the text block with Lenin cat, we can use the XPath selector <code>//p[text()=&quot;Lenin cat&quot;]</code>. Such a selector will return the element only if the text matches exactly. It's important to notice that searching by text is not always a good practice, especially in the case of multilingual sites.</li>
37+
<li>By <strong>partial text match</strong> in text or attribute. It requires the <code>contains</code> function. The query <code>//p[contains(text(), &quot;cat&quot;)]</code> will return all text paragraphs that contain the word "cat". In a similar manner, we can search by partial match in other attributes; that may be helpful if an element has several classes. Take a look at the navbar code from the site with cats. You can find it with the following selector: <code>//div[contains(@class, &quot;navbar&quot;)]</code>.</li>
38+
<li>In filtering, we can also use boolean operations (and, or, not) and some simple arithmetic expressions (although it's not recommended). Imagine we want to find a picture with the data-type &quot;animal&quot; and the name &quot;bullet-cat&quot;. The query will be:&nbsp;<code>//img[@name=&#39;bullet-cat&#39; and @data-type=&#39;animal&#39;]</code>.</li>
3939
</ul>
4040

41-
<h3>&nbsp;3.&nbsp; The *&nbsp;symbol&mdash; selecting all elements</h3>
41+
<h3>&nbsp;3.&nbsp; The *&nbsp;symbol&mdash;selecting all elements</h3>
42+
43+
44+
<p>For example, we can find a text in the header with the following query: <code>//div/*[@class=&quot;jumbotron-heading&quot;]</code>. That may be convenient if we do not know for sure the tag of the element we are looking for.</p>
4245

43-
<ul>
44-
<li>For example, we can find a text in the header with the following query: <code>//div/*[@class=&quot;jumbotron-heading&quot;]</code>. That may be convenient if we do not know for sure the tag of the element we are looking for.</li>
45-
</ul>
4646

4747
<h3>4. Search by class in XPath is case-sensitive</h3>
4848

@@ -55,17 +55,17 @@
5555
<p>What you need to know about XPath to safely use it:</p>
5656

5757
<ul>
58-
<li>Do not use selectors like <code>//div[1]/div[2]/div[3]</code> unless it's absolutely necessary: with such a selector, it's not easy to understand what element you are looking for. Besides, when the page changes even if slightly, your selector will most probably stop working;</li>
59-
<li>If there's an opportunity to use CSS selectors: class, id, or name&nbsp;&mdash; it's better to use those instead of XPath search;</li>
60-
<li>You can search by exact or partial match of text or any attribute;</li>
61-
<li>You can use boolean operations and simple arithmetic;</li>
62-
<li>You can move through the document structure (to descendants or parents);</li>
63-
<li>It will work when the site is low on attributes and there's no way to contact the developer;</li>
64-
<li>There's an opinion that an XPath search is generally slower than search by CSS. However, there's no evidence;</li>
58+
<li>Do not use selectors like <code>//div[1]/div[2]/div[3]</code> unless it's absolutely necessary: with such a selector, it's not easy to understand what element you are looking for. Besides, when the page changes, even if slightly, your selector will most probably stop working.</li>
59+
<li>If there's an opportunity to use CSS selectors: class, id, or name&nbsp;&mdash; it's better to use those instead of XPath search.</li>
60+
<li>You can search by exact or partial match of text or any attribute.</li>
61+
<li>You can use boolean operations and simple arithmetic.</li>
62+
<li>You can move through the document structure (to descendants or parents).</li>
63+
<li>It will work when the site is low on attributes and there's no way to contact the developer.</li>
64+
<li>There's a possibility that an XPath search is generally slower than search by CSS. However, there's no evidence.</li>
6565
<li>You shouldn't use different browser extensions in XPath search: they choose illegible and over-complicated selectors. It's better to spend some time and figure out the syntax by yourself – it is not that difficult.</li>
6666
</ul>
6767

68-
<p>In this course, we will work with XPath selectors, but mostly, we will use CSS. If necessary, yu can learn more about XPath using the following links:</p>
68+
<p>In this course, we will work with XPath selectors, but mostly, we will use CSS. If necessary, you can learn more about XPath using the following links:</p>
6969

7070
<p><a href="https://www.w3schools.com/xml/xpath_syntax.asp" rel="nofollow noopener noreferrer" style="font-size: inherit; font-weight: inherit;" title="Link: https://www.w3schools.com/xml/xpath_syntax.asp">https://www.w3schools.com/xml/xpath_syntax.asp</a></p>
7171

0 commit comments

Comments
 (0)