{"id":69,"date":"2015-07-25T11:57:33","date_gmt":"2015-07-25T11:57:33","guid":{"rendered":"http:\/\/loadfocus.com\/blog\/tech\/?p=69"},"modified":"2019-08-11T18:36:10","modified_gmt":"2019-08-11T18:36:10","slug":"how-to-find-the-xpath-of-your-selenium-webdriver-test-using-chrome-browser","status":"publish","type":"post","link":"https:\/\/loadfocus.com\/blog\/tech\/2015\/07\/how-to-find-the-xpath-of-your-selenium-webdriver-test-using-chrome-browser","title":{"rendered":"How to find the XPath of your Selenium WebDriver test using Chrome browser?"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span><p class=\"lead\"><!-- pn-tldr --><\/p>\n<h2>Key takeaways<\/h2>\n<ul>\n<li>Chrome DevTools can copy an XPath, but the generated one is usually position-based and brittle.<\/li>\n<li>Rewrite it around an id or a stable attribute before putting it in a test.<\/li>\n<li>If no stable hook exists, adding one to the page is cheaper than maintaining the locator.<\/li>\n<\/ul>\n<p><!-- \/pn-tldr --><\/p>\n<h4>Enroll Now for the new <a href=\"https:\/\/courses.loadfocus.com\/online\/best-ways-on-how-to-find-xpath-for-web-elements-in-chrome-and-firefox-browsers?id=605e59107764185731f002bcd3cb98ab\">Online Course: How to Find XPath for Web Elements in Chrome and Firefox Browsers<\/a>.<\/h4>\n<p>A lot of times while developing a test or when debugging a test you want to check to what element the XPath used in your test refers to. You will find this useful since you don&#8217;t need to install any other plugin or widget, you can use just built-in browser functionality.<\/p>\n<p>For example, let&#8217;s imagine we have the following code in our UI Selenium test:<\/p>\n<pre class=\"lang-java\"><code class=\"lang-java\">\n@FindBy(xpath = \"\/\/div[contains(@class,'item--lowest')]\/\/a[contains(@class,'summary__date')]\")\npublic WebElement summaryDateElement;\n<\/code><\/pre>\n<p>To identify to which element this refers to just do the following:<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>Open the URL \/ web page in the Chrome browser<\/li>\n<li>Open the Web developer tools by pressing:\n<ul>\n<li>&nbsp;<strong>Cmd + Alt + I <\/strong>(on Mac)<\/li>\n<li>or by clicking <strong>View -&gt; Developer -&gt; Developer tools<\/strong><\/li>\n<li>or by <strong>Right-Click<\/strong> and <strong>Inspect Element<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3>See more details<\/h3>\n<p><script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- Square --><br \/>\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-8151016364557535\" data-ad-slot=\"3756710829\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins><br \/>\n<script><br \/>\n     (adsbygoogle = window.adsbygoogle || []).push({});<br \/>\n<\/script><br \/>\n[emaillocker]<\/p>\n<ol>\n<li>Click on the <strong>Console<\/strong> tab in the Web developer tools<\/li>\n<li>Paste in the console the XPath from your test in the following format:<\/li>\n<li>$x(&#8220;\/\/div[contains(@class,&#8217;item&#8211;lowest&#8217;)]\/\/a[contains(@class,&#8217;summary__date&#8217;)]&#8221;)<\/li>\n<li>Hovering with the mouse over the returned result will highlight the page element that the XPATH&nbsp;refers to.<\/li>\n<li>Details about <a href=\"https:\/\/loadfocus.com\/blog\/2013\/09\/05\/how-to-locate-web-elements-with-selenium-webdriver\/\">locating elements with Selenium WebDriver<\/a> can be found in our previous blog post.<\/li>\n<\/ol>\n<p>That is it. You will see in the console what the XPath returns.<\/p>\n<p><a href=\"https:\/\/webtechresources.com\/category\/screenshot-comparison-tools\/\">Find best screenshot comparison tools<\/a><\/p>\n<p>[\/emaillocker]<!-- pn-faq --><\/p>\n<h2>Frequently Asked Questions<\/h2>\n<h3>How do I test an XPath in Chrome without a plugin?<\/h3>\n<p>Open DevTools, go to the Console and evaluate $x(&#8220;your-xpath&#8221;). It returns the matching nodes, and hovering over a result highlights the element on the page, so you can see immediately whether the locator points where you think it does.<\/p>\n<h3>Should I use the XPath that Chrome copies for me?<\/h3>\n<p>Rarely as is. Copy as XPath produces a position based path such as a chain of div indexes, which breaks as soon as anyone inserts an element. Rewrite it around an id or a stable attribute before it goes into a test.<\/p>\n<h3>What if the element has no stable attribute?<\/h3>\n<p>Adding one to the application is usually cheaper than maintaining a brittle locator. A single data-testid costs the developer a minute and saves the test from every future layout change.<\/p>\n<p><!-- \/pn-faq --><!-- pn-related-reading --><\/p>\n<h2>Related reading<\/h2>\n<ul>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/2016\/04\/how-to-use-apache-jmeters-xpath-extractor\">How to Use Apache JMeter\u2019s XPath Extractor?<\/a><\/li>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/2016\/10\/how-to-find-by-xpath-text-that-contains-apostrophe-single-quote-in-selenium-webdriver\">XPath Text With an Apostrophe (Single Quote) in Selenium<\/a><\/li>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/tech\/2017\/12\/how-to-click-a-link-by-text-in-selenium-webdriver-java\">How to Click a Link by Text in Selenium WebDriver Java<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span>Key takeaways Chrome DevTools can copy an XPath, but the generated one is usually position-based and brittle. Rewrite it around an id or a stable attribute before putting it in a test. If no stable hook exists, adding one to the page is cheaper than maintaining the locator. Enroll Now for the new Online Course:&#8230;  <a href=\"https:\/\/loadfocus.com\/blog\/tech\/2015\/07\/how-to-find-the-xpath-of-your-selenium-webdriver-test-using-chrome-browser\" class=\"more-link\" title=\"Read How to find the XPath of your Selenium WebDriver test using Chrome browser?\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":499,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[11,10],"class_list":["post-69","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-testing","tag-find-xpath-in-chrome-browser","tag-webdeveloper-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/posts\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":14,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":341,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/posts\/69\/revisions\/341"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/media\/499"}],"wp:attachment":[{"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}