Блог

Я столкнулся с проблемой с Кипарисом. Я просто не мог проверить переключатель.

У меня есть 7 вопросов с переключателями » Да » или «Нет». По умолчанию все кнопки помечены как «НЕТ». Мне нужно проверить параметры «ДА», он отправит вызов API на серверную часть и продолжит творить чудеса.

HTML — код для YES выглядит следующим образом:

lt;input type="radio" id="options[0]radiovalue-true" class="form-control is-action-field form-check-input" value="true" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;"gt;

HTML — код для NO выглядит следующим образом:

lt;input type="radio" id="options[0]radiovalue-false" class="form-control is-action-field form-check-input" value="false" checked="" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;"gt;

По умолчанию переключатель » НЕТ «имеет свойство: checked: true , переключатель» ДА » имеет свойство: checked: false

Это мои попытки:

 cy.get('[class="sc-fzoJMP"]')  .find('.list-group-item')  .then((item) =gt; {  cy.wrap(item)  .eq(0)  .should('contain', 'Is this opportunity?')  .find('input[type="radio"]')  .then((radioButtons) =gt; {  cy.wrap(radioButtons).eq(0).check({ force: true }).should('be.checked');  });  

Я использовал разные локаторы, пробовал ('[type="radio"]'), (':radio') , ('#options[0]radiovalue-true') Я использовал разные методы проверки: cy.get(':radio').click({force: true}) , cy.get(':radio').check('true', {force: true}) и попытался вывести код с помощью переключателей проверки из цикла, но это что-то другое. Он не проверяет переключатель, но может убедиться, что он не установлен. Я нашел одно решение для использования свойства invoke:

 cy.wrap(radioButtons).eq(0).invoke('prop', 'checked', true).should('be.checked'); cy.wrap(radioButtons).eq(1).invoke('prop', 'checked', false).should('not.be.checked');  

Но он проверяет переключатель «ДА», но не снимает флажок «НЕТ», и он не отправляет вызов API на серверную часть, как это должно быть.

This is full HTML code for YES and NO radio buttons:

 lt;div class="d-flex "gt;  lt;div class="mr-4" style="position: relative;"gt;  lt;div class="form-check"gt;  lt;input type="radio" id="options[0]radiovalue-true" class="form-control is-action-field form-check-input" value="true" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;"gt;  lt;label for="options[0]radiovalue-true" class="ml-0 form-check__radio form-check-label"gt;  lt;svg viewBox="0 0 24 24" style="height: 20px; min-height: 20px; width: 20px; min-width: 20px; opacity: 1;"gt;  lt;titlegt;Select Optionlt;/titlegt;  lt;circle cx="12" cy="12" r="9" stroke="#666666" stroke-width="2" fill="white"gt;lt;/circlegt;  lt;/svggt;  lt;p class="sc-fznyAO hdDwJr ml-1 typography-body "gt;Yeslt;/pgt;  lt;/labelgt;  lt;/divgt;  lt;/divgt;  lt;div class="mr-4" style="position: relative;"gt;  lt;div class="form-check"gt;  lt;input type="radio" id="options[0]radiovalue-false" class="form-control is-action-field form-check-input" value="false" checked="" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;"gt;  lt;label for="options[0]radiovalue-false" class="ml-0 form-check__radio form-check-label"gt;  lt;svg viewBox="0 0 24 24" style="height: 20px; min-height: 20px; width: 20px; min-width: 20px; opacity: 1;"gt;  lt;titlegt;Selected Optionlt;/titlegt;  lt;circle cx="12" cy="12" r="9" stroke="var(--dcp-color-primary)" stroke-width="2" fill="none"gt;lt;/circlegt;  lt;circle cx="12" cy="12" r="5" fill="var(--dcp-color-primary)"gt;lt;/circlegt;  lt;/svggt;  lt;p class="sc-fznyAO hdDwJr ml-1 typography-body "gt;Nolt;/pgt;  lt;/labelgt;  lt;/divgt;  lt;div class="action-field-wrapper is-action-field"gt;lt;/divgt;  lt;/divgt; lt;/divgt;  

Присвоенные идентификаторы содержат символы, которые не работают с # обозначениями, но вы можете использовать обозначения атрибутов

 cy.get('.list-group-item')  .eq(0)  .find('[id="options[0]radiovalue-true"]') // query id as an attribute  .click()   cy.get('.list-group-item')  .eq(0)  .find('[id="options[0]radiovalue-false"]')  .click()   

В частности, [] в идентификаторах перестает '#options[0]radiovalue-true' работать.

С расширенным фрагментом это работает

 cy.get('input[id="options[0]radiovalue-true"]')  .click({force:true})  .should('be.checked')  

Вам нужно force:true из-за непрозрачности стиля:0 и ширины и высоты 0.

Это означает, что ввод эффективно скрыт, и, вероятно, есть лучший способ проверить это — возможно, щелкнуть по значкам SVG.

Вы можете использовать идентификаторы и нажать, чтобы выбрать переключатели » Да » или «Нет».

 cy.get('.list-group-item')  .eq(0)  .find('#options[0]radiovalue-true')  .click() //Clicks Yes  cy.get('.list-group-item')  .eq(0)  .find('#options[0]radiovalue-false')  .click() //Clicks No