Why Devtool cannot even find its own Xpath?
Windows 10, Latest Chrome Version 104.0.5112.102 (Official Build) (64-bit).
Clicked plus sign for a new tab. New tab went to default google search.
Please see screenshot
right clicked on the search field, selected Inspect. This opened DevTool, and highlighted the element.
right clicked on the highlighted element, select Copy, XPath.
Control + F in Devtool, pasted the Xpath into the search box.
there was no match: 0 of 0 !!!
It was not a highlighting issue as some other posts reported.
#wOxxOm suggested it was due to the tag was in a Shadow DOM. When I posted the question, I wasn't aware of this new feature. After his/her hint, I read more articles. I believe it is due to Shadow DOM.
I present this as a temporary answer, and leave for more knowledgeable folks to provide an acceptable answer.
There are good resources on Stack Overflow about Shadow DOM, for example this one
does-anybody-know-how-to-identify-shadow-dom-web-elements-using-selenium-webdriv
Related
I'm using a pretty bog-standard installation of CKEditor 5, and have noticed that alt-clicking on a Mac is acting differently in ckeditor to a basic textarea.
Textarea:
Right click a word, and it will be selected - 100% of the time.
CKEditor:
Right click a word - it seems a little unpredictable - the only way I can make it work every time is if I place the cursor within the word everytime.
This issue was raised as a user pointed out that the browser spellcheck only works on the second attempt, so not ideal.
I created a video showing the behaviour on the ckeditor examples website - with a textarea just thrown in using devtools - https://www.youtube.com/watch?v=k0pDCdbNZpc
Has anyone come across this before and found a solution at all? Thanks!
edit: confirmed as an issue on GitHub https://github.com/ckeditor/ckeditor5/issues/11898
In Firefox 50.1, Firebug is no longer available so I have to use the inspector but I cannot find copy ---> xpath option that was available in Firebug. How can I find the xpath of an element using the inspector?
You can use the console to check if the xpath you want return the correct element or not.
$x("//div/xpath")
https://developer.mozilla.org/en-US/docs/Tools/Settings
Follow Bellow Steps:
Step 1 : Right click on page -> Select (Inspect Element)
Step 2 : Pick an element from the page
Step 3 : Right Click on highlighted html -> Copy -> Xpath
The bug related to losing ability to 'copy XPath' from firefox inspector is fixed, verified in Firefox 56 beta, and verified in Firefox 57 alpha:
https://bugzilla.mozilla.org/show_bug.cgi?id=987877
In Firefox you can use the web developer tools console for xpath validation like this:
1.Open Web Developer tools.
2.Click on Console
3.Type $x("path")
This should let you validate that your path is valid.
You can't, firefox's inspector does not have such feature. However it does offer css selector which can be converted to xpath with various other tools.
It should be noted however that these generated selectors (xpath or css) are not accurate or reliable and you should avoid using this feature for anything but rare edge cases.
Unfortunately this doesn't work properly. When I use the copy xpath, I got this instead of the usual one: //*[#id="gwt-uid-105"]
Which is just useless :(
There aren't any extension currently which could solve this. Looks like the only way is to run an old version of FF. Can have an old 32 bit and a new 64 bit version.
Xpath Using Firefox Console: **
Answer referenced from **Xpath Using Firefox Console in selenium webdriver
Steps:
Press F12( common for all browsers), Now firefox open developer tool like below.
Naviagte to console tab
On the console editor we can verify our Xpath
For verifying xpath we have to use our xpath in following format : $x("xpath")
This is an old question but I'm glad to say that since FF 75 it supports searching by XPath, look at documentation. Here is a link to their blog entry
I know that this doesn't answer directly to the question but it helped me a lot, use Pale Moon:
Open any web page in Pale Moon browser
Right click on an element of the page
Select: "Inspect Element with Developer Tools" (a window shows up with element highlighted)
Right click highlighted element
Select: "Copy XPath"
And there you have it. You will get a "full" xpath even if the element has an id.
I would rather you study how to create xpath on your own to select the element you need. It's very simple and very very helpful specially when creating reusable methods/functions.
Go and see the xpath tutorial at w3schools or wherever.
Focus on the relationships between elements.
Edit:
Once you know how to construct a good-looking xpath, you can now test it using the browser console as mentioned by #mosaad. Still, you need to learn how to construct the xpath first. BTW, the copy xpath function wasn't available back in Jan '17. That is why I suggested he learn how to construct xpath. Even now that it is available though, I still suggest you learn because the xpath you get from those usually suck.
Firebug used to to display styles in the Computed panel like this, with computed styles grouped:
But for some reason it now displays computed styles like this:
The only grouping available is "Other" which appears to contain every CSS style. How do I make CSS styles group together?
I am using Firefox 46 with Firebug 2.0.16. The change began seemingly out of nowhere, I did not adjust any settings.
I have tried toggling every option in the dropdown menu. The value of the computedStylesDisplay setting is grouped (default value). I tried switching to alphabetical and then back to grouped but it changed nothing.
This is obviously a bug in Firebug in combination with Firefox 46.0. In Firefox 45.0.x it was still working fine.
I've filed a bug for that in Firebug's issue tracker and already fixed it. I have also created a build with that fix. Now it's up to the Firebug team to make a proper new release.
Note that the Firebug team is already working on Firebug 3, which integrates into the Firefox DevTools. Those tools don't have the grouping yet, but it's already requested in bug 977128.
Update:
Firebug 2.0.17 got released, which includes the aforementioned fix.
Update:
Firebug is officially discontinued, i.e. its maintenance has stopped in favor of pushing the development of the Firefox DevTools.
I've run into the same issue. It doesn't exactly solve the problem but what I've found helps at least a little is to click Options -> Show Quick Info Box. Gives a list of current applied styles to the element you're hovered over in the HTML console but unfortunately doesn't provide the original CSS reference line.
I follow the instructions for loading the plugin, I get the green overbar, and click on "import". Still the plugin doesn't show up under '$:/ControlPanel -> Plugins'.
How come the plugin doesn't work. I tried in Firefox and Safari.
Click to edit the content of http://tiddlywiki.com/plugins/tiddlywiki/katex/#%24%3A%2Fplugins%2Ftiddlywiki%2Fkatex, then copy-paste the entire content to a tiddler in your installation called "$:/plugins/tiddlywiki/katex". Scroll to the very bottom and set the "Type" to application/json, and create the same fields as the original (author, dependents, description, plugin-type and version).
The plugin now shows up in the control panel, and works as expected.
First, asking questions on the google group is a much better way to get answers. We tend to answer quickly there.
You need to save and reload your wiki after importing the plugin for the changes to take effect, otherwise it won't work. Also, are you using tiddlywiki5? The katex plugin won't work on tiddlywiki classic.
This is a real 2%er but here goes, I have created a winform in VS2010 with Gecko 2.0.1-0.10 (latest release) webbrowser control, I am using a touch screen to navigate. Sometimes when clicking a hyperlink it will select text rather than navigate, on the DomMouseUp event I want to check to see if there is selected text, if so I want to see if it is a hyperlink and if it is, where that hyperlink goes to. I had a mess around with GeckoSelection but nothing looked obvious. I am looking for a way to see if what is selected within the web browser is a hyperlink, any thoughts?
I've worked it out : for anyone interested in such things, use DomFocus on the gecko control:
m_strInnerHtml = geckSel.ActiveElement.Parent.InnerHtml.ToString();
That will give you the innerhtml of the selected item, from here you can extract the href tag and get the url, navigate to it, hey presto :)
Update: An even better solution is to use (in DomFocus again)
m_strInnerHtml = geckoWebBrowser.Document.ActiveElement.GetAttribute("href");
This will return the actual hyperlink address, one thing to watch out for however is if you're on google for example and select the "Advertising" hyperlink at the bottom of the page, it may return "/advertisingpage/" which must be appended to the original url. Clicking a hyperlink away from google will return the full address however.
Very good behavior gives this call:
m_strInnerHtml = geckoWebBrowser1.Url.AbsoluteUri()