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.

Direct user to input field, when button is clicked

I have a search icon. When this icon is clicked, a full screen search form pops up.
What I want, is when the user clicks on this icon and the search form appears, that the user goes directly to the input field. (that the focus is on this field, and the user can type away immediately).
(I have no idea how to formulate this correctly, so that might be why I could not find any question related)

Maybe this link from jQuery will help you out:
https://api.jquery.com/focus/
And the part of code inside the onclick event of search icon would be similar to this:
$(document).on("click","#searchIcon",function() {
$('#input').focus()
});
Hope it helps you

Simply use the HTMLElement.focus() method, you can read all about it in https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus
Example: http://jsbin.com/pezifilese/edit?html,js,output

It's simple, you just need to add the autofocus="true" attribute in your input field.
<input type="text" name="name" autofocus="true"/>
Check out the demo here.

How to know when value of an ng-read text input has changed AngularJS?

I am newbie in Angular and struggling with a problem here. I have an input type text which is read only (through ng-readonly). I have a separate button on click of which I have to call a javascript function openPopup which opens a pop up and then I choose something on popup and on clicking ok on popup, we come back to main page and the readOnly text input is updated with some value.
My problem is I want to capture this text change event of input Text, read that text value and then do some action in Angular.
Although the text field value is getting changed, the corresponding ng-model data.currentLot is not getting updated. I tried putting ng-change, using $apply $watch, onchange event, but nothing seems working. Am I missing something very simple here.
<div class="form-group">
<input type="text" ng-readonly="'true'" ng-model="data.currentLot" class="form-control" id="chooseLotId" placeholder="">
<button type="submit" class="btn btn-default" onclick="openPopup('chooseLotId', false);">Search Lots</button>

Thanks to suggestion from instantNoodles, I was able to solve the problem. As soon as a selection was made from pop up, the pop up was getting closed and focus came to my input text. I captured the onfocus event and that solved my problem.

Javascript: DataTables custom search box doesn't keep the 'X' button

jsfiddle: http://jsfiddle.net/d1zqsayh/9/
Trying to put the search box of DataTables in a <div>.
Html:
<div class="dataTables_filter">
<input type="text" id="dataTables_filter" class="dataTables_filter">
</div>
Script:
oTable = $('#example').dataTable();
$('#dataTables_filter').keyup(function(){
oTable.fnFilter( $(this).val() );
})
I saw this from another stack overflow post , but unfortunately the little 'X' button on the right of the search box doesn't show when you start typing in the box. Any way around this ? Perhaps i am using the wrong class on my <input> or <div>.

You need to add the little x yourself, it's not something that magically appears, unless you're using Internet Explorer.
Edit:
Since datatables creates this search box, You need to use fnInitComplete callback/function in datatables to target this search field, then you initialize this button.
You can see a working example here:
http://jsfiddle.net/d1zqsayh/20/
Edit:
You're referring to the behavior in Chrome for input type=search
Just change the input type from text to search and it will do this behavior in Chrome.
See here: http://jsfiddle.net/d1zqsayh/23/

Should your div class be dataTables_wrapper, not _filter, perhaps?

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