We Keep Coding

NightwatchJS Unable to locate element using CSS Selector

I've currently got a section of a web site that looks like so:
<form id="product_form" method="POST" action="/cart/add" role="form">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div>
<img class="product-image" src="/static/images/products/4388801543.jpg" width="500px" alt="">
</div>
</div>
<div class="col-md-3 product-variants other_options">
<h1 itemprop="name" class="product-single__title h3 uppercase">Samburu Shorts - Mens</h1>
<p class="product-single__price product-single__price-product-template">
<span id="ProductPrice" itemprop="price" content="$55.95">$55.95</span>
</p>
<input type="radio" name="variant_id" class="hidden" id="14903870471" value="14903870471" onclick="enableSubmit()"><label for="14903870471" class="option text-center selector size-value">29x11 Sand-Grey</label>
<input type="radio" name="variant_id" class="hidden" id="16304664135" value="16304664135" onclick="enableSubmit()"><label for="16304664135" class="option text-center selector size-value">29x11 Aubergine-Grey</label>
<input type="radio" name="variant_id" class="hidden" id="16304665799" value="16304665799" onclick="enableSubmit()"><label for="16304665799" class="option text-center selector size-value">34x7-5 Sand-Grey</label>
<div class="product-add">
<button id="add-to-cart" class="addItemToCart btn addToCart-btn product-form__cart-submit" disabled="" type="submit">Add to Cart</button>
</div>
<div class="social-sharing">
<a target="_blank" href="#" class="btn clear btn--share share-facebook" title="Share on Facebook">
<img src="//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_fb.png?3517946130637841476">
<span class="visually-hidden">Share on Facebook</span>
</a>
<a target="_blank" href="#" class="btn clear btn--share share-twitter" title="Tweet on Twitter">
<img src="//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_twitter.png?3517946130637841476">
<span class="visually-hidden">Tweet on Twitter</span>
</a>
<a target="_blank" href="#" class="btn clear btn--share share-pinterest" title="Pin on Pinterest">
<img src="//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_pin.png?3517946130637841476">
<span class="visually-hidden">Pin on Pinterest</span>
</a>
</div>
</div>
</div>
</form>
I'm scripting out a test through NightwatchJS where I am trying to select one of the radio buttons so I can automate a user experience. The code test block that I have written out is as follows:
'Check that widget loaded on new product page' : function(browser) {
browser
.waitForElementVisible('#monsoon-inline-reco-div-ul', longWait, () => {
})
.elements('css selector', '#monsoon-inline-reco-div-ul li', (results) => {
browser.assert.equal(results.value.length, 4);
})
.click('#product_form > div > div:nth-child(2) > input[type=radio]')
.pause(longWait)
.end();
}
The line in question is the click command. I keep getting errors about how the script cannot find the element given the css selector. I've tested this in the console in the browser itself using document.querySelector('#product_form > div > div:nth-child(2) > input[type=radio]').click() and the radio button is clicked. Could use some thoughts on something I might be doing wrong because I've been working this for a couple hours now and have tried a variety of different things.

Can't access element inside slick slider

I'm using Slick slider (http://kenwheeler.github.io/slick/) and I'm trying to get the id of the element I change. The following code obviously works outside the slick slider, but for some odd reason it always returns the first element of the slider.
<div class="container-slide">
<div class="slider slider-category">
<div class="slider-card">
<div class="row block-image">
<div class="background-upload">
<label for="image">
<i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i>
</label>
<input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="1"/>
</div>
</div>
</div>
<div class="slider-card">
<div class="row block-image">
<div class="background-upload">
<label for="image">
<i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i>
</label>
<input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="2"/>
</div>
</div>
</div>
</div>
</div>
$('.image-card').on('change', function() {
console.log($(this).data('id'));
});
The previous jquery code gives me always "1" as result. So it gets only the first element.
Why is this happening?
Without using slick slider, it's obviously working fine, there shound't be anything wrong with that very simple code...
Am I missing something about slick slider? I read everything and all the documentation but I couldn't find anything for this issue. I also tried beforeChange event, but didn't work.
Thanks

