{"id":595,"date":"2014-06-24T13:29:47","date_gmt":"2014-06-24T17:29:47","guid":{"rendered":"http:\/\/qxf2.com\/blog\/?p=595"},"modified":"2014-06-24T13:29:47","modified_gmt":"2014-06-24T17:29:47","slug":"firebug-2-0-to-find-xpaths","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/firebug-2-0-to-find-xpaths\/","title":{"rendered":"Using Firebug 2.0 to craft XPaths"},"content":{"rendered":"<p><a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/firebug\/\">Firebug<\/a> has been my favorite <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/\">Firefox add-on<\/a> for a long time now. In the time before every browser had decent developer tools, Firebug was a revolutionary add-on that allowed many testers, like myself, tools to interact, learn and explore what web applications were doing. I recently upgraded my <a href=\"https:\/\/getfirebug.com\/firebug2\">Firebug to version 2.0<\/a>. I was pleasantly surprised to find a cool feature that I think testers will find useful &#8211; the ability to check XPATHs within Firebug. Thank you <a href=\"https:\/\/getfirebug.com\/community\">Firebug community<\/a>!<\/p>\n<p>In case you missed it, here is how you use this super-cool feature.<\/p>\n<h2> Setup for Firebug 2.0<\/h2>\n<p>1. Install\/Upgrade-to the latest firefox browser from <a href=\"http:\/\/www.mozilla.org\/en-US\/firefox\/new\" target=\"_blank\">here<\/a>. We used version 30.0 of Firefox for this post. Firefox 29.1 did not list Firebug 2.0 as an available add on. <\/p>\n<p>2. Download and install the latest firebug add-on from <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/firebug\/\" target=\"_blank\">here<\/a>.<br \/>\nThe firebug icon will appear on the right corner on the tool bar.<br \/>\n<a href=\"http:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/1_addon.gif\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/1_addon.gif\" alt=\"firebug-addon\" width=\"114\" height=\"41\" class=\"aligncenter size-full wp-image-590\" \/><\/a><\/p>\n<p>3. Activate the firebug console by clicking the firebug icon. By default the firebug console will appear at the bottom. (This can be changed as per your preferences)<br \/>\n<a href=\"http:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/2_activated.gif\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/2_activated.gif\" alt=\"firebug_activated\" width=\"137\" height=\"69\" class=\"aligncenter size-full wp-image-592\" \/><\/a><\/p>\n<h2> Steps to craft your XPath using Firebug 2.0 <\/h2>\n<p>Lets pretend we want to craft an XPath for the first headline link on my favorite chess website <a href=\"http:\/\/www.chessbase.com\">Chessbase<\/a>. <\/p>\n<p>1.Visit the url http:\/\/www.chessbase.com, right click on the top headline and choose to inspect element with Firegbug. You should see something like the screenshot below.<\/p>\n<p><a href=\"http:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/firebug_xpath_1.png\" data-rel=\"lightbox-image-2\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/firebug_xpath_1-300x144.png\" alt=\"firebug_xpath_1\" width=\"300\" height=\"144\" class=\"aligncenter size-medium wp-image-631\" srcset=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/firebug_xpath_1-300x144.png 300w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/firebug_xpath_1-1024x494.png 1024w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/firebug_xpath_1.png 1585w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>2. We cannot use the text of the link or the href itself since they change on a news site. Instead we look around for something more permanent. We notice that the link (the &#8216;a-tag&#8217;) is nested in a div whose class contains  &#8216;featured_true&#8217;. So the XPath we want is<\/p>\n<pre lang=\"HTML\">\r\n\/\/div[contains(@class,'featured_true')]\/descendant::a\r\n<\/pre>\n<p>We can test the validity of our XPath in Firebug like in screenshot below<\/p>\n<p><a href=\"http:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/firebug_xpath_2.png\" data-rel=\"lightbox-image-3\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/firebug_xpath_2-300x140.png\" alt=\"Verify XPath with Firebug 2.0\" width=\"300\" height=\"140\" class=\"aligncenter size-medium wp-image-632\" srcset=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/firebug_xpath_2-300x140.png 300w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/firebug_xpath_2-1024x480.png 1024w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/06\/firebug_xpath_2.png 1594w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>NOTE: In the past I have used other good add-ons like <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/xpather\/\">XPather<\/a> and <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/xpath-checker\/\">XPath Checker<\/a> to craft my XPaths.<\/p>\n<p>PS: <a href=\"http:\/\/ratings.fide.com\/card.phtml?event=3208923\">Anton Smirnov<\/a> (born 2001!) becomes the first chess prodigy to make a guest appearance on our blog. See the second article on the Chessbase screenshot<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Firebug has been my favorite Firefox add-on for a long time now. In the time before every browser had decent developer tools, Firebug was a revolutionary add-on that allowed many testers, like myself, tools to interact, learn and explore what web applications were doing. I recently upgraded my Firebug to version 2.0. I was pleasantly surprised to find a cool [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,45],"tags":[],"class_list":["post-595","post","type-post","status-publish","format-standard","hentry","category-how-to","category-xpath"],"_links":{"self":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/comments?post=595"}],"version-history":[{"count":17,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/595\/revisions"}],"predecessor-version":[{"id":625,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/595\/revisions\/625"}],"wp:attachment":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/media?parent=595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/categories?post=595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/tags?post=595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}