Jasper Slokker
Jasper Slokker

Reputation: 95

Select one of two different classes within Element with Cypress

In our application we use tasks for the user to go through a certain flow of work. This task can have two different classes, depends on which task the user has in front of him.

The class 'task__options' and 'ap-option' are within the 'task__inner' class.

I have to following code, but it never goes through the IF only the ELSE. Do you have any suggestions to solve this?

Then('I click the task option {string}', (task: string) => {

    cy.get('.task__inner').within(($ele) => {
        if($ele.hasClass('task__options')){
            cy.get('.task__options').click();
        } else {
            cy.get('.ap-option').click();
        }
    });
});

Upvotes: 0

Views: 897

Answers (2)

Jasper Slokker
Jasper Slokker

Reputation: 95

Thanks to @Alapan I have a solution for this issue, but I also had include a API Call that would go off if one of the two classes was present.

Then('I click the task option {string}', (task: string) => {
    let clickButton = task => {
        cy.get('.task__options,.ap-option').contains(task, {matchCase: false, timeout: 30000})
            .scrollIntoView()
            .click();
    };
    cy.get('.task__inner').within(() => {
        cy.get('.task__form').then(($ele) =>{
            if($ele.hasClass('task__options')){
                cy.intercept("POST", "/bla-bla/api/Task/ResolveConditionalWait/**").as('ResolveConditional')
                clickButton(task);
                cy.wait('@ResolveConditional')
            } else {
                clickButton(task);
            }
        })
    });
});

Upvotes: 0

Alapan Das
Alapan Das

Reputation: 18626

You can write the two classes separated by , so if either one of it present, then it will perform the click().

cy.get('.task__options,.ap-option').click()

Then your code will look like:

cy.get('.task__inner').within(() => {
  cy.get('.task__options,.ap-option').click()
})

Upvotes: 1

Related Questions