Ok I found out the problem!
I don't know why but the id and the label were affecting the on change.
So if I change the code into this:
<div class="container-slide">
<div class="slider slider-category">
<div class="slider-card">
<div class="row block-image">
<div class="background-upload">
<label for="image">
<i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i>
</label>
<input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="1"/>
</div>
</div>
</div>
<div class="slider-card">
<div class="row block-image">
<div class="background-upload">
<label for="image2">
<i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i>
</label>
<input id="image2" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="2"/>
</div>
</div>
</div>
</div>
</div>
It works fine. (I changed the input id and label for into "image2).

how to show/hide reply comment box on multiple displayed comments

so here is the code i use this for me to show/hide the comment box it works actually but the problem i encounter when i make multiple comments when i tried to click the reply on the 1st comment the comment box show/hide but when i tried to click other comments it doesnt work anymore it only works on the first one.... is there any way to fix this?..
HTML code
<div id="replybutton" class="btn4 like" style="margin-top:-25px;margin-left:-10px;">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12" id="reply" style="background:#eff9c7;margin-left:50px;margin-top:-20px;display:none;" >
<img src="img/icons/no-icon-available.png" class="pull-left" style=" border-radius:50%;margin-bottom:3px;width:30px;height:30px;" />
<p style="margin-top:18px;line-height:15px;"><strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br>
<div class="btn4 disabled" style="margin-top:-25px;margin-left:-10px;">
<span style="margin-left:5px;font-size:12px;color:gray;"><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" style="width:88%;height:25px;margin-top:-10px;" placeholder="Write a reply..." />
</div>
JAVASCRIPT
<script type="text/javascript">
$(document).ready(function(){
$('#replybutton').click(function(){
$('#reply').toggle();
});
});
</script>

id must be unique in a HTML Page, you should change id to class replybutton and reply and jquery code would be,
$(document).ready(function(){
$('.replybutton').click(function(){
$(this).next('.reply').toggle();
});
});
Snippet,
$(document).ready(function() {
$('.replybutton').click(function() {
$(this).next('.reply').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>

Issue in opening modal over modal?

So I am trying to open modal over other modal which is not working. there is one link say "login" which opens up another modal for me. why this is happening ?
primary modal call from following
<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="160">
<li>Sign Up</li>
<li class="menu-item-emphasis"><div>Login</div></li>
</ul>
primary modal
<div class="modal1 mfp-hide" id="modal-get-started" >
<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
<div style="padding: 50px;">
<form name="reg_form" id="get-started-form" class="nobottommargin">
<div class="row clearfix">
<div class="col-sm-12">
<h3 class="font-body">Register for Free Trial</h3>
</div>
</div>
<button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>
<button id="customGoogleBtn1" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
<br>
<div style='padding-top: 30px;padding-left: 50px' ng-show ="errorAlreadyRegister">
<span style='color:red;x' >Seems already registered. <a ng-click= "closePopup()" href="#" > Log in </a> instead?</span>
</div>
</form>
</div>
</div>
</div>
wants to open on login link
<div class="modal1 mfp-hide" id="modal-login" >
<div class="block divcenter" style="background-color: #FFF; max-width: 400px;">
<div style="padding: 50px;">
<h3 class="font-body">Login to your Account</h3>
<form class="nobottommargin">
<div class="col_full">
<label class="font-body capitalize" for="login-form-modal-username">Username:</label>
<input type="text" id="login-form-modal-username" name="login-form-modal-username" value="" class="form-control" />
</div>
<div class="col_full">
<label class="font-body capitalize" for="login-form-modal-password">Password:</label>
<input type="password" id="login-form-modal-password" name="login-form-modal-password" value="" class="form-control" />
</div>
<div class="col_full nobottommargin">
<button class="button button-rounded nomargin" id="login-form-modal-submit" name="login-form-modal-submit" value="login">Login</button>
Forgot Password?
</div>
</form>
<div class="line line-sm"></div>
<button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>
<button id="customGoogleBtn" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
<!-- Login with Google -->
</div>
</div>
</div>
function called on login link
$scope.closePopup = function(){
$.magnificPopup.close();
$.magnificPopup.open({
items: {
src: '#modal-login'
}
});
}

Call Action method from jquery popup modal

OK I have made many searches before posting this but I couldn't really get what I needed, the thing is I have a popup modal for login/register
<!--Signin/Signup container-->
<div id="modal" class="popupContainer" style="display:none;">
<section class="popupBody">
<!-- Social Login -->
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fa fa-facebook"></i></span>
<span class="icon_title">سجل عن طريق الفيس بوك</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fa fa-google-plus"></i></span>
<span class="icon_title">سجل عن طريق كوكل</span>
</a>
</div>
<div class="centeredText">
<span>أو استخدم الايميل الخاص بك</span>
</div>
<div class="action_btns">
<div class="one_half">Login</div>
<div class="one_half last"> Register</div>
</div>
</div>
<!-- Username & Password Login form -->
<div class="user_login">
<form>
<label>الايميل / اسم المستخدم</label>
<input type="text" />
<br />
<label>كلمة السر</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">احفظ معلومات الدخول على هذا الجهاز</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> رجوع</div>
<div class="one_half last">Login</div>
</div>
</form>
هل نسيت كلمة المرور؟
</div>
<!-- Register Form -->
<div class="user_register">
<form>
<label>الاسم الكامل</label>
<input type="text" />
<br />
<label>عنوان البريد الألكتروني</label>
<input type="email" />
<br />
<label>كلمة المرور</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">أرسل لي رسائل في حال وجود أي تحديثات</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last">Register</div>
</div>
</form>
</div>
</section>
</div>
<!--Signin/Signup End-->
and this is the script:
<script>
// Plugin options and our code
$("#modal_trigger").leanModal({
top: 100,
overlay: 0.6,
closeButton: ".modal_close"
});
$(function () {
// Calling Login Form
$("#login_form").click(function () {
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#register_form").click(function () {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function () {
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
});
/*--------------------------------*/
</script>
</div>
Now what I need is to create an action method so when the user click Register or Login it get called to do what necessary
How can I do that. my knowledge in jquery and javascript is kind of limited
I will appreciate any help.
thank you in advance

Attach ids to your buttons:
<div id = "login_button" class="one_half last">Login</div>
Then attach an event listener to them:
$("#login_button").click(function() {
// Do something
});
Same for the Register button.