html - Selecionar valor em p-dropdown do PrimeNG usando Cypress

Eu tento selecionar um valor na minha lista suspensa usando o Cypress. Tentei várias maneiras de fazer isso, mas nenhuma funcionou. Sempre seleciona o valor que já está selecionado.

Na documentação do Cypress, encontrei isto:

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

Quando aplico isso no meu código ... :

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

... Eu recebo este erro: CypressError: Tempo esgotado ao tentar novamente: cy.select() falhou porque este elemento não está visível:

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

Este elemento '' não está visível porque seu conteúdo está sendo cortado por um de seus elementos pai, que possui uma propriedade CSS de overflow: 'hidden', 'scroll' ou 'auto'

Corrija este problema ou use {force: true} para desativar a verificação de erros.

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

Quando eu uso force:true, o erro é ignorado, mas ainda assim não funciona.

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

Eu também tentei sem usar select, mas usando click. Isso também apenas seleciona o que está selecionado, não o terceiro selecionado.

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

Usar .type({downarrow}) também falha porque não é um campo de entrada de texto.

Então, eu realmente estou sem ideias agora.

Eu quero testar múltiplos menus suspensos, este é um deles:

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

EDITAR :

Eu também tentei o seguinte, aqui eu obtenho o valor correto (França), mas ele não consegue clicar nele.

  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();
    });

Erro :

CypressError: Tempo esgotado ao tentar novamente: cy.click() falhou porque este elemento não está visível:

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

Este elemento '<option.ng-tns-c9-15.ng-star-inserted>' não está visível porque tem uma largura e altura efetivas de: '0 x 0' pixels.

Corrija este problema ou use {force: true} para desativar a verificação de erros.

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

Quando eu uso {force: true} no meu clique, o erro simplesmente não é mostrado.

HTML EXATO:

<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>

Resposta #1

No site da PrimeNG, esta é a saída de uma tag 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>

No entanto, se usarmos algo mais estilizado, como o tema 'Ultima' do PrimeNG, obtemos isto:

<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>

No primeiro caso, o Cypress não deveria ter tantos problemas. No entanto, no segundo caso, que é o que acredito que você esteja enfrentando, o Cypress terá alguns problemas.

No primeiro caso, isso provavelmente funcionará sem nenhum problema porque ele procura por <select> e, em seguida, pelas tags <option> (.select() procura pelas tags <option>):

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

No segundo caso, não temos nenhuma tag <select> ou <option>. Então, precisamos encontrar outra solução. No momento, não consigo executar localmente, mas aqui está meu palpite para o seu problema:

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

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

Resposta #2

Eu encontrei uma solução, esta instrução selecionou a primeira opção. versão "cypress": "^9.1.0"

cy.get('p-dropdown[formControlName="category"]')
.find('.p-dropdown')
.click({ force: true })
.find('.p-dropdown-items-wrapper > .p-dropdown-items')
.click({ force: true })
.get('.p-dropdown-item')
.children()
.first()
.click({ force: true });