Develop Reference

Selenium: Click on a "<div><a></a></div>" button

I tried to click on a button. It has this structure:
<div class="button-wrapper" id="button-verify-wrapper">
<a x-ng-click="verifySfdcConnection()" class="clearfix float-left button-green">
<div class="icon-green icon-green-verify"></div>
<div class="button-label ng-binding">Verify Connection</div>
</a>
<div x-ng-class="{'connection-verified':wizardData.inputSource.sfdc.connectionStatus}" x-ng-show="wizardData.inputSource.sfdc.connectionStatus" style="" class="connection-verified"></div>
</div>
Any help how to do it? I tried this:
driver.findElement(By.xpath(".//*[#id='button-verify-wrapper']/a/div[1]")).click();
But it doesn't help.
Thanks

I think <a> element is clickable here. You should try to locate <a> element instead and perform click() action as below :-
using By.cssSelector() :-
driver.findElement(By.cssSelector("div#button-verify-wrapper > a")).click();
using By.linkText() :-
driver.findElement(By.linkText("Verify Connection")).click();
using By.xpath() :-
driver.findElement(By.xpath(".//a[normalize-space(.) = 'Verify Connection']")).click();
If you're still unable to perform click, try as an alternate solution using JavascriptExecutor as below :-
((JavascriptExecutor)driver).executeScript("arguments[0].cli‌​ck()", driver.findElement(By.cssSelector("div#button-verify-wrapper > a")));

You should click on the link using a css selector like:
a[x-ng-click*='verifySfdcConnection']

driver.findElement(By.id("button-verify-wrapper")).click();
Note: 1. if ID or class name is directly given no need to use xpath, can directly use By.id and By.class
2. To perform an action on web element we should know the properties of that element ex. if it is not a button you can not perform click on it

try this: $("#button-verify-wrapper > a").click()

How to add content on a specific point inside a div

Say I have a div with an id (main comment) and more divs underneath with reply id's. I want to dynamically add the content of the comment to the end at the end of the replies. I can't grab the id of the last reply, but I can grab the id of the main comment (which is also the id of the commentbox which is always at the end. Something like this:
<div class="commentArea">
<div class="comment_'.id.'"> Something </div>
<div class="reply_'.replyid.'"> What kind of comment is that? </div>
<div class="reply_'.replyid.'"> What kind of reply is that? </div>
<div class="reply_'.replyid.'"> You guys are strange. </div>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
I want to add content inside commentArea right before replyToComment_'.id.' ...
I had an idea that probably works and looked like this (I was thinking maybe there was some easier way to do it).
<div class="commentArea">
<div class="comment_'.id.'"> Something </div>
<div class="reply_'.replyid.'"> What kind of comment is that? </div>
<div class="reply_'.replyid.'"> What kind of reply is that? </div>
<div class="reply_'.replyid.'"> You guys are strange. </div>
<div class="newReply"></div>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
And just add and empty div of newReply at the end of every reply posted...
Any other ideas?

.appendTo() of jQuery is what you need:
http://api.jquery.com/appendto/

Ok I thought about few ways to achieve this goal... "If i understand correctly what you were trying to ask"
By this way you do not need even to use ID as a class.... unless there is a specific reason to this?!?!
If not then move the id to id attribute and give it something like this
id="2,56"
2 = the question || post id
56 = the answer id
by this way you will have more control on your posts and comments
1. if reply_ is an individual class
$('.reply_')[$('.reply_').length - 1].after(comment);
2. if replyToComment_ is an individual class
$('.replyToComment_').before(comment);

I am not sure, I understood your question correctly, but I think .prepend() would help you.
You will need to wrap your last div i.e. <div class="replyToComment_'.id.'"> some button and stuff </div> with some other div and do .prepend() on that parent everytime. Like this:
<div class='parentContainer'>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
And do $(".parentContainer'").prepend(newComment) to add comment everytime.

This is how I would do it:
$("#addtxt").click(function () {
$("[class^='replyToComment']").before("<div class='newReply'>" + $("#text").val() + "</div>");
});
Here is the JSFiddle demo

Show all dropzone errors instead of one at a time [duplicate]

I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.

Try:
$("#region_North_America").append(row_str);
using append().

Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.

Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);

Display multiple hidden divs using jquery?

I have a code something like this:
<div id="specialDiv">
<div id="div1">
<div id="div2">
</div>
</div>
<div>
The div1 and div2 are hidden and right now in order to display them i am doing something like this:
$('#div1').show();
$('#div2').show();
It works but is there an elegant way to do this other than
$('#speicalDiv div').show();
Thanks.

You can use a multiple selector:
$("#div1, #div2").show();

$('#specialDiv div').show(); will show all div inside #specialDiv.
However, you don't have to hide the divs inside at all - hiding the parent is sufficient.
If you just wanted to show divs directly inside #specialDiv (in your case: #div1), you could select those using #specialDiv > div.

If you wish to add a class to the hideable divs, you can reference the class in the show()/hide() statements.
Otherwise, your method looks as elegant as possible.

Put the divs into a class. i.e.
$('.toshow').show();
Then they can be anywhere on the page and could be other things than divs if required.

Similar to what you've already suggested, you could do something like:
$('#specialDiv div').show();
But a more flexible approach would be to add a new class name to the divs you want to show:
<div id="specialDiv">
<div id="div1" class"hidden">
<div id="div2" class="hidden">
</div>
</div>
<div>
Then show them like so:
$('#specialDiv .hidden').show();

Is there a simple Javascript command that targets another object?

I have a page with two divs in it, one inside the other like so:
<div id='one'>
<div id='two'></div>
</div>
I want div one to change class when it is clicked on, then change back when div two is selected.
I'm completely new to javascript, but I've managed to find a simple command that makes div one change when I click it.
<div id='one' class='a' onclick="this.className='b';">
<div id='two'></div>
</div>
Now I just need an equally simple way to change div one back when number two is clicked.
I've tried changing "this.className" to "one.classname," and for some reason that worked when I was working with images, but it doesn't work at all with divs
<div id='one' class='a' onclick="this.className='b';">
<div id='two' onclick="one.className='a';">
This does not work.
</div>
</div>
Essentially I'm wondering if there is a substitute for the javascript "this" that I can use to target other elements.
I've found several scripts that will perform the action I'm looking for, but I don't want to have to use a huge, long, complicated script if there is another simple one like the first I found.

You can use document.getElementById
<div id='two' onclick="document.getElementById('one').className='a'; return false;">
This does not work.
</div>

This would work:
document.getElementById('one').className = 'a';

you could get the element by id with:
document.getElementById("one")