Выберите значение в p-раскрывающемся списке PrimeNG с помощью Cypress

Question

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

В документации Cypress я нашел это:

cy.get('select').select('apples').should('have.value', '456')

Когда я применяю это к своему коду ...:

cy.get('select').select('FR').should('have.value', 'FR')

... Я получаю эту ошибку: CypressError: Тайм-аут повторной попытки: cy.select () не удалось, потому что этот элемент не виден:

<select class="ng-tns-c16-2" aria-hidden="true" tabindex="-1" aria-label="Nederlands">...</select>

Этот элемент '' не виден, так как его содержимоебыть обрезанным одним из его родительских элементов, который имеет CSS-свойство overflow: 'hidden', 'scroll' или 'auto'

Исправьте эту проблему или используйте {force: true}, чтобы отключить проверку ошибок.

https://on.cypress.io/element-cannot-be-interacted-with

Когда я использую force: true, ошибка пропускается, но все равно не работает.

cy.get('select').select('FR',{force:true}).should('have.value', 'FR')

Я также пробовал без использованиявыберите, но с помощью клика.При этом также просто выбирается выбранный, а не третий выбранный.

cy.get('option').eq(2).click({force: true});

Использование .type ({downarrow}) также завершается ошибкой, поскольку это не поле ввода текста.

Итак, я 'У меня сейчас действительно нет идей.

Я хочу протестировать множественные выпадающие списки, вот один из них:

<span class="eco-form-component__control">
            <p-dropdown formControlName="sector"
                        [options]="sectors"
                        [style]="{'width':'100%'}">
            </p-dropdown>
</span>

РЕДАКТИРОВАТЬ:

Я также попробовал следующее,здесь я получаю правильное значение (Франция), но он не может щелкнуть по нему.

  cy.get('p-dropdown[formControlName="provenanceCountry"]').click();
    cy.get('p-dropdown[formControlName="provenanceCountry"]').get('select').then(option => {
      cy.wrap(option).get('p-dropdown[formControlName="provenanceCountry"]').contains('FRANCE').click();
    });

Ошибка:

CypressError: Тайм-аут повторной попытки: cy.click () не удалось, потому чтоэтот элемент не виден:

 <option class="ng-tns-c9-15 ng-star-inserted" value="[object
 Object]">FRANCE</option>

Этот элемент '<option.ng-tns-c9-15.ng-star-inserted>' не виден, так как имеет эффективную ширину и высоту: '0 x 0' пикселей.

Исправьте эту проблему или используйте {force: true}, чтобы отключить проверку ошибок.

https://on.cypress.io/element-cannot-be-interacted-with

Когда я использую {force: true} в моем клике, ошибкапросто не отображается.

ТОЧНЫЙ HTML:

<div _ngcontent-c11="" class="eco-form-component"><label _ngcontent-c11="" class="eco-form-component__label" ng-reflect-ng-class="eco-form-component__label"> Geïmporteerd uit </label><span _ngcontent-c11="" class="eco-form-component__control"><p-dropdown _ngcontent-c11="" formcontrolname="provenanceCountry" class="ng-tns-c14-7 ui-inputwrapper-filled ng-untouched ng-pristine ng-invalid" ng-reflect-style="[object Object]" ng-reflect-options="[object Object],[object Object" ng-reflect-name="provenanceCountry"><div class="ng-tns-c14-7 ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix" ng-reflect-ng-class="[object Object]" ng-reflect-ng-style="[object Object]" style="width: 100%;"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="ui-helper-hidden-accessible ng-tns-c14-7 ng-star-inserted"><select class="ng-tns-c14-7" aria-hidden="true" tabindex="-1" aria-label=" "><!--bindings={}--><!--bindings={}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!----><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><option class="ng-tns-c14-7 ng-star-inserted" value=" "> </option><option class="ng-tns-c14-7 ng-star-inserted" value="BELGIUM">BELGIUM</option><option class="ng-tns-c14-7 ng-star-inserted" value="FRANCE">FRANCE</option><!----></select></div><div class="ui-helper-hidden-accessible"><input class="ng-tns-c14-7" readonly="" role="listbox" type="text" aria-label=" "></div><!--bindings={
  "ng-reflect-ng-if": "true"
}--><label class="ng-tns-c14-7 ui-dropdown-label ui-inputtext ui-corner-all ng-star-inserted" ng-reflect-ng-class="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!----> <!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></label><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={}--><!--bindings={}--><div class="ui-dropdown-trigger ui-state-default ui-corner-right"><span class="ui-dropdown-trigger-icon ui-clickable pi pi-caret-down" ng-reflect-klass="ui-dropdown-trigger-icon ui-cl" ng-reflect-ng-class="pi pi-caret-down"></span></div><!--bindings={}--></div></p-dropdown></span><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div>

