Capture X-Path of a dom element using different location strategies - javascript

I tried to capture x-path of a dom element with the help of Firebug source.
It has clearly defined the relevant function as getElementXPath() and I was able get the xpath by passing the Web Element.
But it returns a single x-path and the x-path strategy is unpredictable.
It can be a absolute path or relative path with ID.
Say this is our simple HTML page:
<html>
<body>
<form>
First name: <input id="fname" type="text" name="firstname"><br>
Last name: <input id="lname" type="text" name="lastname">
</form>
</body>
</html>
I am searching for the xpath of the 1st text box here:
//*[#id="fname"]
This is what we get using firebug; as well as using my script which uses the getElementXPath() of Firebug code.
But in Selenium IDE there is a drop down box with a list of suggested paths for a single web element.
id=fname () - id
name=firstname - name
css=#fname - css
//input[#id='fname'] - xpath:attributes
//input - xpath:position
I went through it's code and found that Google AJAXSLT is the default library they are using. And also it says : use “javascript-xpath” for the newer, faster engine.
I checked both scripts but so far I was not able to find any direct function which returns an array of paths.
Is there any simple standalone function like Firebug's getElementXPath() in those libraries?

If i correctly understand you want to try your xpaths in firebug, then try FirePath
Example:

Related

How to click on an element generated by javascript using selenium

I'm trying to make a bot that creates accounts for me, but I can't interact with the element where I need to send my credentials.
All I know is that the element that I'm trying to interact with is generated in javascript, after clicking on another button. I found multiple answers but all were in others languages than Node.js.
I'm trying to send credentials on this element:
<input type="text" name="pseudo" id="pseudo" placeholder="Mon pseudo légendaire" style="margin-bottom: 10px;" maxlength="10">
I tried to use this:
driver.findElement(By.xpath('//*[#id="pseudo"]')).sendKeys('CREDITENTIALS')
Which returns me this error: Webdrivererror: element is not visible.
HTML element code looks like this :
<input type="text" name="pseudo" id="pseudo" placeholder="Mon pseudo légendaire" style="margin-bottom: 10px;" maxlength="10">
The problem is not that i have to wait until the element that im trying to interact with is displayed because it is already displayed, the problem is that i want to click on the second element that match with my findElement by xpath, because what im trying to click on is existing 2 times in the html code and only the second one is interactible.
Update (from the comments)
This element is within the following <div> tag:
<div id="modal_message_wrapper" class="block_scrollable_wrapper scrollbar-light yellow noise inscription">
You can construct an unique xpath clubbing up the id, name and placeholder attribute as follows:
driver.findElement(By.xpath("//input[#id='pseudo' and #name='pseudo' and #placeholder='Mon pseudo légendaire']")).sendKeys('CREDITENTIALS')
Update
As you mentioned that the desired element is within:
<div id="modal_message_wrapper" class="block_scrollable_wrapper scrollbar-light yellow noise inscription">
So you can use the following line of code:
driver.findElement(By.xpath("//div[#class='block_scrollable_wrapper scrollbar-light yellow noise inscription' and #id='modal_message_wrapper']//input[#id='pseudo' and #name='pseudo' and #placeholder='Mon pseudo légendaire']")).sendKeys('CREDITENTIALS')
Note: It's quite evident the element is within a Modal Dialog Box, so definitely you have to induce a waiter in the form of WebDriverWait before you attempt to send any character sequence to the <input> element.

Typeahead placing span tag after my label tag for my search. How can I add a label properly?

We have to be ADA compliant on our site. One of the things they look for is every form must have a label tag. The code has a label tag in the right place, but then when the javascript loads on the page, a span tag gets between the tag and the search field making it no longer compliant. I don't see a way to add a label. I was curious if anyone else had a suggestion for this or is there an alternative to typeahead that will work? In order to be compliant it must look like
<label for="search">Search: </label>
<input type="text" name="search" id="search"/>
For example the way it works now looks like...
<label for="search">Search: </label>
<span class="twitter-typeahead">
<input type="text" name="search" id="search"/>
</span>
There is no option to change the span tag that wraps your input. You can see where it is hardcoded in the source code here. Unfortunately, typeahead is no longer maintained either, so there will not be a future option to customize this.
However, you can always modify the code yourself. Either in the www.js file that I linked to (if you compile yourself) or in the bundle, find the buildHtml() function and change that line to an empty string.
function buildHtml(c) {
return {
wrapper: '',
menu: '<div class="' + c.menu + '"></div>'
};
}
I don't know if this will have unknown repercussions elsewhere in typeahead, but I just tried it on a page and everything seemed to be working fine.

