获取不可交互的错误元素：元素仅在 chrome 浏览器中的大小为零

Question

我只在 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 中的 sn-p：

    <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 运行测试通过就好了（无头或非无头版本），但在 chrome 中（无头或非无头版本）我收到此错误。
另外我必须提到，测试调整窗口大小以使用以下命令模拟移动/响应能力：
browser.setWindowSize(300, 700);

有人知道如何为 chrome 解决这个问题吗？有人遇到过类似问题吗？
非常感谢任何形式的帮助。
谢谢！

Answer 1

我不能评论 - 所以这是评论式的

起初我怀疑是 Chrome 错误，但现在我认为它的字面意思是 - 你需要检查你的 css - 与大小零相关。 也许 css 不是你的爱好之一（如果我错了，写一个好评论，我会闭嘴）

运行validator or/and 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+isupport
如果你弄得一团糟 - 用 x 关闭并再次打开将返回默认外观

在顶部你应该有元素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 - 可能有助于（或不）找到解决方案...

...您的代码闻起来像引导程序或其他我不使用的东西。
我不知道您是如何创建 css - 如果按照上述操作后您确切知道要更改/删除/添加什么就这样做
如果你不知道怎么做 - 让我知道...好吧，我们会看到

---

问题是 CSS 是遗传的

• 出于某种原因使用了这些奇怪的属性 - 可能是错误的，也可能是故意的
• 如果您更改类属性，它将影响该类的每个元素，无论它们在哪里
• 如果您从<a> 中删除一个类名，它将丢失该类的所有属性
• 元素之间总是可以存在其他更复杂的关系，例如.class div.class2 a.class {}

在这种情况下，破坏性最小的盲目解决方案是从 <a> 元素中删除类名，并在必要时添加内联补丁...

---

我再次阅读了您的问题 - webdriverio 5 和 cucumber - 我不知道..
我认为你应该阅读this

Answer 2

我遇到了这个问题，并找到了很多在 NodeJS 上的 Webdriver.io v4 中发生这种情况的原因：

1. 您正在尝试点击一个 ID，其中有多个具有该 ID 的元素。
2. 您尝试单击的 DOM 元素为零 width、height、font-size、line-height 等。
3. 有东西覆盖了要点击的元素。
4. 它尝试点击的内容与您认为它尝试点击的内容不同。

您可以通过直接点击您希望点击的内容的中间来覆盖 #2 和 #3。它有效吗？如果在 UI 中无法点击，那么 webdriver.io/chromeDriver 也无法点击。

在我的情况下，它是 #1，但我被骗以为一切都很好，因为我使用了 JQuery（即$("#myId").length）和document.getElementByID("myId")，并且只有一个元素。 他们撒谎！他们只希望通过该 ID 得到一件事，因此他们找到了第一个并将其归还。即使有 50 个，这两种方法也只会显示给定 ID 的一个项目。

要查找是否存在具有相同 ID 的第二个元素，您需要：

1. 按 CTRL-SHIFT-I 在 Chrome 中打开开发者工具
2. 转到Elements 标签。
3. 按 CTRL-F 进行搜索。
4. 输入您的预期 ID（例如“myId”）并继续搜索以确保只有一个。