檢查以查看元素是否可見

我有一個列在非角度頁面上的應用程序列表。可用的應用程序列表取決於已支付的訂閱級別。如果訂閱級別沒有購買應用程序，則應用程序仍然列出，但是應用程序覆蓋了該應用程序。（請看照片）。檢查以查看元素是否可見

的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();

然而，想到的是返回false。其他應用程序的HTML，注意到灰色在覆蓋類

來源

2015-09-23 Nicole Phillips

你不應該只是檢查元素'hasClass（'overlay'）'？ – dcohenb

@dcohenb他們都有在html中的類。我添加了其他應用程序html的外觀圖片。 –

你的'div.overlay'將始終在DOM中，但它會根據訂閱級別使用css和javascript進行更改。是對的嗎？對於一種預訂級別的前 - 應用div.overlay，如果訂閱存在，則不應用它。或者，如果它不需要特定的div.apps-item，它會從DOM中刪除嗎？謝謝 –

如果您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();

希望它有幫助。

來源

2015-09-23 15:25:35

我沒有得到任何顏色，我只收到null –

我建議嘗試'期望（元素（by.className（'overlay'））。getCssValue（'background-color'））。toEqual（'gray' ）;'看看是否返回正確的值。 –

對，我忘了糾正它，謝謝約翰。更新了我的代碼@NicolePhillips。由於CSS值將是控制div屬性的值，我們應該獲取css值。 –

檢查以查看元素是否可見

回答

相關問題