Answer 1

Я использовал выше HTML, указанный в вопросе.Используя текстовый метод cypress invoke, получил все раскрывающиеся списки text и передал их в функцию getCityText(text) в качестве аргумента.Затем я назначил полученный текст в массив с именем listText.Кроме того, я удалил все лишние элементы, которые были найдены внутри массива, например newlines, commas, carriage returns и т. Д. Затем вернул правильное значение массива, а затем assert его с actual vs expected.Теперь тест проходит успешно.

Причина, по которой я должен выбрать дополнительный js function, заключается в обработке следующей ошибки утверждения, которую выбрасывал кипарис .. expected **, , BELGIUM, FRANCE, ** to deeply equal [ BELGIUM, FRANCE ] Рад узнать, есть ли другой простой способобрабатывать символы новой строки, запятые и т. д.

describe('Verify the list box values are selected', function () {
        it.only('Test the drop down values', function () {
         cy.visit('urlgoeshere')
         cy.get('select[aria-hidden="true"]').parents('.ui-helper-clearfix').find('div').find('select').invoke('text')
            .then(text=>{
              var finalArr =  new Array();
              finalArr = getCityText(text);
              console.log(finalArr);
              expect(finalArr).to.contain(['BELGIUM', 'FRANCE'])
               })
            })
        })

// Функция, которая обрабатывает полученный текст и возвращает значения после удаления всех ненужных «новых строк, запятых и т. д.»

function getCityText(text){
  var listText = new Array();
  var trimText;
  listText = text;
  for(var i=0; i<=listText.length; i++){
    trimText = listText.replace(/\n|\r+/g, ' ');
    var nText = trimText.trim();
    var fText = nText.replace(" ", ",")
  }
  return fText;
}

Answer 2

На веб-сайте PrimeNG это вывод тега p-dropdown:

<p-dropdown optionlabel="name" placeholder="Select a City" class="ng-tns-c3-1 ng-pristine ng-valid ng-touched">
    <div class="ng-tns-c3-1 ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix ui-dropdown-clearable" style="width: 129px;">
        <div class="ui-helper-hidden-accessible ng-tns-c3-1 ng-star-inserted">
            <select class="ng-tns-c3-1" aria-hidden="true" tabindex="-1" aria-label=" ">
                <option class="ng-tns-c3-1 ng-star-inserted">Select a City</option>
                <option class="ng-tns-c3-1 ng-star-inserted" value="[object Object]">New York</option>
                <option class="ng-tns-c3-1 ng-star-inserted" value="[object Object]">Rome</option>
                <option class="ng-tns-c3-1 ng-star-inserted" value="[object Object]">London</option>
                <option class="ng-tns-c3-1 ng-star-inserted" value="[object Object]">Istanbul</option>
                <option class="ng-tns-c3-1 ng-star-inserted" value="[object Object]">Paris</option>
            </select>
        </div>
        <div class="ui-helper-hidden-accessible">
            <input class="ng-tns-c3-1" readonly="" role="listbox" type="text" aria-label=" ">
            </div>
            <label class="ng-tns-c3-1 ui-dropdown-label ui-inputtext ui-corner-all ui-placeholder ng-star-inserted">Select a City</label>
            <div class="ui-dropdown-trigger ui-state-default ui-corner-right">
                <span class="ui-dropdown-trigger-icon ui-clickable pi pi-caret-down"></span>
            </div>
        </div>
    </p-dropdown>

Однако, если мы возьмем более стилизованную тему PrimeNG, например, тему 'Ultima', мы получим следующее:

