CODEWITHSUNDEEP
javascriptcypress
Jasper Slokker
Jasper Slokker

Reputation: 95

Click after certain element is gone using Cypress

I'm testing a website right now where tasks are loaded for users, but they need a certain time to be loaded. At first they are shown but with a grey overlay. We have three types of tasks but they all have the extension '-grey' at the end of the classname.

Finally my question, how can i make certain that Cypress only clicks when the '-grey' has been removed from the classname?

The classname when the taks is loaded is: class="task-icon task-icon--condition" or when it is not already completely loaded class="task-icon task-icon--condition-grey"

The code i have right now is:

    Given('I click the task {string}',  (task: string) => {
    cy.get('*[class$=-grey]').not('be.visible', {timeout: 4500});
    cy.contains(task,{ matchCase: false, timeout: 45000})
        .click({force: true}); 
});

Upvotes: 0

Views: 283

Answers (2)

Jasper Slokker
Jasper Slokker

Reputation: 95

It took me a while but I found it. We have used an if-statement to check if the '-grey' classnames are still used, if so then wait a second, otherwise continue:

Given('I click the task {string}',  (task: string) => {
cy.get('.tasktable-wrapper').then((elem)=> {
    if(elem.find('*[class$="task-icon--form-grey"]').length > 0 ||
        elem.find('*[class$="task-icon--condition-grey"]').length > 0) {
        cy.wait(1000);
    }
})
cy.contains(task,{ matchCase: false, timeout: 45000})
    .click();

});

Upvotes: 0

Sanja Paskova
Sanja Paskova

Reputation: 1110

.should('not.be.visible'); will wait for the Grey to be not visible for 4 s:

Given('I click the task {string}',  (task: string) => {
    cy.get('*[class$=-grey]', {timeout: 4500}).should('not.be.visible');
    cy.contains(task,{ matchCase: false, timeout: 45000}).click({force: true}); 
});

Upvotes: 1

Related Questions