Develop Reference

Nightwatch.js clicks on nested anchor when told to clicking on checkbox label

I have a checkbox, with a text including a link as follows:
<div id="agreementDiv" class="cust-pad-bot1">
<input id="inputAgreement" type="checkbox">
<label for="inputAgreement">I have read and agree to the <a target="_blank" href="http://example.com/terms-and-conditions"><u>Terms & Conditions</u></a></label>
</div>
(Please note that this snippet is only a sketch of the actual implementation. CSS classes are removed.)
Using Nightwatch.js I want to automate checking the checkbox. In my UI, clicking on the label text subsequently checks the checkbox.
browser
.useXpath()
.waitForElementPresent(`//*[#id="agreementDiv"]/label`, 10000)
.click(`//*[#id="agreementDiv"]/label`)
But when I try to do it using Nightwatch, it clicks on the link and the link is opened in a new tab. But the checkbox is not clicked. Clicking directly on the checkbox using css/xpath does not work either. I appreciate if anyone can explain how to prevent nightwatch from clicking on the child anchor.
Thank you.

You have written the code to click on label not on checkbox. Change the xpath. But use method browser.useXpath(); before you use xpath selector.
browser
.waitForElementPresent(`//*[#id="agreementDiv"]/input`, 10000)
.click(`//*[#id="agreementDiv"]/input`)
By using css selector (default selector in nightwatch):
browser
.waitForElementPresent(`#agreementDiv>input`, 10000)
.click(`#agreementDiv>input`)
This should solve your problem. If you click on checkbox, checkbox will be selected.

I found a solution using nightwatch-custom-commands-assertions third party module (https://github.com/maxgalbu/nightwatch-custom-commands-assertions). This module adds a set of custom nightwatch commands and among these there was jqueryClick function (https://github.com/maxgalbu/nightwatch-custom-commands-assertions). I called this function providing the xpath of the checkbox and it worked well. Use of the default click function didn't work for me on the checkbox.

jQuery select on div content

I am making a small text editor, and for that, I would like a similar effect when a user selects some text as here: http://raphaelcruzeiro.github.io/jquery-notebook/
I was thinking of using the jQuery select event, but I can't seem to get it working on divs, only on input fields.
<!--<input type="text" class="writing-area" value="foo bar">-->
<div class="writing-area">foo bar</div>
<script>
$(".writing-area").select(function(){
alert("Text marked!");
});
</script>
You can see a demo here: http://jsfiddle.net/WL2nz/
The outcommented HTML works just fine, but the div version does not.
What am I doing wrong? Can select not be used on divs?

The MDN reference for the select event says that the HTML5 spec only defined the select event for inputs and textareas.

In accordance with jQuery docs, "this event is limited to fields and boxes".

From the jQuery page (http://api.jquery.com/select/) for the .select() function:
"The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes."
To get the effect you are look for, have you considered onmouseover or onclick with a clickable element?
In addition, the Dojo Toolkit is one place where you can get a nice tooltip to craft something similar to what you are looking for: click here

All answers are correct, but the plugin you have linked to, does it this way:
After using the keyboard or the mouse (keyup,focus,mouseup...) the plugin checks if something is select. If something is selected the bubble pops up.
The code is here

we highlighted the color of div text when hovers it and remove the color while non-hover the text.
$(".writing-area").hover(function(){
$(".writing-area").css('color','red');
},function(){
$(".writing-area").css('color','');
});
http://jsfiddle.net/WL2nz/4/

how to make html button dotted inline appear

I am trying to add javascript to set Focus on a button, and hope to make the button look just the way it does when a user 'tabs' thru the HTML Form to reach the button.
The page that I am working on has an button element:
<input type="Submit" id="myBtn" class="myBtnClass >
In javascript function, I set focus to it using:
$("#myBtn").focus() When this function is invoked, I can see change of button image. Also, when I click 'Enter', the form does get submitted. However, in this case, when the image changes, I don't see the "Dotted inline" that generally appears on buttons.
but the dotted line Does appear when a user "tabs" to that button.
Am I expected to do anything other than $("#myBtn").focus()" ?

you can use css property:
`outline`

Could be running in IE7 compatibility mode, or using the wrong doctype.
See this similar question for more info and possible solutions: CSS 'outline' property in IE, and jQuery errors

javascript radio button focus doesn't work on firefox?

I'm using a form to get information from the user, and i am also using some radio buttons and textarea's, if the user hasn't picked an option from the radio buttons i want to focus that radio button so the user can know what data is missing.
I've tried:
document.FORM.RADIOBUTTON[INDEX].focus();
and it actually works well in google chrome, but for some reason it doesn't work on firefox,
i tried to use a setTimeout(.....); and again, it does work on google chrome but i don't get anything in firefox.
any ideas in how to get this to work?

It indeed works in firefox but the issue is the focused item is not highlighted in firefox. If you try to navigate the next DOM element using tab key, you will find it works. Some styling can be applied to element but DOM element styling also differ from browser to browser. See an example here
http://jsfiddle.net/uQ3vk/

Without seeing your HTML the best option I can suggest is to give your radio buttons (or at least the one(s) you want to be able to focus programmatically) an ID:
<input type="radio" id="radio1" name="someradiogroup" value="somevalue">
<input type="radio" id="radio2" name="someradiogroup" value="someothervalue">
<script>
document.getElementById("radio1").focus();
</script>
As with any programmatic access to DOM elements your code won't work if the element(s) haven't been parsed yet, so the code should be either in the document.ready / onload handler or later in the source than the element(s) in question. (Or in a submit handler, assuming a submit won't happen before the page loads.)

I think the missing outline in Firefox is the issue, I know it was for me. I added some CSS and got it to show.
input:focus
{
outline:#000 dotted 1px;
}
select:focus
{
outline:#000 dotted 1px;
}

javascript event handling

I am building a web form for a login. I've decided to add in a few features I wouldn't normally. However I can't seem to get them to work in every instance. So, here's my problem.
On the form, as you progress through each of the inputs a javascript box on the side of the page scrolls down and notifies you about that input i.e. what they can enter, how many characters they have left.
It works great with text boxes, because i can use an onfocus and onblur event handler. However when you reach, for example, a div that has multiple check-boxes you can't exactly use the above event handlers for each input, because then they would have to select an option before the box tells them what it is about.
Ive tried using the onMouseOver and onMouseOut event handlers for the whole div, but it doesn't work fluidly.
So any suggestions? Maybe, is there a way to active a function if a users puts their cursor on a certain part of the screen?
hope this make sense,
thanks

could make a little ? icon or something next to it for someone to hover over, and attach the event to that...
...anyways...you sure you doing it right? post some code...for example, this works just fine..when I hover over the 2nd checkbox, I get the alert
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input onmouseover="alert('test');" type="checkbox" name="vehicle" value="Car" /> I have a car
</form>

You should still have the focus/blur events on the checkboxes I think, for people using the keyboard.
Are you working with a js framework? With jQuery, you can simply do:
$(function() {
$(".div_around_the_checkboxes").hover(function() {
// show
},
function() {
// hide
});
});