google-chrome - Getting an error element not interactable: element has zero size only in chrome browser
问题描述
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!
解决方案
我无法发表评论 - 所以这就像评论一样
起初我怀疑是 Chrome 错误,但现在我认为它的字面意思是 - 你需要检查你的 CSS - 与零大小有关。也许 css 不是你的爱好之一(如果我错了,写一个很好的评论,我会闭嘴)
如果有任何问题,包括拼写错误,运行验证器 或/和css_validator会写信给你(有时它会遗漏一些东西,但很少)
如果这没有帮助,请检查浏览器中的页面代码 - (开发人员工具或类似工具)它会以颜色和字面意思显示与您的 css 和 html 相关的所有内容。
您正在寻找任何大小为零 - font-size: 0
, height: 0
,
... 也font: normal normal 0 tahoma, sans-serif
- 它是这样的:font: style variant weight size line-height font-family
但是可以省略一些值...这并不容易
可能这个长长的名单之一是罪魁祸首:
<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>
嗯,我希望你能通过调查发现:)
在你的浏览器中,右键菜单应该是这个工具或alt+command+i
支持
,如果你弄得一团糟 - 用 x 关闭并再次打开将返回默认外观
在顶部你应该有元素E
(html),底部样式S
和角落里奇怪的图片(像毕加索这样的立体主义)P
点击E
你的悲剧<a>
并向下阅读S
- 左边就像:
a{ font-size: 0;
右边你有链接https://.../style.css:123
=address:line
指向包含这个的文件.. .creature,
但首先你可以测试到底是什么原因 - 用小复选框 - 禁用/启用 - 有时它会很好地发挥
它emulates behaviour without this piece
,你也可以(将鼠标悬停在 3 个垂直点下)insert Style Rule
- 可能会有所帮助(或不)找到解决方案...
...您的代码闻起来像引导程序或其他我不使用的东西。
我不知道您是如何创建 css 的 - 如果按照上述操作后您确切知道要更改/删除/添加什么,
如果您不知道如何创建,请执行此操作 - 让我知道......好吧,我们会看到
担心的是 CSS 是遗传的
- 出于某种原因,这些奇怪的属性被使用了——也许是错误的,也许是故意的
- 如果您更改类属性,它将影响类的每个元素,无论它们在哪里
- 如果从 中删除一个类名
<a>
,它将丢失该类的所有属性 - 元素之间总是可以存在其他更复杂的关系,例如
.class div.class2 a.class {}
在这种情况下,破坏性最小的盲目解决方案是从<a>
元素中删除类名,并在必要时添加内联补丁......
我再次阅读了您的问题-webdriverio 5 和黄瓜-我不知道..
我认为您应该阅读此内容
推荐阅读
- java - 我想要如图所示的轮廓文本字段,未单击edittext或微调器我想要与按钮单击上的视图相同
- html - 将 Boostrap 和纯 HTML CSS 文件合并到 wordpress 主题中?
- python - 导入中的 Pandas 和循环引用问题
- amazon-web-services - Terraform RKE 提供者与 Rancher2 提供者
- linux - 使用 FIFO 进行进程间通信
- unity3d - 如何在运行时更改材质颜色和发射颜色
- snowflake-cloud-data-platform - Snowflake JDBC TIME 数据类型值转换为 UTC
- mysql - Docker容器无法连接到主机上运行的mysql
- c - 数据结构和指针 - C 代码解释
- entity-framework - 即使表未更改,也将 AddColumn 添加到迁移中