Using Chrome, I can get the path to an element. I select "View source" and then right-click on the relevant item and say "get XPath".
In Safari, I can view the source, and when my cursor's on an element in the source, I can see the xpath visually displayed as a list of elements.. but I can't find a way to get the text for that xpath. Surely there's some way (he said optimistically).
This turns out to be easy, and I don't know why I didn't see it. In Windows at least:
Ctrl-U to display page source (or right-click on the page and click "View page source" in the popup menu).
In the page source, right-click on the element you like; in the resulting popup, click the "Copy >" option
Select "Copy XPath" from the resulting nested popup.
See picture below for an illustration. Everything was done with right-clicks.
Kinda late with an answer, but you might want to consider ios-webkit-debug-proxy by google.
Here is a good Extension for Safari and Google Chrome:
https://github.com/sergeche/xmlview#readme
Safari Extension: http://files.chikuyonok.ru/xv/xv.safariextz
Google Chrome Extension: download
Current features
Collapsable elements: Alt+click to expand/collapse all descendant elements
Outline for better document overview
Search by name or XPath. By default uses simple search mode which looks for a partial match in element‘s or attribute’s name; use special symbols like ‘/’ or ‘[’ to search by XPath
Quick XPath mode: hold down Command (Mac) or Ctrl (PC) key while moving mouse cursor over element‘s or attribute’s name to enter Quick
XPath mode. Use Shift key to cycle through available XPath variants
and then drag’n’drop element under cursor into text editor. Google
Chrome users: click on element will copy XPath to clipboard
Related
Firefox' built-in PDF viewer, PDF.js, has a mozdisallowselectionprint attribute on the <html> tag. What does this attribute do?
The mozDisallowSelectionPrint attribute was added to Firefox to allow web pages to disable the print selection option in Firefox.
Normally, when you select text in a document and then open the print dialog (Ctrl + P or Cmd + P), you can choose the option "Selection" under "Print range".
Because of the way PDF.js works, selecting this option when viewing a PDF document would either result in empty pages being printed or, for large documents, a browser crash.
In bug 830278 it was therefore decided to allow web pages, including the PDF viewer, to disable the option to print selections by adding this attribute to the HTML tag..
(source: broward.edu)
mozDisallowSelectionPrint is available from Firefox 19 and onwards.
I'm using the Firefox DevTools and I'm using the Inspector tab, in which it displays the HTML tree.
When I use the Search HTML feature, it only searches tags. So suppose I have this:
<div class="lol">textinsidediv</div>
And when I search for 'div', it returns the <div> accordingly. However, if I search for 'textinside' it doesn't match the text inside the content despite the fact that it's starting right there.
My question: How can I search for any arbitrary string within this HTML tree?
(In contrary Firebug performs a simple text search just as expected.)
The search in the Inspector panel of the Firefox DevTools allows to search for text content since Firefox 45 (see bug 835896).
Btw. since Firebug 2.0 you're also able to search in the HTML panel using CSS selectors (additionally to the plain text search).
It is not some really useless html tag search, it actually searches CSS selectors (same as what you use with css, querySelector in Javascript, or jQuery selector)
So you can search #id, go through all elements of a certain class by searching .class, you can even search for all elements with attribute including text, for example [class*="o"] should give all elements with letter o in class attribute. This is helpful for what designers/developers want to find - to find text, you can Ctrl+F within the page, then right click, inspect element.
A good idea is to Copy Inner HTML but even better is Edit As HTML. That brings up an in-place panel displaying the full text, and it can be searched with Ctrl+F or cmd+F.
Ctrl+G to find next, Ctrl+Shift+G to find previous.
Workaround: in the inspector, right-click the outermost tag, then click 'Copy Inner HTML'. Paste in a word processor and search there.
This is now fixed as of FireFox 45...
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching
See answer.
As an alternative to searching within dev tools...
Right click on the page anywhere
Select View Source
Within the source view you can easily perform a text search by doing a ctrl/f or cmd/f if on a mac.
I have a <div id="abcd"> which is changed by other code, I want to find out who is chaning that, can I set up a watch expression so that I can catch it in FireBug?
Thanks.
Bin
Using Firebug 1.5 or 1.6, use the Inspect to select the element, then in the HTML panel, right click on the element and select eg break on attribute change or another one as you need.
See http://getfirebug.com/doc/breakpoints/demo.html
i don't know the exact wording in english, i use it in german. But if you click right on your div, there is a function called "explore element" (normally at the bottom of the context menu). Afterwords firebug displays that area where you can see all live changes...
I'm having trouble with my xpaths in the Firefox plugin. I have three textboxes, the first one has ID=login and the rest has dynamically generated IDs. The first one works fine to write in the plugin, //input[#id='login'] but as soon as I try something more advanced, it cannot find anything. After reading plenty of forum posts, I've tried the XPather plugin to generate the xpath codes but the long html/css-filled strings don't work either. In some threads, people write "xpath=//..." and I tried that too, to no result.
Thankful for all help possible!
//M
The two tools I use are Firebug and XPath Checker, both Firefox add-ons.
In Firebug, select the HTML tab, right click on the element and select "Copy XPath"
For XPath Checker, right click on the element in the page and select "View XPath".
You can check this by pasting the result into the target field of Selenium IDE and then clicking the "Find" button. This tells what the Selenium result is going to be (much faster than having to run the test over and over!)
I've found that you have to "massage" the result somewhat e.g.
If you go to the Google home page and look for the "Images" link at the top left, the XPath Checker gives the image XPath as:
//id('gbar')/x:nobr/x:a1
This throws an error:
[error] locator not found: //id('gbar')/x:nobr/x:a1, error = Error: Invalid xpath 2: //id('gbar')/x:nobr/x:a1
If you remove the id e.g
//x:nobr/x:a1
you'll notice that the image has a green box around it showing thet the IDE has correctly parsed it.
Alright, I found some new information and it does work with writing "xpath=/" and the auto-generated codes from XPather. Although, the xpaths are very long and rely a lot on the HTML tags staying the same.
Does anyone have a better idea for xpath expressions (or css expressions) to write in order to enter information in the following three textbox elements:
TEXTBOX 1
Firebug: input type="text" tabindex="110"
name="6011300f91d9f186d1b7ab1a034827da"
id="input1"
Working xpath in Selenium, retrieved from XPather:
xpath=/html/body[#id='fire']/form[#id='loginForm']/div/div/div[#id='container']/div[#id='content']/div[#id='contentPadding']/div[1]/fieldset[1]/input[#id='input1']
TEXTBOX 2
input type="password" tabindex="110"
name="0de4766295b7a965fc4969da3df6824ba"
xpath=/html/body[#id='fire']/form[#id='loginForm']/div/div/div[#id='container']/div[#id='content']/div[#id='contentPadding']/div[1]/fieldset[2]/input
TEXTBOX 3
input type="password" tabindex="110" class="last" name="6c4e0fcde65e258c3dc7c508a1cc666a"
xpath=/html/body[#id='fire']/form[#id='loginForm']/div/div/div[#id='container']/div[#id='content']/div[#id='contentPadding']/div[1]/fieldset[3]/input
//M
I am new to XPath. I have a html source of the webpage
http://london.craigslist.co.uk/com/1233708939.html
Now I want to extract the following data from the above page
Full Date
Email - just below the date
I also want to find the existence of the button "Reply to this post" on the page
http://sfbay.craigslist.org/sfc/w4w/1391399758.html
Can anyone help me in writing the three XPath expressions for the above three data.
You don't need to write these yourself, or even figure them out yourself. If you use the Firebug plugin, go to the page, right click on the elements you want, click 'Inspect element' and Firebug will popup the HTML in a viewer at the bottom of your browser. Right click on the desired element in the HTML viewer and click on 'Copy XPath'.
That said, the XPath expression you're looking for (for #3) is:
/html/body/div[4]/form/button
...obtained via the method described above.
I noticed that the DTD is HTML 4/01 Transitional and not XHTML for the first link, so there's no guarantee that this is a valid XML document, and it may not be loaded correctly by an XML parser. In fact, I see several tags that aren't properly closed (i.e. <hr>, etc)
I don't know the first one off hand, and the third one was just answered by Alex, but the second one is /html/body/a[0].
As of your first page it's just impossible to do because this is not the way xpath works. In order for an xpath expression to select something that "something" must be a node (ie an element)
The second page is fairly easy, but you need an "id" attribute in order to do that (or anything that can make sure your button is unique). For example if you are sure the text "Reply to this post" correctly identify the button just do it with
//button["Reply to this post"]