I have to create a test with Selenium, WebDriverJS and Jasmine for a function that displays the content of a div only when the button connected to that div is clicked, and hide all the other elements with the same id.
This is the function that needs to be tested, and this is a snippet of the test I have written so far:
it('should display "BILL2" when the second picture is clicked and hide the others', function() {
driver.findElement(webdriver.By.css('#img_bill2')).click()
.then(function(){
driver.findElement(webdriver.By.css('#bill2')).isDisplayed()
.then(function(displayed) {
expect(displayed).toBe(true);
});
})
.then(function() {
driver.findElement(webdriver.By.xpath('//div[#class="hide", #style="display:none"]')).isDisplayed()
.then(function(displayed) {
expect(displayed).toBe(false);
})
});
});
I am stuck here since I would like to select all the elements, except the one that is currently shown.
Do you have an idea on how to solve this issue? Maybe using executeScript() and create a script to locate all the divs with display:none style can be a solution?
Thanks in advance for your replies!
I'd prefer to solve this without using .isDisplayed() by counting the numbers of invisible elements. Since all elements would have display:none which will ensure that the elements are not displayed.
it('should display "BILL2" when the second picture is clicked and hide the others', function() {
driver.findElement(webdriver.By.css('#img_bill2')).click()
.then(function(){
driver.findElement(webdriver.By.css('#bill2')).isDisplayed()
.then(function(displayed) {
expect(displayed).toBe(true);
});
})
.then(function() {
driver.findElements(webdriver.By.xpath('//div[contains(#class, "hide") and contains(#style, "display: none")]'))
.then(function(elements) {
expect(elements.length).toBe(expectedCount);
})
});
});
Related
I'm trying to collapse all child comments including the parent comment when some clicks on the icon nested inside parent comment.
With below jQuery code I was able to get the comments box collapse but now the comments located inside another section are also getting collapsed.
jQuery code -
$('.comment-toggle pre').on('click', function(e) {
$(".single-comment-wrapper .comment-text, .single-comment-wrapper .comment-bottom, .single-comment-outer .child-comment ").slideToggle('fast', function() {
if ($(this).is(':visible')) {
$(".comment-toggle pre").text('[–]');
} else {
$(".comment-toggle pre").text('[+]');
}
});
});
$('.comment-toggle pre').on('click', function(e) {
$('.single-comment-wrapper .left-side').slideToggle('fast');
});
Since HTMLand CSS was too long. I've created a codepen. Below is the direct link to it.
https://codepen.io/anon/pen/Vzrvbm
Thanks in advance.
The structure of your divs makes this tricky, I've been playing around on the fiddle for ~10mins and have come up with this - its heading in the right direction but not perfect...
$('.comment-toggle pre').on('click', function(e) {
$(this).parents('.single-comment-wrapper').next().slideToggle('fast', function() {
All the plus and minuses change because currently your code is targeting classes, it needs to change to be relative to the +/- clicked so $(this). etc
Update you jQuery to search elements relative to your clicked element:
$('.comment-toggle pre').on('click', function(e) {
// find main comment element
var rootComment = $(this).closest('.single-comment-wrapper');
// hide child comments of current comment
var children = rootComment.parent().find('>.child-comment');
children.slideToggle('fast');
// hide left part
rootComment.find('.left-side').slideToggle('fast');
// hide current comment
rootComment.find('.comment-text').toggle('fast', function() {
if ($(this).is(':visible')) {
rootComment.find(".comment-toggle pre", this).text('[–]');
} else {
rootComment.find(".comment-toggle pre", this).text('[+]');
}
});
});
Also, if you can change markup to include children elements in the context of the main comment element it would be much more easier to work with. Tree-like view based on ul would simplify markup and reduce amount of HTML elements.
I think, you should use different classes for divs. Because when you click .content-togle class, javascript code executes actions for all .single-comment-wrapper .comment-text, .single-comment-wrapper .comment-bottom, .single-comment-outer .child-comment classes.
Prestashop v1.6 default-bootstrap theme, product-list.tpl file.
I have a button add to cart and div with some smarty code:
<a class="ajax_add_to_cart_button" href="....">
<div id="div1">{if $added}Added{else}not added{/if}</div>
Now when I click to link I want to only refresh div content.
I already try some code finding in stack but my knowledge is still not enought.
What I try and it is not work:
$(document).on('click', '.ajax_add_to_cart_button', function() {
$("#div1").load() /*also $("#div1").load("#div1")*/
});
and:
$("#div1").load(location.href + " #div1");
and few more.
EDIT, also this is not work for me:
$(function(){
$(document).on('click', '.ajax_add_to_cart_button', function(e) {
e.preventDefault();
$("#div1").load($(this).attr("href")); /*and this: $("#div1").load($(this).attr("href #div1"));*/
return false
});
});
EDIT2: When I try this code is half working
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function(){
$("#div1").html("result reloaded successfully");
});
});
why half? Because text is display but only in first product, and it is no matter which one product I click, and also I try switch html() to load() or refresh() but then is not working.
EDIT3
$(document).ready(function(){
var productid = "{product.id_product}"
$(".ajax_add_to_cart_button").click(function(){
$("#div1" + productid).html("result reloaded successfully");
});
});
<div id="div1{product.id_product}">{if $added}Added{else}not added{/if}</div>
It is display info in all product, all container in product have now different id.
try following and check if it works..
$(function(){
$(document).on('click', '.ajax_add_to_cart_button', function(e) {
e.preventDefault();
$("#one").load($(this).attr("href"));
return false.
});
});
I noticed you have wrong class in your selector. please check that too.
Mmm... I see... I guess your problem is that you use the same id for all the products. The DOM 'should' have a unique ID for one element, try another way, maybe a simple class as a selector, you couldn't use the same id for all that elements :)
For example (I'm assuming that your div have mybeautifuldiv class):
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function(){
$(".mybeautifuldiv").html("result reloaded successfully");
});
});
If you're trying to do this when there is a list of products (category page etc.) then you need to target a proper div. And you might not want to use id but class in your div.
<div class="my-custom-div">{if $added}Added{else}not added{/if}</div>
Is this div inside 'add to cart' anchor?
If it is then you need to target it:
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function() {
$(this).find('.my-custom-div').html('Content updated!');
});
});
If it is not then you can traverse to parent div of product and find your custom div inside it. For example in a category page of a default prestashop theme:
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function() {
$(this).closest('.product-container').find('.my-custom-div').html('Content updated!');
});
});
I have been developing this website (First Day)
My javascript for the Beliefs section was working previously, then I changed it because the design changed a little. The javascript is the same except I needed to hide some elements when the page loaded. On a click, depending which word is clicked, that description will show up, and the others (if any were already shown) will disappear. The change I made works on my local machine, but doesn't work on my web server. What could be wrong with my javascript?
Here is the edited code; however, it is still not working
Thanks for any help. This is one I cannot figure out.
Here is the link to the zipped folder of the website. Dropbox Zipped Folder
JavaScript Code:
$(document).ready(function(){
$('.Descriptions').hide();
$('#God').click(function () {
$('.Descriptions').hide();
$('#GodDescriptions').show();
});
$('#Jesus').click(function () {
$('.Descriptions').hide();
$('#JesusDescriptions').show();
});
$('#HolySpirit').click(function () {
$('.Descriptions').hide();
$('#HolySpiritDescriptions').show();
});
$('#Bible').click(function () {
$('.Descriptions').hide();
$('#BibleDescriptions').show();
});
$('#Man').click(function () {
$('.Descriptions').hide();
$('#ManDescriptions').show();
});
$('#GodsRelationship').click(function () {
$('.Descriptions').hide();
$('#GodsRelationshipDescriptions').show();
});
$('#Salvation').click(function () {
$('.Descriptions').hide();
$('#SalvationDescriptions').show();
});
$('#SavedWho').click(function () {
$('.Descriptions').hide();
$('#SavedWhoDescriptions').show();
});
$('#Perseverance').click(function () {
$('.Descriptions').hide();
$('#PerseveranceDescriptions').show();
});
$('#GospelOrd').click(function () {
$('.Descriptions').hide();
$('#GospelOrdDescriptions').show();
});
$('#Resurrection').click(function () {
$('.Descriptions').hide();
$('#ResurrectionDescriptions').show();
});
$('#ChurchGov').click(function () {
$('.Descriptions').hide();
$('#ChurchGovDescriptions').show();
});
$('#SecondComing').click(function () {
$('.Descriptions').hide();
$('#SecondComingDescriptions').show();
});
$('#Missions').click(function () {
$('.Descriptions').hide();
$('#MissionsDescriptions').show();
});
});
Don't use IDs for toggling visibility of lots of elements. It's unmaintainable, and misses the point of what IDs are for; they're for a unique property when you need to do targeted work (navigate to them, manipulate a single element, etc).
Give all those bits a class attribute with the same class (or if they already have one, give them all the same class as extra class), and the toggle that single class.
<div id="..." class="line"> ...</div>
<div id="..." class="line"> ...</div>
<div id="..." class="line"> ...</div>
<div id="..." class="line"> ...</div>
and then a simple
$(".line").hide();
to hide everything, with
$(".line").hide();
$("#justthatline").show();
to show individual parts
Use .toggle()
This hides an object if visible and makes viable if hidden.
So in your example set things visible or hidden appropriately and then toggle the ones that should be effected by a click.
Also your comment is an HTML comment and is not valid in the context of JavaScript.
<!--Category Logic-->
should be
//Category Logic
or
/*Category Logic*/
This could be causing your problem.
Edit:
I like what mike said about using classes that would make this a million times easier to deal with and read.
Add class="description" to all you extra text and then you can use toggle to do the rest.
EX.
$(".description").hide();
$("#God").click(function(){
$(".description:not(#GodDescription)").hide();
$('#GodDescription').toggle();
});
This hides everything that isn't the description you want to toggle and then toggles that.
I've seen answers on here on how to do this, but I just can't get it to work. Maybe another set of eyes will help. I'm trying to get the scrollbar to appear in a div that popups when an image is clicked. Here's the code for that:
('modalcs' is the name of the div that pops up)
And the function:
function update_scroll(theID)
{
document.getElementById(theID).style.display = 'block';
$(".scrollable").mCustomScrollbar("update");
}
In my $(document).ready(function() I have:
$(".scrollable").mCustomScrollbar({
theme:"dark-thick",
scrollButtons:{
enable:true,
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:true
}
}
});
and I understand that on page load since the hidden div isn't seen, the scrollbar is unable to see its content.
TIA for any help!
The problem is that the "update" command does not operate on a collection, so if $(".scrollable") returns more than one element, it will update only the first one. Use $.each
$(".scrollable").each(function(){
$(this).mCustomScrollbar("update");
});
On the other hand, since you are operating on 1 element, you can just change your function:
function update_scroll(theID)
{
$('#' + theID).show().mCustomScrollbar("update");
}
I am pretty new to jQuery and I am trying, but failing, so far to make a form element with a class of .topbardropdownmenu to be displayed when the user hovers over a button with a class of .menuitemtools. Once the user hovers over the button the .menuitemtools I don't want the form to be rehovered if it is already displaying hence the if statment to check it's display property is none. At the moment this script works but everytime you hover over the button .menuitemtools the form is rehovered which creates an annoying flashing. Once the form is displayed I don't want .menuitemtools to do anything and I want the form to dissappear when the mouseleaves the form.
Hopefully all that's clear and I'm not far off? Thanks very much for looking at this.
$(document).ready(function () {
$('.topbardropdownmenu').hide();
if ($('.topbardropdownmenu').css('display') == 'none') {
$('.menuitemtools').hover(function () {
$('.topbardropdownmenu').fadeIn('slow');
});
}
$('.topbardropdownmenu').mouseleave(function () {
$('.topbardropdownmenu').fadeOut('slow');
});
});
$(document).ready(function () {
$('.topbardropdownmenu').hide();
$('.menuitemtools').mouseover(function() {
if(!$('.topbardropdownmenu:visible').length)
{
$('.topbardropdownmenu').fadeIn('slow');
}
});
$('.topbardropdownmenu').mouseleave(function() {
$('.topbardropdownmenu').fadeOut('slow')
});
});