We Keep Coding

Javascript button click not working in selenium webdriver

I am trying to automate hitting a javscript button using a python script and web driver however no matter how I try to refer to the element it doesn't seem to activate the javscript. Here's an excerpt from the website I am trying to hit the button on:
<li>
<a href="javascript:;" data-blogid="19079" id="picture-trigger">
<i class="glyphicon glyphicon-picture light-red"></i >
<span> Picture </span >
</a >
</li >
I've tried selecting by CSS selector, by XPATH and while I see the element being selected (doted line around it when running), nothing happens.
I've also tried both .click() and .submit() neither one seems to work. Here's my most recent attempt:
element = mydriver.find_element_by_id("picture-trigger")
element.click()
I think perhaps the issue is the javascript:; isn't being triggered when called from web driver the same way it is when an interactive user hits it but I'm at a loss for how else to automate clicking it.
Does anyone with more web driver experience know why this isn't working or how I can get this working?
Thanks
Brad
Here's what I see when I run the code:
Here's what it looks like when I manually click on the button:

I think the issue lies in the fact that the site is using jquery. I was able to work around this using the following:
time.sleep(3);
mydriver.execute_script("$('.light-red').click();")
time.sleep(3);
mydriver.execute_script("$('.uploadbutton').click();")
There may be a better way than using time.sleep but I spent so much time fighting with trying to get the div to unhide that its good enough for now.
Hopefully this helps someone else out in a similar situation. Thanks to everyone for all the help.

Here is how I find my way to click on an element using XPath:
Browse in the target page where the button is located(Tried with
FireFox).
Right click on the button and select Inspect elements.
Right click on the HTML code of the button and in Copy select XPath.
Now you have the XPath copied to your clipboard.
Now you just have to call this line:
document.getElementByXPath("PASTE THE XPATH HERE").click()

Having issues executing multiple javascript lines in chrome console

