I want to hover over the "My Account" button and the click the "Login" button opened popup. I have tried the below code but it did not work. Does anyone know a way to handle this situation?
Cypress.Commands.add('loginol', (email, password) => {
cy.get('#myAccount').click()
cy.get('#myAccount').trigger('mouseover')
cy.wait(3000)
cy.get('#login').click()
cy.get('#email').type(email)
cy.get('#password').type(password)
cy.get('.btn.full.btn-login-submit').click()
})
I have uploaded the pictures in case it helps:
"Giriş Yap (My Account)" Button
After it is hovered below "Giriş Yap (Login)" Button
Website I'm working on: https://www.hepsiburada.com/
//cypress doesn't know how to hover so 'invoke' call JQuery 'show' method which force menu to become visible
cy.get('#myAccount').invoke('show');
that worked for me.
You don't have unique id's, assign unique id's to your elements
From the source code of your website:
So what happens is you are triggering the mouseover on the widget, the first myAccount item, the widget container. On this item you don't have any events bound, they are bound on the second item tagged with id="myAccount"
ID needs to be unique
To resolve make the id of your button something like id="myAccount_button" and target that in your test script.
Below is a snippet that simulates your website. It doesn't show the menu.
$('#myAccount').trigger('onmouseover');
#menu {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myAccount">
<div id="myAccount" onmouseover="$('#menu').show()" onmouseout="$('#menu').hide()">
my account
</div>
</div>
<div id="menu">
a<BR/>
c<BR/>
d<BR/>
e<BR/>
</div>
This is the snippet with the fix. As you can see, the menu shows here, because the ID is unique and can be targeted.
$('#myAccount_button').trigger('onmouseover');
#menu {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myAccount_wrap">
<div id="myAccount_button" onmouseover="$('#menu').show()" onmouseout="$('#menu').hide()">
my account
</div>
</div>
<div id="menu">
a<BR/>
c<BR/>
d<BR/>
e<BR/>
</div>
For a workaround and from the official cypress website they're mentioning cypress-real-events plugin which can be helpful for a real events that require event.isTrusted to be true, it provide hover and more real events, so you can use it as a real user and test your elements such as a tool-tip messages, expendable lists,... etc.
Note: for current time it support only chromium's based web browsers
Related
In the code below is a website with a star rating bar. Stars can be clicked. But when I open the chrome developer console to see the javascript code, there are no button tags. Are the 5 stars considered buttons?
Isn't there supposed to be a click event listener?
When I click on a star it turns blue. How can this work?
And which part of the code is exactly the button? Is it this line?
<i class="svi-star ratingicon-full"></i>
<div class="subject-answer">
<div class="ratingbar-container" steps="5">
<div class="ratingbar-wrap" style="height: 40px; font-size: 38px;">
<div class="rating" rel="1">
<i class="svi-star ratingicon-full"></i>
<i class="svi-star-o ratingicon-outline">
</i>
</div>
<div class="rating" rel="2">
<div class="rating" rel="3">
<div class="rating" rel="4">
<div class="rating" rel="5">
</div>
<div class="input-wrapper">...</div>
</div>
</div>
(I just can not copy and paste, I have to buy another coffee first to get a new code to be able to open this website, but I hope the code part I just typed is enough for now)
On the left is the webpage with the rating bar, on the right is the corresponding javascript code (chrome dev console):
![on the left is the webpage with the rating bar, on the right is the corresponding javacode (chrome dev console)][1]
You can have click event on every html element there is. Therefore anything can be a button.
document.querySelector('.div').onclick = () => {
console.log('clicked on a div');
}
document.querySelector('.span').onclick = () => {
console.log('clicked on a span');
}
.div {
background-color: red;
width: 100px;
height: 100px;
}
.span {
background-color: blue;
color: white;
}
<div class="div">
<span class="span">this is a clickable span</span>
</div>
It's possible to create things which are not buttons which can still be clicked (any element can have a click event listener added to it), and in this case, it appears that the website has some italic elements with no contents and some styling with such associated JavaScript.
Best practice is to use semantic HTML which, in this case, would be <button> elements (or possibly <input type="radio">) as these come with all sorts of affordances (which are particularly useful for accessibility purposes as they allow, for example, an arthritic user who can't operate a mouse to navigate with the Tab key or a blind user to access the content with a screen reader).
Note that depending on your geographical location, your audience's geographical location, and the type of service your website offers: You may be legally required to ensure it is accessible.
every HTML element can have an event listener called onClick, it can be a <div> that you can click, it can be <span>, in this case, it's a <i>.
Everything is normal don't worry ;)
Make sure to add the css {cursor: pointer;} so when you hover it will show the hand :)
Comment for more UX questions.
I have been looking for solution, but i don't find anything, that would suit me. I got a page with header and content divs. Content div is not visible. After clicking on item in nav menu, I want to hide header, and show chosen article. I achieved it, but when I try to get to article by url#name nothing happens.
"jsfiddle" wont be useful in this case, but i will paste it to show my code.
Is there different way to do it? Maybe somehow hide articles with code, then just change opacity, maybe use "addclass" from jquery? I don't really know, im mixed and stuck.
Thanks for help.
https://jsfiddle.net/edby86ta/8/
You can also do it in full css :
https://jsfiddle.net/edby86ta/11/
In this case, the hardest part is hiding it again. You'd have to have a "close" button directing to another (maybe nonexistant) anchor :
Close
You can apply very simple JS conditions to show and hide your articles based on the link, I`ve updated you JSfiddle.
https://jsfiddle.net/edby86ta/10/
$(function () {
//GET HASH FROM URL, CHECK IF ELEMENT EXISTS AND THEN SHOW IT
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length){
$(hash).show();
}
})
$(".article-nav a").on("click", function () {
$(".main-article").hide();
console.log($(this).attr("id"));
$('#article-' + $(this).attr("id")).show();
});
});
article {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<ul class="article-nav">
<li><a id="1" href="#article-1">Article 01</a></li>
<li><a id="2" href="#article-2">Article 02</a></li>
</ul>
</nav>
</header>
<div id="content">
<article id="article-1" class="main-article">Article 01 Lorem ipsum</article>
<article id="article-2" class="main-article">Article 02 Lorem ipsum</article>
</div>
<footer></footer>
Advice: Be aware that the user can change the hash as he wants, injecting anything to your selector, you should check the hash before using it.
How would I create a welcome screen on my web site? For Example: I have an image and a link that says "ENTER" when the user clicks enter the web site appears. How would I do that? Also if possible with JavaScript or JQuery, When the user clicks "ENTER", would it be possible to crossfade from the splash screen to the web site? I want that the link be functional within any element/tag on the DIV splash.
I have this code:
$('.Intro').click(function()
{
$(this).parent('#Intro').fadeOut(1000);
});
But it only works with:
<DIV id="Intro">
ENTER
</DIV>
And not with:
<DIV id="Intro">
<DIV class="EnterII">
ENTER
</DIV>
</DIV>
Therefore, just within the DIV Intro...
Why do you need to complicate?
As identifiers must be unique. Simply use ID selector
$('#Intro').fadeOut(1000)
<DIV id="Intro">
<DIV class="EnterII">
ENTER
</DIV>
</DIV>
With a little bit of indentation you can see that in this case the parent() function will return EnterII so that is the div that will be faded out. Use jquery closest() in order to get intro
$('.Intro').click(function(){
$(this).closest('#Intro').fadeOut(1000);
});
Have you tried just:
$('#Intro').fadeOut(1000);
instead of
$(this).parent('#Intro').fadeOut(1000);
I am trying to use JQuery toggle, so when a user clicks the info icon, the hidden div containing item information is shown / hidden. For some reason it is not working for me.
While trying to debug, I noticed that show(), correctly shows the target element that I would like to toggle. However, when I replace show() with toggle(), it does not work and does not return any error.
I was wondering if someone can help me identify the cause of this problem.
My Markup
<div class="option">
<div class="prod-text">Toy Whistle </div>
<div>
<img class="info-icon" src="Info-icon.png">
</div>
<div class="option-info" style="display:none;">
<div>
<div class="price-text">Price: $100</div>
<div class="prod-id-text">Item Number: 231912</div>
<div class="quantity-text">Quantity: 72</div>
</div>
</div>
</div>
JQuery (does not work)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').toggle();
});
JQuery (works!)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').show();
});
Many thanks in advance!
Perhaps the click event handler is getting bound twice, and thus fire twice for each click. The show() would work fine in this case, but the toggle() would show and then immediately hide the element each time you click. Try this:
$(".info-icon").click(function(){
console.log('click handler fired');
$(this).parent().parent().find('.option-info').toggle();
});
And run this with Web Inspector or Firebug enabled to see how many messages are logged for each click.
I have been researching and learning more and more about HTML 5, jQuery, CSS3, and the power of hiding and disabling certain elements when JavaScript is or is not disabled. (<noscript> tags)
My questions are,
How do I make a hyperlink ONLY work if JavaScript is DISABLED?
If JavaScript is enabled, how do I make sure that my drop-down login menu displays INSTEAD of following the hyperlink?
HTML
Simple enough, I hide my cart area and change the login link if the JS is disabled.
<!-- If JavaScript is disabled it will make the login link take you to a login page instead of a drop-down box. -->
<noscript>
<style>
.login-form, .js-enabled{
display: none;
}
.cart{
top: -80px;
}
</style>
<div class="cart">
<a href="#" id="cart_img">
<img src="img/bag.jpg" alt="Check Cart"
onmouseover="this.src='img/bag-gold.jpg'"
onmouseout="this.src='img/bag.jpg'">
</a>
Why HorseTack? |
About |
Contact |
Login
</div>
</noscript>
<!-- End JavaScript text -->
<div class="cart js-enabled">
<a href="#" id="cart_img">
<img src="img/bag.jpg" alt="Check Cart"
onmouseover="this.src='img/bag-gold.jpg'"
onmouseout="this.src='img/bag.jpg'">
</a>
Why HorseTack? |
About |
Contact |
Login
<div class="login-form">
<form class="login-frm">
<label><input type="text" placeholder="Username"></label>
<label><input type="password" placeholder="Password"></label><br>
<input type="submit" value="Login"><br>
New User?
</form>
</div>
</div>
JQuery
This makes the login-box slide down (just to avoid taking people to a login page unless they have to)
// Login Box Pop-Up
jQuery(document).ready(function() {
jQuery(".login-form").hide();
//toggle the componenet with class msg_body
jQuery(".login-box").click(function()
{
jQuery(this).next(".login-form").slideToggle(500);
});
});
What I would like instead of having that <noscript> tag and the content duplicated, just a way for the hyperlink to only work when there is no JavaScript.
I have already set the page up to let users know when their JS is disabled (like Stack Overflow has done)
Any questions about my question (hopefully I wasn't vague?) ask!
How do I make a hyperlink ONLY work if JavaScript is DISABLED?
If JavaScript is enabled, how do I make sure that my drop-down login menu displays INSTEAD of following the hyperlink?
Write a JavaScript function that causes the menu to be displayed. Make sure that it captures the first argument (which will be the event object).
Bind the function to the link as an event handler.
Call preventDefault() on the event object.
function (event) { /* display menu then ... */ event.preventDefault(); }
<noscript> tags
There are almost always the worst solution to a problem. Be progressive and unobtrusive.
You could show the link, and if javascript is enabled, hide it.
You can put the link inside a div, and if JS is enabled, remove the link and put an event to that div
Like:
<div class="link-holder">
Link
</div>
And jQuery:
$(document).ready()
{
$('.link-holder').text('').click(function(){
displayLogin(); //assuming displayLogin() has your function to, well, display the login
});
}