Cypress сделать что-то после клика

Question

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

Я думал, это должно работать, если я делаю это так

cy.get(".flight-segment-times .css-10nd86i")
   .each(($select) => { 
          $select.click({ force: true }); 
          cy.get(".css-11unzgr").contains("option")
        })

Но это не такработать, поскольку класс .css-11unzgr появляется только при щелчке по его родительскому элементу.Однако, если я вызову .click() для элемента $select, то выпадающее меню даже не появится, если я вызову .click({multiple: true}) непосредственно для cy.get(".flight-segment-times .css-10nd86i"), то каждый раскрывающийся список будет последовательно открыт, но мне нужно иметь возможность что-то делать между этиминажмите действия.

Answer 1

просто сделайте это как два действия:

cy.get(".flight-segment-times .css-10nd86i")
.click({ force: true })
cy.get(".css-11unzgr")
.contains("option")

Но поскольку у вас есть проблемы с фактическим открытием компонента React-Select, вы, вероятно, щелкаете не тот компонент. Что я делаю, так это нахожу класс, который содержит свойство «onMouseDown» (этот класс в нашем приложении называется «response-select__control». Если я щелкаю по этому элементу, он открывается.

Чтобы узнать, какой класс обладает свойством onMouseDown, я использую React Developer Tools: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Answer 2

cy.each() (и другие команды на основе jquery) передают коллекцию jQuery в обратный вызов, поэтому вызываемый .click() на самом деле является методом jQuery, а не командой cypress.

То, что вы хотите сделать, это cy.wrap() сначала:

cy.get(".flight-segment-times .css-10nd86i")
    .each(($select) => { 
        cy.wrap($select).click({ force: true }); 
        cy.get(".css-11unzgr").contains("option");
    });