Нажмите после того, как определенный элемент исчезнет, используя Cypress

#javascript #cypress

Вопрос:

Сейчас я тестирую веб-сайт, на котором загружаются задачи для пользователей, но для их загрузки требуется определенное время. Сначала они отображаются, но с серым наложением. У нас есть три типа задач, но все они имеют расширение «- серый» в конце имени класса.

Наконец, мой вопрос: как я могу убедиться, что Cypress нажимает только тогда, когда «- серый » был удален из имени класса?

Имя класса, когда загружается такс: class="task-icon task-icon--condition" или когда он еще не полностью загружен class="task-icon task-icon--condition-grey"

Код, который у меня сейчас есть, таков:

     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}); 
});
 

Ответ №1:

.должен(«не.быть.видимым»); будет ждать, пока серый цвет не будет виден в течение 4 секунд:

 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}); 
});
 

Комментарии:

1. Спасибо за решение, но я все равно получаю ошибку: Timed out retrying after 4500ms: Expected to find element: *[class$=-grey], but never found it.

Ответ №2:

Это заняло у меня некоторое время, но я нашел его. Мы использовали оператор if, чтобы проверить, по-прежнему ли используются имена классов «- grey», если да, то подождите секунду, в противном случае продолжайте:

 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();
 

});