How to copy file path in to span in addition to the input control itself?

So far I tried this:
JS:
function Copy(copyfrom, copyto) {
document.getElementById(copyto).value = copyfrom.value;
}
And HTML code look like this:
<div>
<input type="file" onchange="Copy(this, 'txtFileName');" />
</div>
<div>
<span id="txtFileName" type="text" readonly="readonly" />
</div>
I want To copy the selected file name/path to different span,
Thanks!
From Joe Enos answer you don't need to get server path
Some browsers have a security feature that prevents javascript from
knowing your file's local full path. It makes sense - as a client, you
don't want the server to know your local machine's filesystem. It
would be nice if all browsers did this.
And to get the name of file, try to use innerText property of span instead of value as value works on form element fields try this,
function Copy(copyfrom, copyto) {
document.getElementById(copyto).innerText = copyfrom.value;
}
Working demo
<input type="file"..> will not show textbox in chrome and safri browser, you can configure the display styles by CSS itself, go to the link here
This is not possible due to security reasons.
For more details, see: How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?

What is this functionality called, and is it in HTML or Javascript?

I'd like to find out how this is commonly implemented, mainly because I can't seem to find it in the source code - it's the "graying out" of text that happens whenever a menu-option/button is unable to be clicked. I'm trying to find it in firebug but this is what I find for the image:
<input
type="submit"
onclick="LoadingMsg();"
class="btnclass"
disabled="disabled"
id="ctl00_ctl00_Content_ContentItems_btnUpdateQuotas1"
value="Update Quotas"
name="ctl00$ctl00$Content$ContentItems$btnUpdateQuotas1"
>
This is what it looks like:
It's HTML but can be implemented using JavaScript to manipulate the HTML input/select element to have that property.
This is the attribute that does it: disabled="disabled"
A basic example of JavaScript manipulating this attribute would be:
document.getElementById('elementid').disabled = true; // Disable element
document.getElementById('elementid').disabled = false; // Enableelement
Resources: disabled attribute

xml() function in jQuery

There is already the html() function in jQuery.
The problem I am having with this function is that, in its returned html string, all the self-closing / are stripped off from the elements. For example,
<div>
<input type="text" name="textbox1" value="" />
</div>
Becomes:
<div>
<input type="text" name="textbox1" value="">
</div>
I know this is normal for this function since this is valid in html.
But I would like to have a function that returns valid xml so that the / is still there in the returned string.
It seems jQuery itself does not provide such a function, so I wonder if anyone knows of any plugin that can make this possible.
Thanks in advance.
I think you are misconceiving how browsers interpret HTML. They don't keep a copy of your source file and modify it according to your Javascript. Rather, a browser reads your HTML and parses it into a DOM representation. This corrects any mistakes you may have made in your HTML. When you try to get the HTML of an element, the element is converted to a string according to the current DOCTYPE. Since you probably have an HTML doctype (it's quite hard to get a browser to genuinely treat your document as XHTML), you get HTML returned to you.
Doing this in Javascript is almost certainly not the way to go.
I think this is what I need.
Thank you very much for everyone's reply.
http://code.google.com/p/jquery-clean/
UPDATE 1: I thought this plugin would work but actually it does not. The way I use it is that, I pass it the html string returned by html() and let it fix the tags which do not properly self-close.
However, the way it corrects the tags is not what I need (seems like a bug).
For example, passing it the following html:
<div><input type="text" id="txt1" name="txt1"><label for="txt1">TextBox1</label></div>
It gives:
<div><input type="text" id="txt1" name="txt1"><label for="txt1">TextBox1</label></input></div>
Rather than:
<div><input type="text" id="txt1" name="txt1" /><label for="txt1">TextBox1</label></div>
UPDATE 2: The bug I mention above is already fixed. This plugin works now. If you want to test it out, feel free to paste your html in this page and see if it works for you:
http://www.antix.co.uk/Content/Demos/jQuery-htmlClean/Test.htm
You could try using the native .innerHTML property (you cen get the native element using .get() in jQuery).

Categories

Resources