CODEWITHSUNDEEP
javascriptangularjsseleniumselenium-webdriverprotractor
Nicole Phillips
Nicole Phillips

Reputation: 763

Checking to see if element is visible

I have a list of apps that are listed on a non angular page. The list of apps that are available depends on what subscription level was paid for. If the subscription level does not have an app purchased the app is still listed however there is an overlay over the app. (please see picture).

enter image description here

The html looks like this:

<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>

Now if an app is purchased the overlay element is shaded gray in the html and is not view-able on screen. (Ex. no grey shading over Hotel Venue Explorer) I want to be able to check and see if the overlay is seen or not seen.

I've tried this:

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

However the expect is returning false. Other apps html, notice the grey over the overlay class

Other apps html, notice the grey over the overlay class

Upvotes: 2

Views: 1293

Answers (1)

giri-sh
giri-sh

Reputation: 6962

If your div.overlay is always present in the DOM, then its hard to check if its displayed because it will always be there in the DOM and your css and javascript might be handling the display property(like add overlay if its needed or don't add when its not needed). Also checking isDisplayed function for an empty html element doesn't work as far as i know.

In order to verify it you can check for css attributes that are responsible for the greying out functionality. Here's how -

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

Hope it helps.

Upvotes: 2

Related Questions