This is something quite bizarre that I can't seem to explain.
On my magento shop I created a link to the content area and it's a simple a href link. Though sometimes when you click the link you just end up on the shop again, instead of following the link.
Page that this is happening on: http://www.musculi.com/
link I'm trying to click and that should redirect to /content is "Articles, Athletes and More" (the blue button)
Any ideas why this might be happening?
<li class="nav-item level0 level-top right">
<a class="level-top" href="http://musculi.com/content" title="Musculi Content: Articles, News & more">
<span>onze atleten, nieuws en meer</span>
</a>
</li>
EDIT: This one minute video illustrates my problem: (once the link works, it keeps working until you clear your cache, then it works on the second or third time it gets clicked)
https://youtu.be/uyrmXK-RBR8
Related
I have been getting this error only in chrome browser:
element not interactable: element has zero size (Session info: chrome=84.0.4147.105)
when I try to click on <a href="/cart" class="button--counter header__mini-basket" ...></a>.
This is the snippet from my DOM:
<nav class="header__navigation">
<div class="user-section">
<ul class="user-section__list">
<li class="user-section__item user-section__item-my-account js-my-account">
My account<ul class="dropdown dropdown__my-account-desktop">
<li>
<div class="spacer"></div>
</li>
<li>
<div class="arrow-up"></div>
</li>
<li>
<a href="/my-account" role="button" class="my-account__link button button--inverse atm-nav-account" title="My account details">
My account details</a>
</li>
<li>
<a href="/logout" class="logout__link button button--inverse atm-nav-logout" role="button" title="Log out ">
Log out</a>
</li>
</ul>
</li>
<li class="user-section__item">
<a href="/wishlist" class="header__my-wishlist-link atm-nav-wishlist" title="Wishlist">
Wishlist</a>
</li>
<li class="user-section__item dropdown">
<a href="/cart" class="button--counter header__mini-basket" data-toggle="dropdown" data-close-on-bounce="false" data-toggle-status="closed" data-toggle-has-overlay="">
<span class="counter-bubble">
<span class="counter-bubble__quantity">
<span class="cart-counter-wrapper" style="display: inline;">
<span class="counter-bubble__quantity cart-counter" data-counter-type="cart-counter">1</span>
</span>
<span data-counter-type="cart-title">
My cart</span>
</span>
</span>
</a>
<div class="my-account__background-overlay js-account-background-overlay display-none"></div>
</div>
</nav>
I have tried locating the element in different ways:
li.user-section__item a.header__mini-basket
ul.user-section__list a.header__mini-basket
div.user-section a.header__mini-basket
nav.header__navigation a.header__mini-basket
but nothing helped.
This is what I have in the test:
clickOnMiniBasketIcon(){
this.cartIcon.waitForExist(TIMEOUT_5000_MS);
this.cartIcon.waitForDisplayed(TIMEOUT_5000_MS);
this.cartIcon.waitForEnabled(TIMEOUT_5000_MS);
this.cartIcon.scrollIntoView({block: "center"});
this.cartIcon.waitForClickable({timeout: TIMEOUT_3000_MS});
this.cartIcon.click();
}
I am using webdriverio 5 and cucumber.
Interesting point is that running the test against firefox is passing just fine (headless or non headless version) but in chrome (headless or non headless) I get this error.
Also I have to mention that the test resizes window to mock mobile/responsiveness with the command:
browser.setWindowSize(300, 700);
Does anybody have any idea how to resolve this for chrome? Anybody had similar issue?
Any kind of help is very much appreciated.
Thanks!
I can't comment - so this is comment-like
I suspected a Chrome bug at first, but now I think it literally means - you need to check your css - in relation to size zero.
Maybe css is not one of your hobbies (if I'm wrong, write a nice comment and I'll shut up)
Run validator
or/and css_validator will write to you if there are any problems, including spelling errors (sometimes it miss something, but very rarely)
If that doesn't help, check the page code in your browser - (tools for developers or similar) it will show you in colors and literally everything related to your css and html.
You are looking for any size zero -font-size: 0, height: 0,
... also font: normal normal 0 tahoma, sans-serif - it goes like this : font: style variant weight size line-height font-family but some of values can be omitted... It won't be easy
Probably one of this long list is to blame:
<ul class="user-section__list">
<li class="user-section__item dropdown">
<a href="/cart"
class="button--counter header__mini-basket"
data-toggle="dropdown"
data-close-on-bounce="false"
data-toggle-status="closed"
data-toggle-has-overlay="">
<span class="counter-bubble">
<span class="counter-bubble__quantity">
<span class="cart-counter-wrapper" style="display: inline;">
<span class="counter-bubble__quantity cart-counter" data-counter-type="cart-counter">1</span> //</span>
<span data-counter-type="cart-title">
My cart</span> //</span></span></a>
Hm, I was hoping you will find out due to investigation :)
In your browser right-click menu should be this tool or alt+command+i support
if you make a mess - close with x and open again will return with default look
on top you should have Elements E (html), bottom Styles S and in the corner strange picture (cubism like Picasso) P
in E click your tragic <a> and read down in S - on left is like:
a{ font-size: 0; inline on right you have link https://.../style.css:123 = address:line to file containing this ...creature,
but first you can test what exactly is blame - with little checkboxes - disable / enable - play with this sometime it works wonderfully
It emulates behaviour without this piece, you may also (hover mouse around, Opera has this under 3 vertical dots) insert Style Rule - may help (or not) to find solution...
... your code smells like bootstrap or something else what I don't use.
I don't know how you create css - if after following the above you know exactly what to change/remove/add just do it
if you don't know how - let me know... well, we will see
The concern is that CSS is hereditary
for some reason these strange properties were used - maybe by mistake, maybe on purpose
if you change class properties it will affect every element of the class wherever they are
if you remove a class name from <a>, it will lose all properties of that class
there can always be other, more complicated relationships between elements, such as .class div.class2 a.class {}
The least damaging blind solution in this case, is to remove the class name from the <a> element, and to add inline patches if necessary...
I read once again your question - webdriverio 5 and cucumber - unknown for me..
I think you should read this
I had this issue and found a ton of reasons why this can happen in Webdriver.io v4 on NodeJS:
You are trying to click on an ID where there are multiple elements with that ID.
The DOM element you are trying to click on has zero width, height, font-size, line-height, etc.
There is something covering the element to be clicked on.
It's trying to click on something different than what you think it's trying to click on.
You can cover #2 & #3 by clicking directly in the middle of the thing you expect to click on. Does it work? If you can't click on it in the UI, then webdriver.io/chromeDriver can't click on it either.
In my case, it was #1, but I was duped into thinking everything was fine because I had used JQuery (ie. $("#myId").length) & document.getElementByID("myId") and there was only a single element. They lie! They only expect one thing by that ID so they find the first one and return it. Those two methods will only show one item for a given ID even if there are 50.
To find if there's a second element with the same ID, you need to:
Press CTRL-SHIFT-I to open developer tools in Chrome
Go to the Elements tab.
Press CTRL-F to search.
Type in your expected Id (ex. "myId") and keep searching to make sure there is only one.
Let me start by saying I am an absolute noob when it comes to coding. I hope this is the right place to post this as I am totally baffled.
I am using Wordpress Gutenberg to create a long article. I have a main table of contents near the top of the page (using the Table of Contents plugin). I also created anchor links within each section of the post to help ease navigation within each section.
Here is the link to help visualize: https://www.projectuntethered.com/best-gifts-for-travelers/
After finishing the post, I realized that the anchor links work at random. Sometimes they jump to the right spot, sometimes they don't.
For example, when I first load the page and click a link from the main table of contents, it doesn't go to the right place. But then if I scroll back to the top and try it a second time, it works.
The same happens with the anchor links within each section—usually the first try doesn't work and the second try does work.
Again, my apologies in advance if this isn't the place to post this. I'm new to this and didn't know where else to ask. Thanks!
Anchor link:
Hidden Pocket T-Shirt
Header it's supposed to jump to:
<h3 id="hidden-pocket-shirt-men"><a rel="noreferrer noopener nofollow" aria-label=" (opens in a new tab)" href="https://rads.stackoverflow.com/amzn/click/com/B00E9DJA5U" rel="nofollow noreferrer" target="_blank">Clever T-shirt with Hidden Pocket</a></h3>
Remove this
Hidden Pocket T-Shirt
This is what takes you to the top of the page.
Then change the link as
<a rel="noreferrer noopener nofollow" aria-label=" (opens in a new tab)"
href="https://rads.stackoverflow.com/amzn/click/com/B00E9DJA5U" rel="nofollow noreferrer" target="_blank">
<h3 id="hidden-pocket-shirt-men">Clever T-shirt with Hidden Pocket</h3>
</a>
I have a dropdown menu where each option send the user to an element in another page. It is working perfectly for desktop, but in mobile it works fine only for the first time.
Example: if in mobile the user select for example
"Galway", the user will be sent to the page 2 and where galway element is, if after that the user go back to the main page and select "Dublin", the user will be sent to the page 2, but where the galway element is, instead of dublin. Even the url will be showing galway, and it will be always galway it doesn't matter what I try to select unless I clean the browser cache.
In the page 1
<ul class="dropdown-menu" role="menu">
<li>
Dublin
</li>
<li>
Galway
</li>
<li>
Cork City
</li>
<li>
</ul>
In the page 2
<div id="provider-dublin" class="same_width doctor_detail_wrap">
<div class="doctor_img_wrap">
<img src="https://clear.juvo.dev/wp-content/uploads/2019/07/cliona-fergey-circle-1-2.png">
</div>
<div class="doctor_detail">
<h2>Blackrock</h2>
<h3>Dr Cliona Fergey</h3>
<h3>Dental Options Cork</h3>
<p>Blackrock Hall Primary Care Centre</p>
<p>Skehard Road</p>
<p>Blackrock</p>
<p></p>
</div>
</div>
And the other elements with different ids
The answer was copied from https://stackoverflow.com/a/22643441/3238940
Opera, IE, Chrome and Firefox will carry over the anchor to the new page. However, Safari loses the anchor on the redirect.
So what if you add / just before the ID Tag?
Old URL Path:
http://www.example.com/my-example-article-url-is-like.php#articlebottom
New URL Path:
http://www.example.com/my-example-article-url-is-like.php/#articlebottom
Another solution is that you'd have to delete both "www." from the domain and add a forward slash before the anchor tag in the URL/pathname before Safari would respond properly. Firefox doesn't seem to care, and I haven't gotten to testing on IE yet.
***Hope this might help other's without much trouble.***
I have an index.html that includes:
<li>
<a href="imprint.html#imprint-link">
<div class="main-menu-title">IMPRINT</div>
</a>
</li>
When I click on this item another html file (imprint.html) is loaded, but when I click on Home, which includes the following code to go back to index.html, it doesn't work!
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
What is wrong here?
Update 1: When hovering the mouse over the link I get:
try using this code :
<a href="index.html">
<div class="main-menu-title">HOME</div>
</a>
inplace of :
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
To answer your original question.
What's wrong here?
As a couple kind folks already commented and one person already provided a nice solution, clicking on your original link
href="#index-link"
while you are on the imprint.html page will not take you to your index.html page. Why? Because
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
is saying, "Take me to an element on the current page (imprint.html) that has an ID of 'index-link'. If there is no element with and ID set to index-link, on the imprint.html page, nothing will happen. And, you will stay on the current page because you didn't specify an URL outside of the current page, which is still imprint.html.
So, with that current setup, you will not get to see index.html.
Hi guys I have bought this template, and I am trying to get a link into a sidebar (under links to tabs)
<ul class="nav2 nav">
<li class="selected">Seniors - Studies </li>
<br><div align="center"><img src="images/seniorbrochure.jpg" width="200" class="foo"><br>Download PDF<br><br><div class="heading">We Support</div></div></ul>
This is a bit of the code, as you see I have a link download PDF to pdf.pdf (just as testing) but whenever I click on it it actually loads a blank tab and doesn't try to go to pdf.pdf at all, I can't put the link outside of the ul tab or else the whole layout gets messed up, is there any way around this?
Is the filepath correct? "your website/folder/pdf.pdf" . Or maybe you could try putting a button in the sidebar to download it - <input type="button" value="Download PDF" onClick="window.location.href='/folder/pdf.pdf'">.