How to verify that the menu items (tab/column Elements) are clickable? or Unclickable?

Question

Test Case

In My web page, I have 5 tabs (A,B,C,D,E) in which 2 tabs (A,B) are clickable and 3 Tabs(C,D,E) are not clickable.

Write a script to verify those tab elements are clickable or not.

What I've tried

1) expect(element(by.id(ID_of_UnCLICKABLE_menu)).isEnabled()).toBe(True); expect(element(by.id(ID_of_CLICKABLE_menu)).isEnabled()).toBe(True);

 Test passed for both unclickable and clickable elements. 
 **ExpectedResult** -> Need to fail for either of one.

and:

2) var EC = protractor.ExpectedConditions;
   browser.driver.wait(EC.elementToBeClickable(element(by.id())), 5000, 'Not Clickable');

HTML code:

<tr>
    <td id="id1234" class="name_style-button disabled" role='menuitem'>Text</td>
</tr> 

Note: This is a non-Angular page.

Answer 1

First all, how should awnser if the tab is clickable or not? The tab itself.

So, in the tab page object, you should have a function like this:

function isClickable() {
   return this.getAttribute('class').contains('disable');
}

With this, in your test, you can get each tab and test it:

expect(tabA.isClickable().toBe(True));
...
expect(tabE.isClickable().toBe(False));

If you pass the locator for each tab into the Tab page object, it can be used for all tabs. This way, when the way the tabs get disabled change, you will need to change only the isClickable function.