如何使用 WebDriver 验证 WebElement 是否显示在视口中？

Question

考虑以下场景，

1. 网页与垂直滚动条一起显示
2. 底部有滚动条
3. WebElement 'Test' 出现在页面顶部，现在在当前视口中不可见。

待验证的功能：

单击页面底部的“转到顶部”链接应滚动页面，以便 WebElement“测试”显示在视口中。

请告诉我如何使用 WebDriver 验证元素是否显示在当前视口中。

注意： 在上述情况下 element.isDisplayed 将始终为真，因为该函数会检查整个页面而不是仅检查当前视口。

Answer 1

   * This function determines if the YOffset ot top of the element falls between the top of the
   * client window and the bottom of the client window to determine if it's in the viewport.
   * @param selector
   * @return bool
   */
  async isElementInViewPort(selector) {
    // Get the needed  element dimensions using webdriver
    const elemLocation = await selector.getLocation();
    const elemTopBoundY = await elemLocation.y;
    // Get the needed client dimensions using javascript
    const winUpperBound = await this.driver.executeScript('return window.pageYOffset');
    const winHeight = await this.driver.executeScript('return document.documentElement.clientHeight');
    const winLowerBound = winUpperBound + winHeight;
    if (winUpperBound <= elemTopBoundY
      && winLowerBound >= elemTopBoundY) {
      return true;
    } return false;
  }

  /* waitForElementisinViewPort
   * This function determines if the YOffset ot top of the element falls between the top of the
   * client window and the bottom of the client window after an action such as a scroll.
   * The wait avoids trying to do anything before the element is in the viewport.
   * @param selector
   * @state selector
   * @param timeout
   * @return bool
   */
  async waitForElementToBeinViewPort(selector, state, timeout) {
    try {
      let isInViewpPort;
      await this.driver.wait(async () => {
        const bool = await this.isElementInViewPort(selector);
        isInViewpPort = bool;
        return bool === state;
      }, timeout);
      return isInViewpPort;
    } catch (err) {
      console.log(`Function: waitForElementToBeinViewPort failed ${err} `);
      return null;
    }
  }

Example test

  const links = [{ link: 'All Web hosting deals', selector: coupons.selector.COUPON_DEALS_WEB },
    { link: 'Domain name deals', selector: coupons.selector.COUPON_DEALS_DOMAIN },
    { link: 'How do you redeem these coupons', selector: common.baseselector.FOOTER_CTA }];

  describe('Coupons Page Extra Links section', () => {
    links.forEach(async (link, i) => {
      it('Click each Extra Links section link and verify an expected element is scrolled to', async () => {
        await coupons.visit(page = '/coupons');
        const nav = await driver.findElement(common.baseselector.mainNav);
        // Need a scroll to top so that other tests don't leave the element under test off the page initially.
        await driver.executeScript('arguments[0].scrollIntoView()', nav);
        const linksToClick = await coupons.getExtraPlanLinks();
        const element = await driver.findElement(links[i].selector);
        await assert.isFalse(await coupons.waitForElementToBeinViewPort(element, false, timeout),
          `element ${link.selector} should not be in the viewport`);
        await linksToClick[i].click();
        const bool = await coupons.waitForElementToBeinViewPort(element, true, timeout);
        assert.isTrue(bool, ` element ${link.selector} should be in the viewport`);
      });
    });
  });

Answer 2

@Vel Ganesh - 我不知道这是否可以使用 selenium 进行验证。但绝对可以使用 Sikuli 完成。您可以查看 sikuli.org 了解详细信息。 Sikuli 有一个 Java API，因此也可以与 WebDriver 代码集成。

Answer 3

好吧，作为我想到的最后一件事，我会去做这样的事情：

1. 点击底部的链接后获取任何你有的截图（确保它只给你查看端口截图）
2. 使用 Webdriver 的 window.scrollTo 转到顶部（见下文）
3. 重复第一步
4. 比较第 1 步和第 3 步的结果

使用 webdriver 滚动的位置应该如下：

JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("window.scrollTo(0,0)");

这似乎是一种绝望的解决方法，但如果没有建议其他解决方案，可能值得一试。