I try to click a button named .red and the problem is that there are two buttons with same name so Cypress does not know which of them to click with command cy.get('.red').click()
Originally I thought I have to access my class before trying to click the button.
How can I use below code to click "red trash icon"?
<div class="one wide column">
<div class="ui vertical right floated buttons">
<a class="ui basic button" role="button" href="/admin/assignments/edit/37">
<i aria-hidden="true" class="cog icon"></i>
</a>
<button class="ui basic button">
<i aria-hidden="true" class="red trash icon"></i>
</button>
</div>
</div>
The Cypress .get() command accepts complex selector arguments. So if you wanted to trigger a click on an element that has red, trash and icon classes, you could do the following:
cy.get('.red.trash.icon').click()
The red trash icon is the <i> element of inside the button, not the button itself.
You should perform click on the button itself:
cy.get('.button').click()
And if there is more than one button with the selector you have set you can give it a specific class or a specific id:
<button id="whatever">...
cy.get('#whatever').click()
Notice the use of # for ids instead of the dot . as a class selector.
The problem is you're using a too broad CSS selector.
You could either set a unique ID html attribute to your button and find it with cy.get('#your-id') or you could make a more specific CSS selector.
For example you could select the last button with .red class like this
cy.get('button.red:last-of-type')
or the first one line this
cy.get('button.red:first-of-type')
or the X element using something like button.red:nth-of-type() { ... }
As recommended in the Cypress documentation, you should add a custom data-cy attribute instead of using generic selectors
Related
I have a div class which is essentially a button that I'm trying to click using jQuery
<div class="tool-button refresh-button icon-tool-button" title="Refresh"><div class="button-outer"><span class="button-inner"><i class="fa fa-refresh text-blue"></i> </span></div></div>
Here is what I tried but the log confirms the length is 0 thus not selected, any suggestions?:
console.log($('.div.tool-button .refresh-button icon-tool-button:first'))
console.log($('.div.tool-button .refresh-button icon-tool-button'))
You had multiple problems with the selector.
Remove . before div since its a tag not a class.
Remove the spaces between the classes, when there is space between them jquery is looking for element thats a child to the previous selector.
console.log($('div.tool-button.refresh-button.icon-tool-button:first').length);
console.log($('div.tool-button.refresh-button.icon-tool-button').length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tool-button refresh-button icon-tool-button" title="Refresh">
</div>
In your solutions, you trying to get:
<div class="tool-button">
<div class="refresh-button">
<div class="icon-tool-button"> // this
</div>
</div>
</div>
If you delete spaces on string, you can access your element.
The solution is
$(".tool-button.refresh-button.icon-tool-button")
Chaining selectors will query for elements that contain all of the selectors.
Detailed answer: https://stackoverflow.com/a/59406548/11969749
You can use click() method
const btn = $(".tool-button.refresh-button.icon-tool-button");
btn.click();
Do you want to select first element?
const btn = $(".tool-button.refresh-button.icon-tool-button")[0];
btn.click();
I've this functionality which allows user know when a change has been performed on an item by adding an orange dot next the item icon, so if this is a new item and user clicks on the icon a modal is displayed with a form, if any change on that form is perfomed the orange dot (which is an icon as well) appears next to the item's icon. This functionality is working with Chrome and Edge but I'm also supporting IE11, the problem is IE11 is not showing the orange dot icon when a change is performed. I reviewed the dom and the orange icon is there but is not visible until I click on the dom's element or when I click the section where the orange dot is suppose to be, in that moment the orange dot appears.
following is the original state, when I click the comment icon a modal appears with the form:
<div class="action-container">
<span class="action-comment">
<i class="comment-icon" aria-hidden="true"></i>
</span>
</div>
after a change is performed I got this in the dom:
<div class="action-container">
<span class="action-comment">
<i class="comment-icon" aria-hidden="true"></i>
</span>
<span class="action-orange-dot">
<div class="orange-dot"></div>
</span>
</div>
but in the browser the result is the same:
until I click where the orange dot is suppose to be
I have the compatible meta tag but there is no difference with or without it.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
any idea?
I'm using ajaxify for some add to cart funcionality of my shopify collection page.
All works fine however I need to hide a div once the item has been added to cart and display another.
The Html looks something like this
<div class=“col-add-to-cart”>
<div class="col-add-btn-container">
<button type="submit" name="add" class="add-to-cart-main" data-add-to-cart="">
<span data-add-to-cart-text="">Add to cart</span>
</button>
<p class="ajaxified-cart-feedback success" style=""><i class="fa fa-check"></i> Added to cart! <a href="/cart">View
cart</a> or continue shopping.</p>
</div>
<div class="col-container">
<div class="col-add">
<div class="expand-icon expanded">
</div>
<div class="checkmark">
</div>
</div>
</div>
</div>
And the relevant JS
$addToCartBtn.addClass('inverted');
_setText($addToCartBtn, _config.addedToCartBtnLabel);
_showFeedback('success', '<i class="fa fa-check"></i> Added to cart! View cart or continue shopping.', $addToCartForm);
window.setTimeout(function () {
$addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
$('.col-add-to-cart').find('.expand-icon.expanded').css("display", "none");
$('.col-add-to-cart').find('.checkmark').css("display", "block");
_setText($addToCartBtn, _config.addToCartBtnLabel);
}, _config.howLongTillBtnReturnsToNormal);
So as you can see I'm setting the checkmark to display: block and hide the expand-icon.expanded.
This works for the expand-icon as only one on the page has the .expanded class, however it shows all the .checkmark divs for each product. I only need it to display for the checkmark within the same container div as the .ajaxified-cart-feedback .success div. I've tried to do that with the col-add-to-cart container but doesn't seem to work.
You need to limit your query to a certain scope. From the info you provided I can't tell for sure what is happening, but you could try replacing $('.col-add-to-cart') with $addToCartBtn.closest('.col-add-to-cart')
The first one will select every element on the page with that class, causing the effect you observed. The second will start from $addToCartBtn (which I am assuming is a single element, in the context you need), find its closest parent with 'col-add-to-cart', then allowing you to "find" within the right context.
You could also try starting the query from $addToCartForm. It is not clear which element it refers to, but if it works for _showFeedback, it might work for your case too. That would look like this: $addToCartForm.find('.checkmark').css("display", "block");
I have 2 button like links, which toggle the class "active" for their respective 'arrowbox' divs. here is the html for that:
<span class="ct"><a class="fa fa-shopping-cart"><sup id="itm_count">31</sup></a></span>
<div class="cart">
hello world
</div>
<span class="ai"><a class="fa fa-plus"></a></span>
<div class="arrow_box">
<a style="margin-top: 5px;" onclick="new_dis()">Add distributor</a>
</div>
both the arrow-box and cart divs have display property set to none, but when I click the buttons 'ct' or 'ai' they appear on screen with following jquery:
$(".ai").click(function () {
$(".arrow_box").toggleClass("active");
$(".cart").RemoveClass("active");
});
$(".ct").click(function () {
$(".cart").toggleClass("active");
$(".arrow_box").RemoveClass("active");
});
the problem here is when one div is active ('cart' or 'arrow_box') and I click on the other button, the previous active div should not display on the screen, but it is.. how do I solve it?
also here is the fiddle to better understand the problem
thanks
your code is correct but there is a little problem you wrote RemoveClass but the actual function is removeClass. here is the example :-
$(".cart").removeClass("active");
$(".arrow_box").removeClass("active");
I have two links inside a button but the links don't seem to work on Firefox.
<button class="btn login">
<b>Log In</b>
|
<b>Sign Up</b>
</button>
I tried JavaScript onclick and redirecting - even that is not working.
This doesn't work because it is not allowed by HTML5:
Content model: Phrasing content, but there must be no interactive
content descendant.
Interactive content means any of the following elements:
a audio (if the controls attribute is present) button details embed
iframe img (if the usemap attribute is present) input (if the type
attribute is not in the hidden state) keygen label menu (if the type
attribute is in the toolbar state) object (if the usemap attribute is
present) select textarea video (if the controls attribute is present)
If it does work in some browsers it's just because they're trying to
play nice with malformed markup and provide some sort of meaningful result.
In other words: rewrite your HTML, it's a mess. If you want the links to look like they're in a button, put them in a div element and style that to look like one, instead of abusing semantically wrong elements for it.
<a> is not allowed inside <button>
Phrasing content, but there must be no interactive content descendant.
<a> is interactive content (regardless of whether it has an href apparently, but yours do). Thus you can't depend on having the links as children of the button and what Firefox is doing is correct. Use another element to contain the <a>s
I have two links inside a button but […]
“Yeah, but let me stop you right there …”
http://www.w3.org/TR/html5/forms.html#the-button-element:
4.10.8 The button element Content model: Phrasing content, but there must be no interactive content descendant.
--->
Interactive content is content that is specifically intended for user interaction.
⇒ a, audio […]
So, if you are writing invalid HTML, expect unexpected behavior ;-)
You can add this in the button element.
onclick="window.location.href='/link1'"
Example
<button onclick="window.location.href='/login'">Login</button>
That's invalid HTML,
Do something like this instead:
<ul>
<li>Log in</li>
<li>Sign up</li>
</ul>
Use javascript: window.location for the button.
<div class="product">
<button onClick="javascript: window.location='/checkout/outfield-
banner/1'">Add to Cart</button>
</div>
Or, you can put the button inside the anchor, it won't have the exact same look since it'll be two different buttons, but it will be a button that acts as a link. It's still not technically correct but it does work in FireFox.
<a href="/login">
<button class="btn login">
<b>Log In</b>
</button>
</a>
<a href="/signup">
<button class="btn login">
<b>Sign Up</b>
</button>
</a>