Develop Reference

Webpage doesn't refresh after input

Currently im working on automating a website with selenium python. I have this problem whereby when i enter J590 into the target textbox MANUALLY, i will have to click anywhere on the website or pressing tab which than will refresh the website and an option will be available in a dropdown box. However, selenium does not seem to be refreshing the page for me.
I tried to use click() before and after sending J590 into the textbox,i also tried using send_keys(Keys.TAB) after sending J590 but none is working.
Here is the code i used to send inputs
driver.execute_script("document.getElementById('CustCd').value+="+ dumps(jcode))
Here is the code i tried after sending input
driver.find_element_by_xpath('//*[#id="Item"]/form/center/input[2]').click()
or
driver.find_element_by_xpath('//*[#id="CustCd"]').send_keys(Keys.TAB)
May i know why is selenium acting this way and is there a solution to it.

Seems to be the keyboard/onchange event are triggering when you tab out or click on another element in the page as you are using js to enter the data. So, you have to dispatch (simulate) the corresponding event.
Refer to this post to know the associated event(s) to the element.
Let's say if you want to trigger onchange event on an element, then you should get the element first.
ele = driver.find_element_by_xxxx(yyy)
then send the event to the element using the js as shown below.
driver.executeScript("arguments[0].dispatchEvent(new Event('change', {'bubbles': true,'cancelable': true}));",ele)
Make sure you returned the correct element. And change the event name accordingly.

javascript auto fill form extension

I have a page and i wan't to fill it with my data. (Auto filling chrome extension).
I tried to work with vanilla javascript and JQuery, but they both don't work.
Here is my code:
$('#control_8 option[value=14401]').attr('selected', 'selected').trigger('change');
Here i use trigger(), so after a option is selected, in it subcategory it will load all items.
When i run this code in the console - it works. But if i run it from the chrome extension, it selects but trigger doesn't work.
SOS.

I guess there is a selector issue with your trigger function.
Split the code and try the trigger function in following way
$('#control_8 option[value=14401]').attr('selected', 'selected');
$('Your selector').trigger('change');

Open browse window in IE on single click file input

I'm having some trouble to make the file input work the way I want it. The file element exists of 2 parts, the textfield and the browse button. In other browsers than IE clicking either of them opens a window where you can select your files. In IE however it only opens when I click the browse button. If I click the textfield next to it I have to doubleclick in order for the window to open.
Is there a way to fix this with javascript so a single click on the textfield will also open the window? I tried the following, but it didn't work. (code is much simplified from the real example)
Html:
<input id="file" name="file" type="file"/>
JS / jQuery:
$("#file").click(function(){
$(this).trigger("dblclick");
});
$("#file").dblclick(function(){
alert("Double");
});
Now the above code alerts the "Double" but doesn't open the window. Is there a way to fix this?
Thanks in advance.

Since the entire control is native to the browser (and are never exposed as text box plus button) you simply do not have access to methods/events that will allow you to invoke the upload button. I believe this is mainly to avoid sites tricking the user into uploading non-intended files.
If you can manage to take a little time to implement a workaround, this does a nice of job of creating a rather nice upload component thats easier to manage. I'm sure a quick google will list you many other examples on how to style the file upload component.

Just tested your code with JSFiddle on IE6 (http://jsfiddle.net/SUWRK/) and, from my understanding, it works as you're expecting ... The alert shows up on a single click event (please note that's it's tricky to catch the dblclick event in IE < 9 - see https://gist.github.com/399624).
Are you sure there's not something else going on with the larger code set?

Any way to view exactly what's going in the HTML via Firebug with dynamic updates to input fields?

I'm using JavaScript to customize radio buttons. I added labels for each of the buttons and when I click the labels, it seems to be updating the selected radio properly, but not when I click the radio button graphic. (only the background position changes)
Is there anyway I can make it so I can view the changes when to each of the radio button input elements in firebug when clicking on them?
If you'd like to see an example of what I'm talking about, go here, inspect one of the radio button elements and click on them and you'll see the code never changes (i.e. checked="checked").

When you change the DOM via Javascript, you're changing the in-memory version. The source of the DOM is never modified by your Javascript.
See: Firefox Live DOM.

If you right click on the element and select "Inspect Element" it will show you the HTML for this element in memory and will reflect changes to that as you interact with the page.
Also if you select the "Script" tab you can find your javascript and set break points to allow you to step through the script and debug any issues that may be occurring.

input type="file" styling help

I have a file input field with opacity: 0; and filter: alpha(opacity: 0); that sits ontop of a large div that I use as a button to select a file, the selected filename is displayed below the button.
All works fine, but when you set the width property of the file element (in this case, the width of the DIV which is underneath it) in IE, part of that width is the text area of the file input. Ofcourse, IE does their own thing, and unlike every other browser, the text-area of the element has to be double-clicked to open the browse dialog. Firefox & Safari will act on a single-click of the text part of the element. I thought I had a workaround since IE allows you to invoke the .click() event on the element.
I tried this:
<input type="file" onclick="this.click();" />
which did nothing, so I tried this:
<input type="file" onmouseup="this.click();" />
Which worked, and the browse dialog was shown with a single click of the text area of the element. But, for some reason when the form is submitted, if there was a file selected, the form would not submit, nothing would happen. If no file was selected, the rest of the form would be submitted.
So now I am back to square one and the left half of my Select File button has to be double clicked to pick a file and the right half can be single clicked. I can't think of any other way to get IE to react to a single click of the element. I tried using the onfocus event to trigger .click() on the element also, which works, but since this upload dialog will be the only thing on the page, and the <input type="file" /> is the first input element being rendered, the click event is triggered when the page loads.
So then I tried attaching to the onload event of the body, and setting focus to something else, but this was too late and focus had already been given to the file input and the browse dialog already opened. I know I am getting close with the onfocus, is there a way to keep the element from having focus when the page loads? Or is there another way to do this that anyone can think of?
Thanks!
[update]
I tried playing with the onfocus again and unfortunately, I was wrong and focus is called to the file element again when the form is submitted, halting the submission and opening the browse dialog again

My favorite solution to formatting html inputs: http://pixelmatrixdesign.com/uniform/