I am facing a challenge with a list of apps displayed on a non-angular page. The availability of these apps depends on the subscription level purchased by the user. Even if an app has not been purchased, it is still listed but displayed with an overlay (please refer to the image).
https://i.sstatic.net/x6i0f.png
Here is an example of the HTML structure:
<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>If an app is purchased, the overlay element in the HTML is shaded gray and not visible on screen. (For example, there is no grey shading over Hotel Venue Explorer) I need to verify whether the overlay is visible or not.
This is the approach I have tried:
elm = element.all(by.css('div.apps-item')).get(5);
expect(elm.$('div.overlay').isDisplayed()).toBeTruthy();However, the expect statement is returning false. Look at the HTML for other apps where the overlay class has gray shading.