Unable to create a check condition(using else if condition) in protractor for a element which belongs to multiple classes

Question

There is a scenario where I need to perform an action(delete or add) on a particular element. But that element may belong to different classes and depending on the classes, I have to perform the action on that element.

Below is the snippet of my code.

        if(class1.isPresent()) {
            deleteSpecial.click();
            console.log("Class 1 executed");
            addSpecialCard.element(addSpecial.locator()).click();
        } else if(class2.isPresent()) {
            deleteSpecial.click();
            console.log("Class 2 executed");
            addSpecialCard.element(addSpecial.locator()).click();
        } else {
            addSpecialCard.element(addSpecial.locator()).click();
            console.log("Else executed");
        }

okay. So I tried to simply my code. Below is the simplified version.

    class3.isDisplayed().then((result) =>{
        if(result) {
            addSpecialCard.element(addSpecial.locator()).click();
            console.log("Class3 executed");
        }else {
            deleteSpecial.click();
            addSpecialCard.element(addSpecial.locator()).click();
        }

In case of class1 and class2 the actions which I need to perform are same. So the only thing I have to check is whether the element belongs to class3 or not. If yes then perform only add action. But if no, then perform add delete action 1st then add action.

But in this simplified code also, my else part does not execute. It looks for the class3. If it finds it will execute the if part. But if the class3 is not present, then it doesn't execute the else part and say's unable to find the element(i.e. class3)

Here is the HTML for classes:

class1:

<span class="inventory-active-layover active-layover ng-scope">

class2:

<span class="inventory-active-layover inactive-layover ng-scope">

class3:

<span class="list-edit-link inventory-add-button ng-scope">

The thing is all 3 classes doesn't appear at once in DOM. If the element is added and active then in DOM class1 will be shown. But if the element is added and it is inactive then in DOM class2 will be shown. And at last, if the element is not added then in DOM class,3 will be shown.

Answer 1

One thing i noticed that "The thing is all 3 classes doesn't at once in DOM". Then you should use isPresent() instead of isDisplayed().

As isDisplayed() test whether this element is currently displayed or not and thats is the reason behind "unable to find the element(i.e. class3)" error.