Ошибка «элемент отсоединен от DOM» после просмотра ссылки в цикле

Я пытаюсь провести дымовое тестирование, щелкнув ссылки в списке. После первого посещения тест останавливается со следующей ошибкой.

CypressError: cy.click() failed because this element is detached from the DOM.

<a href = "/link2">...</a>

Cypress requires elements be attached in the DOM to interact with them.

The previous command that ran was:

> cy.wrap()

Что мне делать, чтобы удерживать элемент в цикле?

it('Click each link in the list', () => {
  cy.get('li a').each(($el, index, $list) => {
     cy.wrap($el).click();
     cy.go(-1);
  })
})

Цель теста — проверить, все ли страницы в списке появляются без ошибок 404. Следуя html-коду

<ul>
   <li><a href = "/link1">Link 1</a></li>
   <li><a href = "/link2">Link 2</a></li>
   <li><a href = "/link3">Link 3</a></li>
</ul>

cypress

03.07.2019 13:32

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

9 737

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Когда вы вызываете cy.get(), вы сохраняете ссылки, а затем уходите, щелкнув ссылку, поэтому ссылки на эти элементы больше недействительны. Вы можете составить список идентификаторов для этих элементов:

const listOfIds = ['#first_id', '#second_id']
listOfIds.forEach(id => cy.get(id).click())

или если вы хотите создать свой список динамически, вы также можете сделать это:

function getIds(){
            let ids = []
            return new Cypress.Promise(resolve => {
                cy.get('.your-selector')
                    .each($el =>
                        cy.wrap($el)
                            .invoke('attr', 'id')
                            .then(id => ids.push(id))
                    )
                    .then(() => resolve(ids))
            })
        }

После этого вызов getIds().then(ids => ids.forEach(...)) в основном такой же, как и выше.

Спасибо. Как раз то, что я искал.

— 04.07.2019 12:18

03.07.2019 15:25