Getting an error element not interactable: element has zero size only in chrome browser

user_640022 0
Viewed 4285

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!

webdriver-io google-chrome
2 Answers

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

user_140125420

I had this issue and found a ton of reasons why this can happen in Webdriver.io v4 on NodeJS:

  1. You are trying to click on an ID where there are multiple elements with that ID.
  2. The DOM element you are trying to click on has zero width, height, font-size, line-height, etc.
  3. There is something covering the element to be clicked on.
  4. 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:

  1. Press CTRL-SHIFT-I to open developer tools in Chrome
  2. Go to the Elements tab.
  3. Press CTRL-F to search.
  4. Type in your expected Id (ex. "myId") and keep searching to make sure there is only one.
user_4915530
Related