WebdriverIO 6：如何单击仅在悬停后可见的元素答案

【问题标题】：WebdriverIO 6: how to click on an element that is visible only after hoveringWebdriverIO 6：如何单击仅在悬停后可见的元素
【发布时间】：2021-01-18 03:39:24
【问题描述】：

我正在使用 WebdriverIO6 在此站点上创建一个演示：http://automationpractice.com/index.php。
我正在尝试做一个“简单”的场景。

Feature: Dashboard
Test dashboard functionalities

Background: Open dashboard page
Given I visit home page

Scenario: Open Product Detail Page of the last product in the list
When I click on the last product in the list
Then Product Detail Page of the last product opens

当我尝试单击列表中最后一个产品的“更多”按钮以打开其产品详细信息页面时，我收到element not interactable 错误。
这是我在尝试单击“更多”按钮的方法中尝试过的：

clickLastProductImage(productId: number) {
   browser.waitUntilListIsDisplayed(this.popularProducts, productId, 10000);
   const element = this.popularProductMoreButton(productId);
   console.log("in view port", element.isDisplayedInViewport()); // this results in false
   // element.scrollIntoView();
   element.moveTo();
   console.log("in view port", element.isDisplayedInViewport()); // BUT this also results in false 
   element.waitForDisplayed(); // this throws an error because the element is not displayed; without this 
                               // I get element not interactable error
   element.click();
 }

这是元素的选择器：

popularProductMoreButton(productId: number): WebdriverIO.Element {
return $('#homefeatured.product_list a.button.lnk_view[href*="id_product=' + productId + '"]');
}

我尝试的任何方法都不起作用，它根本无法滚动到该元素。
只有将鼠标悬停在产品图片上才能看到“更多”按钮，这是否存在问题？
这是github上的源代码链接：https://github.com/mareru/webdriverIO-shop-demo
请帮忙！
谢谢！

【问题讨论】：

标签： typescript automation webdriver-io

【解决方案1】：

这终于奏效了。我必须先 scrollIntoView 然后移动到需要悬停的元素（在这种情况下它是最后一个产品图像）。之后我不得不点击“更多”按钮。
这是有效的代码：
最后的产品图片选择器：

productImage(productId: number): WebdriverIO.Element {
return $('#homefeatured.product_list a.product_img_link[href*="id_product=' + productId + '"]');
}

方法：

clickLastProductImage(productId: number) {
    browser.waitUntilListIsDisplayed(this.popularProducts, productId, 10000);

    const productImage = this.productImage(productId);
    productImage.scrollIntoView();
    productImage.moveTo();

    const element = this.popularProductMoreButton(productId);
    console.log("in view port", element.isDisplayedInViewport());
    element.waitForDisplayed();
    element.click();
}

【讨论】：