I have been trying to do some manipulation on webpages using JavaScript. So I started with the basic Google page(https://google.com).
I ran the command
document.getElementById('lst-ib').value = 'search_term';
Then after that tried running
document.getElementsByName('btnI')[0].click();
which is the I'm feeling Lucky button.
It is showing undefined on doing so.
But when I try only click on the I'm Feeling Lucky button without changing the content of the search bar, it works.
The target is to click the Search Button, it is also not working.
So I used the I'm Feeling Lucky button for testing to see if anything can be clicked.
The Same is happening in YouTube search bar as well
Any help or guidance would be much appreciated.
Also please note that I am N00b and trying to learn as I go :(
TLDR; The Idea is to simulate all the operation a user can do on the browsers using JavaScript.

document.getElementById('lst-ib').value = 'search_term';
document.getElementById('tsf').submit();
(or document.querySelector("form").submit();)
I'm not entirely sure what you're trying to achieve, but did you consider just using the queryparams? google.com?search=search_term ?
I found this ID simply by going to google.com, rightclicking on the input field, choose 'inspect element' and search for the first ancestor that is a 'form'.

Selenium clicking button with no name or id

I've been struggling with trying to automate this page. After I login, I'm at this page where I'm supposed to click a button before I redirects me to the next page. The problem is that this button does not have a name or an ID which is making it very difficult to find this element. I've tried mechanize and splinter both. And finally tried selenium but that didn't help either. Really struggling with this. Just need to click this damn button! Any help would be really really appreciated. Love python and automation, but this time nothing seems to be working for me. Please find below a snapshot showing the the code shown when I click on "inspect element". Also, I can't type here the page source code as it is >300000 characters, so you can probably take a look at the page (you'll need to login which takes just 10 seconds). The page I'm referring to is right after you login - http://www.160by2.com/Index
[!Snapshot showing the code I get when I click "inspect element"
[]1

There is class name:
driver.findElement(By.className("da-sms-btn").
Also you can open application in Chrome and copy CSS or XPATH in browser:
Open application in Chrome
Inspect element
Right click on highlighted area
Copy CSS or XPATH

You can try first getting the form by the id, then getting the button by the class name:
wd.find_element_by_id("frmDashboard").find_element_by_class_name("da-sms-btn").click()

You can try to find the element through its xpath. Selenium does a good job of this:
webdriver.find_element_by_xpath("element xpath").click()
You can easily find the xpath by going to the inspect element sidebar on Chrome and right clicking on the element you want. The right click drop down menu should have an option "copy xpath".

I would write a cssSelector as follows and try that.
button[onclick*='aSMS']
Notice, I am doing a partial search with *

Thank you so much for your replies! I was actually able to make it work using splinter instead of selenium! Here's what I did-
1) I just executed the js which was being executed on the onclick event of the button.
jsstring="window.parent.openPage('SendSMS?id="+id+"', 'aSendSMS', 'aSMS', 'ulSMS')"
br.execute_script(jsstring)
2) Subsequently, I was faced with the problem that on the next page, everything was embedded inside iframe, and so find_by_name and all were not able to find elements. For that, splinter provides a nice method (Which is documented REALLY bad, so had to figure it out myself with help from stackoverflow)
with br.get_iframe('iframe_Name') as iframe:
iframe.fill("Element_to_fill_Name","Text_to_fill")
iframe.find_by_tag("TagName")[Index_number].fill("Text_To_Fill")
Worked out brilliantly! Thanks everyone :)

How can I figure out the function/programming behind the toggle navigation in the Dashgum Bootstrap Theme?

I'm making a system using the Dashgum Free Bootstrap theme.
I have it locally but I can't find any programming behind the toggle navigation function, and I need to take a look at it. I'd guess javascript but there's no id related to the element, and even when you delete all attributes, as long as you don't delete the div and there's something inside it (like something written ) it still works.
What kind of sorcery is this? I need to see the code behind scenes!
You can check the code by inspecting the navigation element in the link above. I pasted my own here too, but I don't think it helps, does it? I can't share the system I'm making :(
<div class="sidebar-toggle-box col-lg-2 z-padding">
<div class="fa fa-bars tooltips " data-placement="right" data-original-title="Encolher/Expandir Menu"></div>
<b>eCategory</b>
</div>
Thank you very much.

You could try to inspect the element with Google Chrome. Press F12 then click on the magnifier, position on the element. On the side menu you are going to find Event Listeners, it means all events attached to that element.
You might be able to find the function that runs on click this way.
You can also look in the code for code selecting the element (i.e. ".sidebar-toggle-box").

How to fix my tooltip that is not working with grid of buttons?

I was reading the bootstrap api for tooltip. I built a grid of buttons and I want to be able to have a tooltip show when I do a mouseover of a button.
Problem
See the picture. This is the normal grid.
Look at the picture below. Notice how all the buttons got pushed to the right and left side and the tooltip appeared. This is not the desired behavior.
Code (see it for yourself in plunker link)
I have a plunker that you can see here the demonstrates the entire problem. Mouse over second row button to see all hell break loose.
The HTML code for the button that I can use tooltip on looks like this:
<button type="button" class="btn btn-default bin-well bin-col-5" data-toggle="tooltip" data-placement="top" title="Tooltip on left"></button>​
I have added the following javascript after reading in the boostrap api that there is an issue with btn-group type stuff. I added the following:
$('.btn-group').tooltip({'container':'body', 'placement':'top'});​
It creates the exact same issue. Really scratching my head.
Summary
This doesn't make any sense to me. I thought the entire point of tooltip was to have additional content sit on top of the DOM objects behind it? Not push objects out of the way?
I was wondering if it has to be because of the data-toggle attribute fighting my toggleClass javascript? No way, right? So I tried to use tooltip without having the data-toggle attribution, but I cannot invoke the tooltip without this component.
I have also done a ton of googling and everything I read has indicated that I should not be experiencing this problem and it should be working out of the box.
If anyone with much more experience could help point me in the right direction, I would very much appreciate it. I have spent some time on this and I feel like this right now.
NOTE
I am using IE Explorer to show this behavior. This is important because my clients use IE.

Here's the working plunk : http://plnkr.co/edit/THgloUwFUDkpv5odRGYv?p=preview
Change your javascript to
$('[data-toggle="tooltip"]').tooltip({container: 'body'});