<p-dropdown class="ng-tns-c4-30 ui-inputwrapper-filled ng-pristine ng-valid ng-touched">
    <div class="ng-tns-c4-30 ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix ui-dropdown-open">
        <div class="ui-helper-hidden-accessible">
            <input class="ng-tns-c4-30" readonly="" role="listbox" type="text" aria-label="Select City">
            </div>
            <label class="ng-tns-c4-30 ui-dropdown-label ui-inputtext ui-corner-all ng-star-inserted">
                Select City
            </label>
            <div class="ui-dropdown-trigger ui-state-default ui-corner-right">
                <span class="ui-dropdown-trigger-icon ui-clickable pi pi-caret-down"></span>
            </div>
            <div class="ng-trigger ng-trigger-overlayAnimation ng-tns-c4-30 ui-dropdown-panel ui-widget ui-widget-content ui-corner-all ui-shadow ng-star-inserted" style="z-index: 1002; top: 23px; left: 0px; transform: translateY(0px); opacity: 1;">
                <div class="ui-dropdown-items-wrapper" style="max-height: 200px;">
                    <ul class="ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
                        <li class="ng-tns-c4-30 ui-dropdown-item ui-corner-all ui-state-highlight ng-star-inserted" style="">
                            <span class="ng-tns-c4-30 ng-star-inserted">Select City</span>
                        </li>
                        <li class="ng-tns-c4-30 ui-dropdown-item ui-corner-all ng-star-inserted" style="">
                            <span class="ng-tns-c4-30 ng-star-inserted">New York</span>
                        </li>
                        <li class="ng-tns-c4-30 ui-dropdown-item ui-corner-all ng-star-inserted" style="">
                            <span class="ng-tns-c4-30 ng-star-inserted">Rome</span>
                        </li>
                        <li class="ng-tns-c4-30 ui-dropdown-item ui-corner-all ng-star-inserted" style="">
                            <span class="ng-tns-c4-30 ng-star-inserted">London</span>
                        </li>
                        <li class="ng-tns-c4-30 ui-dropdown-item ui-corner-all ng-star-inserted" style="">
                            <span class="ng-tns-c4-30 ng-star-inserted">Istanbul</span>
                        </li>
                        <li class="ng-tns-c4-30 ui-dropdown-item ui-corner-all ng-star-inserted" style="">
                            <span class="ng-tns-c4-30 ng-star-inserted">Paris</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </p-dropdown>

В первом случае кипарис не должен доставлять столько хлопот.Однако во втором случае, который, как я полагаю, у вас есть, Cypress будет работать с некоторыми проблемами.

В первом случае это, вероятно, будет работать без проблем, потому что он ищет <select>, и после этого <option> -tags (.select () ищет <option> -tags):

cy.get('select').select('London')

Во втором случае у нас нет <select> или <option> -tags .. Такмы должны найти другое решение.Я не могу запустить локально в данный момент, но вот мое предположение для вашей проблемы:

cy.get('p-dropdown[formControlName="provenanceCountry"]').click().find('ul li > span').contains('France').click();

или если я правильно прочитал документацию и `.contains ()` действительно имеет возможность передавать селекторы:

cy.get('p-dropdown[formControlName="provenanceCountry"]').click().contains('ul li > span', 'France').click();

Answer 3

Я не знаком с angular, но, похоже, сгенерированный HTML для <option> имеет value attr, установленный на [object Object], что означает, что вы передаете ему объект вместо примитивного значения, которое можно сериализоватьчерез метод .toString().

Также обратите внимание, что если по какой-то причине вы не можете использовать атрибут <options> 'value (например, его нет), Cypress' .select() также учитываетЗначение textContent (текст между тегами <option>):

describe('test', () => {
    it('test', () => {
        cy.window().then( win => {
            win.document.write(`
                <select>
                    <option>empty</option>
                    <option value="nyc">New York</option>
                    <option>Paris</option>
                </select>
            `);
        });
        cy.get('select').select('nyc'); // value attribute
        cy.get('select').select('Paris'); // textContent value
    });
});

РЕДАКТИРОВАТЬ: из отправленного вами HTML-кода, кажется, вы не звоните cy.select() на <select> элемент, который вы должны:

cy.get('[formcontrolname="provenanceCountry"]').find('select').select('FRANCE');