Проблемы Cypress при поиске данных в контейнере

Question

Я использую последнюю версию Cypress (4.12.0). Мне не удается найти флажок в элементе, который я выбрал на предыдущем шаге.

Вот мой код Cypress JS:

const itemContainer: any = cy.get(`div .line-item:eq(0)`);                        // <<<<<<< LINE #1 >>>>>>>>>>>>
// TODO - can't get the following to work, seems like it's not using the container
itemContainer.get('input:eq(0)').should('have.property', 'type', 'checkbox');     // <<<<<<< LINE #2 >>>>>>>>>>>>

Вот сгенерированный HTML из Chrome Инструменты разработчика:

<div class="product-details card-item">
    <div class="card-container line-item"><input name="selectItem" type="checkbox">
        <div class="left-half"><img alt="product"
                                    src="xxx">
            <div class="card-info">
                Some data here
            </div>
        </div>
    </div>
</div>

Вот ошибка тестового прогона Cypress:

get div .line-item:eq(0)
get input:eq(0)
assert
expected <input#select-all-items> to have property type

В моем коде Cypress LINE # 1 определенно работает должным образом, потому что когда я закрепляю эту запись в пользовательском интерфейсе Cypress, выделяется элемент <div.line-item>. Но когда LINE # 2 запускается, он ищет элемент, который находится снаружи и намного раньше элемента, который должен быть в itemContainer в коде. Элемент <input#select-all-items> даже не является предком элемента <div.line-item>. Кажется, что itemContainer.get() в моем тестовом коде начинается с root, а не с элемента, который Cypress выбрал в предыдущем операторе.

Не уверен, действительно ли это имеет значение, но мы используем Реагировать на создание HTML.

Answer 1

Это связано с тем, что Cypress работает асинхронно (т. Е. Вы не можете полагаться на то, что порядок выполнения присвоения переменной предшествует LINE # 2), попробуйте использовать псевдоним вместо создания переменных:

cy.get('div .line-item:eq(0)').as('itemContainer');
cy.get('@itemContainer').get('input:eq(0)').should('...');