我仅在 Chrome 浏览器中收到此错误:
element not interactable: element has zero size (Session info: chrome=84.0.4147.105)
当我尝试单击 <a href="/cart" class="button--counter header__mini-basket" ...></a>
时.
这是我的 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>
我尝试以不同的方式定位元素:
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
但没有任何帮助。
这是我在测试中得到的:
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();
}
我正在使用 webdriverio 5 和 cucumber。
有趣的一点是,针对 Firefox 运行测试运行得很好( headless 或非 headless 版本),但在 Chrome 中( headless 或非 headless )我收到此错误。
另外我必须提到,测试调整窗口大小以使用以下命令模拟移动/响应能力:
browser.setWindowSize(300, 700);
有人知道如何解决 chrome 的这个问题吗?有人遇到过类似的问题吗?
非常感谢任何形式的帮助。
谢谢!
最佳答案
我无法发表评论 - 所以这就像评论
一开始我怀疑 Chrome 存在 bug,但现在我认为它的字面意思是 - 你需要检查你的 css - 与大小零相关。 也许 css 不是你的爱好之一(如果我错了,写一个好的评论,我就会闭嘴)
运行validator 或/和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
support
如果你弄乱了 - 用 x 关闭并再次打开将返回默认外观
在顶部你应该有 Elements E
(html),底部样式 S
角落里的奇怪图片(像毕加索的立体主义)P
在E
点击你的悲惨<a>
并阅读S
- 左边是这样的:
a{ font-size: 0;
右侧内嵌有链接 https://.../style.css:123
=address:line
包含此...生物的文件,
但首先你可以测试到底是什么是罪魁祸首 - 用小复选框 - 禁用/启用 - 有时玩这个它效果很好
它emulates behaviour without this piece
,您也可以(将鼠标悬停在周围,Opera 在 3 个垂直点下有此)insert Style Rule
- 可能有助于(或没有)找到解决方案...
...你的代码闻起来像 Bootstrap 或其他我不使用的东西。
我不知道你如何创建 css - 如果按照上述操作后你确切知道要更改/删除/添加什么就这样做
如果您不知道如何操作 - 请告诉我...好吧,我们拭目以待
令人担忧的是 CSS 是遗传性的
- 出于某种原因使用了这些奇怪的属性 - 也许是错误的,也许是故意的
- 如果更改类属性,它将影响类中的每个元素,无论它们位于何处
- 如果从
<a>
中删除类名,它将丢失该类的所有属性 - 元素之间总是可能存在其他更复杂的关系,例如
.class div.class2 a.class {}
在这种情况下,破坏性最小的盲目解决方案是从 <a>
中删除类名。元素,并在必要时添加内联补丁...
我再次阅读了你的问题 - webdriverio 5 和 cucumber - 我不知道..
我认为你应该阅读this
关于google-chrome - 获取错误元素不可交互: element has zero size only in chrome browser,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63162290/