Cypress click () не удалось, потому что этот элемент отсоединен от DOM в итерации

Question

Я пытаюсь проверить мое одностраничное приложение с кипарисом.
На первой странице есть несколько кнопок в виде якорных тегов , которые направляют вас на второй сайт (Angular маршрутизация).
На втором сайте у меня есть кнопка «назад».
Итак, я хочу, чтобы мой тест нажал кнопку, дождался появления второго сайта, нажал на спину и повторил это для всех оставшихся кнопок.

Это мой кипарисовый тест:

describe('Select products', function () {
    before(() => {
        cy.visit('http://localhost:4200/')
    })
    it('Clicking through products', function () {
    
        // getting each anchor to click 
        cy.get('a[data-cy=submit]').each(
            ($el) => {
            
                // click to get on next site
                cy.wrap($el).click()
                
                // click to go back
                cy.contains('go back').click()
            }
        )
    })
})

Отлично работает при первом запуске ( получить все кнопки => нажать первый => go назад )
, но после получения вернуться на стартовую страницу перед тем, как нажать следующую кнопку. Кипарис выдает ошибку:

Может кто-нибудь помочь мне с этим? Спасибо за любую помощь!

Answer 1

cy.get('a[data-cy=submit]') должен получить список кнопок и сохранить их для повторения с помощью .each(), но код в .each() перемещается далеко от первой страницы - я думаю, что Angular уничтожает исходные элементы, которые .each() пытается выполнить итерацию.

Это похоже на итерацию по списку и изменение списка внутри итерации, l oop нарушается, поскольку список меняется.

Если вы знаете, сколько кнопок, это будет лучший способ

const buttonCount = 4;

for (let i = 0; i < buttonCount; i++) {
  cy.get('a[data-cy=submit]').eq(i).click();
  cy.contains('go back').click();
}

Если кнопки динамические c (вы не знаете счет), используйте

cy.get('a[data-cy=submit]').then($buttons => {

  const buttonCount = [...$buttons].length;

  for (let i = 0; i < buttonCount; i++) {
    cy.get('a[data-cy=submit]').eq(i).click();
    cy.contains('go back').click();
  }
}