I have a problem embarrassing problem with hidden field not being part of DOM; at least I cannot find it using JavaScript. Field has "id" and "name" attributes, it is in the form, has a value and can be seen when looking at the view source in browser. So, I attach a click handler to a button, which looks for a hidden field using either document.getElementById or using jquery selectors (any combination of the selectors, by Id, by class name etc) and it is not part of DOM. How is this possible, or is it even possible? What could be a cause if this?
Edit:
Markup is huge, so I did not want to paste it in here. My question was basically, is it possible for hidden field to be missing from DOM. Why are people down-voting this? Is it not a valid question?
Maybe the field has been removed, the browsers viewsource doesn't care about changes of the DOM(It is just the response he gets from the server).
Use e.g. firebugs HTML-tab to inspect the current DOM.
Its possible if your javascript code is running as is, ie not inside a DOM ready event, but as in the normal flow of the document. If your javascript code is placed above the html that declares this hidden field, then the browser will execute the javascript before it got the chance to create the elemeent. You are able to see it in view source because by that time the browser has rendered everything.
So my blind guess is that your js code in NOT inside a DOM ready event. I could very well be wrong. Please post the least possible html markup and css and javascript that will reproduce this problem. You may use jsfiddle.net to share the code with us ...
Related
I'm getting this strange behaviour in a very specific set of inputs on one my applications. I create some inputs and I can see them as I created them on the Elements panel (google chrome), but the way the browser renders it is different.
Note how the input is renders with comma instead of a point, but the value attribute uses a point
When I get a referente to that element using the selector API, I get this:
A direct reference to the Dom Element will return 11,00. The tag has 11.00 and jQuery returns the 11,00. I've removed all js that interacts with this element (masks, events, etc) and the issue still happens.
I've been swearing at the DOM for a day and a half, but I know this is most probably an issue with my application. What bothers me the most is that the browser does not honor what I see in the elements panel.
This is the small piece of code that creates the element, stopped right before the tag is created. Note the variables values in the right panel:
Could someone give me a hint about what could be causing this difference in between element, view and attributes? If possible, I'd like to know what/how this is happening in depth.
Thank you in advance
I'm trying to log into this site. But I can't even fill the textbox with the username.
I tried:
implicit and explicit waits
executing JavaScript
Structure of the textbox
The username is enclosed within a td tag, which can be located using its width attribute. The textbox itself is represented by two input tags. The first one is hidden. Both have style attributes. The first one has an initial value of display: none;, which is changed to display: inline-block; when I click on the textbox. And the style attribute of the second input tag is set to display: none;. Again, both these are toggled once the username textbox loses focus.
Waits
I tried using both implicit and explicit waits. The code implementing explicit wait resulted in a TimeoutException error:
wait = WebDriverWait(driver, 10)
elem_username = wait.until(EC.visibility_of_element_located((By.ID, 'txt_username')))
Executing JavaScript
Both the input tags have onfocus and onchange attributes. I didn't bother about the latter (my goal was to get keystrokes into the textbox first). The onfocus has a value of SetEnd(this). So, I tried to execute that.
The problem I had is that I couldn't find any documentation that could help me executing JavaScript. So I looked at a few related answers here at StackOverflow. I tried this first:
elem_username = driver.find_element_by_id('txt_username')
driver.execute_script('SetEnd(this)')
Of course, I knew it wouldn't work, because I was not referring to the element. So after browsing a few more questions, I learnt that execute_script took arguments. So I modified the code, which raised an error that said something like the script had no function like this:
driver.execute_script('arguments[0].SetEnd(this)', elem_username)
Then, I saw an answer using 'click()' inside the execute_script; so I tried that, too:
driver.execute_script('arguments[0].click()', elem_username)
The 'click()', I guess, is only for buttons. But since I had to "click" in the textbox to bring it in focus, I thought it would work. It didn't.
This is the last line I executed in all of my attempts, which, without an exception, kept raising ElementNotInteractableException error:
elem_username.send_keys('blahblahblah')
Requirements
The Q&As on this site would, of course, be excellent, if I had a bit more experience. For instance, there are several answers demonstrating explicit wait, but most of them were aimed at solving the OP's problem, and hence they included only the relevant parts of code. It was tough for me to understand them.
I want to solve this problem (logging into the site), but I also want to learn working with selenium properly. I haven't worked with it earlier in any other languages such as Java. The official documentation is good, but I couldn't solve this problem using that. So I want a more beginner-friendly tutorial.
This worked for me:
# Force the element to be displayed (noticed style.display = "none")
# Yes, I know you can see it, but selenium thinks it's not displayed.
driver.execute_script('document.getElementsByName("txt_username")[0].style.display="block"')
elem_username.send_keys('your name')
So you've outlined everything well and you seem to have a good understanding of it. The trick is to click the second input first, then send keys to the first input since it is then focused. (I did find that clicking the containing td also worked for Chrome, but browsers are different in that aspect and the intent of this page is that you click on the second input). A simple solution is as follows:
real, readonly = driver.find_elements_by_css_selector("input[onfocus*='SetEnd']")
readonly.click()
real.send_keys('hi')
If you have any questions about that, I can try to help.
I made a large form, which has many elements. I use javascript(jquery) to make this form have a step-by-step effect. The problem is that, when the page is loading and before the javascript behavior is triggered, the form shows in a mess and all of its element are shown. Any ideas of improving this?
A common term for this behavior is "flash of unstyled content" (which will be useful when searching for solutions). Technically your content has been styled (assuming the page is structured and parsed correctly), but your JavaScript is applying additional style rules and it doesn't do that until the page is loaded.
One technique I regularly use is to set elements to display:none until I am ready to work with them. This isn't always practical, as sometimes the element must be visible and/or have a display box for a particular piece of code to work.
See this article for ideas.
Group all the form elements in a hidden div (style would be display:none) and have a "loading" message show.
When the document has finished loading, trigger some kind of "startup" function using
$(document).ready(function() {
//unhide the form here
})
take a look at the JsFiddle here:
http://jsfiddle.net/ru2Fg/2/
Essentially, it starts with two textareas: one empty, one with stuff inside, and an input type=text. I was under the impression that to put stuff in an input you change it's value, and to put stuff in a textarea you add the text as a child to the node.
I perform a $(...).val(...) to change their contents. And their contents do change.
However, the DOM looks exactly the same! I'm printing out the 3 elements with console.log(); they seem unchanged. I look at them with chrome's inspect element: they seem unchanged.
I've looked at jQuery's val() method change doesn't seem to change the DOM, but that question concludes it's something funny with firebug not refreshing the HTML it displays. In this case, i'm quite sure inspect element displays the current html that exists on the page: i've seen the left attribute changing furiously when things are scrolling, for example. I'm also checking it using the console, which tells me the same thing: nothing changed.
My eyes, though, tell me something has changed, as I'm seeing "10, omg, moo" instead of "blank, hello world, 2000". What's going on?
EDIT: I posted the wrong jsFiddle. This should be the correct one now
There is a difference between the value attribute and the value property. When you type in the input box, you are changing the property, not the attribute. The attribute stays the same as when the document was loaded. Among other things, this means you can reset an input box to its default value with elem.value = elem.getAttribute('value');.
Similarly, if you have a drop-down <select> with one of the options having the selected attribute set, even if you choose a different option that attribute will still be there even though the selected property is now false.
The same applies to checkboxes and the checked attribute. The same also applies for the disabled attribute, and several other things too.
It is in-fact changing the DOM, other ways the 10 woulnd't have showed up in the text area anyway. The problem is in the firebug itself(at list the old one), I am not sure if it is still available in the new ones.
To verify, you can use the web console of firefox or console of chrome.
The DOM is completely loaded before anything jQuery happens, so technically the data inserted in the DOM isn't seen by debuggers. The debugging tools see only what is rendered so you won't be able to manipulate the "after the fact" data that arrives via jQuery. You could consider it "out of band" or fudging the DOM in a way. The same happens with AJAX. If you add in data or page content with AJAX methods like .load() you won't see it in the DOM.
An input box in jQuery has the val() method -- which is the value attribute, in the textarea, it is usually the html() method, what the textarea contains.
I want to add telerik RadNumericTextBox to innerHTML using javascript or jquery. How can i achieve this?
If you mean the RadNumericTextBox specified here, then you are looking for a server solution that has nothing to do with javascript.
innerHTML is a property of a DOM element that can't exist until firstly a DOM and secondly an element within it exists. So if you are looking for a server-side solution it has nothing to do with innerHTML or javascript (at least in regard to adding suitable markup at the server in ASP.NET).
If you are looking for equivalent functionality to be applied on the client, you can validate input at some convenient time (that is, convenient for the user) which is likely when a form is posted or when the user leaves the field in question (which will typically dispatch a blur event and perhaps a change event if the value changed).
You can also use the HTML5 input#type=number, however that will only work in browsers that support it (a good percentage don't).
A listener that validates that the value of a form control (probably an input in this case) is quite simple to write and attach to the element if that is what you want. In any case, innerHTML is unlikely to be involved in a suitable client-side solution.
What are you actually trying to do?