检查元素是否可见

Question

我有一个非角度页面列出的应用列表。可用的应用程序列表取决于支付的订阅级别。如果订阅级别没有购买应用程序，则应用程序仍会列出，但应用程序上会有覆盖。 （请看图片）。

html看起来像这样：

<div class="apps-item apps-no-border disabled">
  <div class="apps-name">
    <span>Interactive Event Diagrams</span>
  </div>
  <div class="divider">
    <div class="apps-description">Interactive Event Diagrams is an indispensable online tool, allowing website visitors to view your meeting rooms and create their own customized event layouts according to their specific needs, all while using your venue’s available inventory. Users
      can email and save diagrams or images for future reference.</div>
    <div class="apps-image-preview">
      <img alt="Interactive Event Diagrams" src="/Content/Images/AppsPreview/interactive_event_diagrams.png">
    </div>
    <div class="apps-action">Not Purchased</div>
    <div class="overlay"></div>
  </div>
</div>

现在，如果购买了应用，则覆盖元素在html中以灰色阴影显示，并且在屏幕上无法显示。 （例如，Hotel Venue Explorer上没有灰色阴影）我希望能够查看是否看到叠加层。

我试过这个：

elm = element.all(by.css('div.apps-item')).get(5);
expect(elm.$('div.overlay').isDisplayed()).toBeTruthy();

然而，期望是假的。 其他应用程序html，请注意覆盖类上的灰色

Answer 1

如果您的div.overlay始终存在于DOM中，那么很难检查它是否显示，因为它将始终存在于DOM中，而您的css和javascript可能正在处理显示属性（如添加叠加层，如果它需要或不需要时添加它。另外，对于一个空的html元素，检查isDisplayed函数并不是我所知道的。

为了验证它，您可以检查负责灰化功能的css属性。这是怎样的 -

elm = element.all(by.css('div.apps-item')).get(5);
//Use your css attribute that greys the apps-item div like height, width, color, etc...
expect(elm.$('div.overlay').getCssValue('background-color')).toEqual('grey'); 
expect(elm.$('div.overlay').getCssValue('width')).not.toBeNull(); //If you know the width then you can check for equality or greaterThan(someVal).
expect(elm.$('div.overlay').getCssValue('height')).not.toBeNull();

希望它有所帮助。