Блог

У меня есть p-dropdown :

HTML:

 <span>
  <p-dropdown formControlName="theatreGroup" [options]="theatreGroupsList">
  </p-dropdown>
</span>
 

тс:

   theatreGroupsList: any[] = [
    { label: 'Hamlet', value: 100 },
    { label: 'Dutchman', value: 351 },
    { label: 'King Lear', value: 180 },
    { label: 'Candida', value: 211 },
    { label: 'Twelfth Night', value: 133 }
  ];
 

Мне нужно иметь возможность получить список театральных групп и выбрать элемент. Я могу сделать это, проверив значение элементов в массиве:

 cy.get('p-dropdown[formControlName="theatreGroup"]').click().contains('Candida').click();
 

Но проблема в том, что список групп театров динамичен. Поэтому мне нужно иметь возможность в любое время получить список и получить доступ к его элементам, используя индекс (т. Е. Не значение или метку).
Вы можете мне в этом помочь?

Я вдохновился комментариями Стива Зодиака и ответом КХана и разработал это решение, которое работает для меня:

 cy.get('p-dropdown[formControlName="theatreGroup"]').click().then(x => {
  cy.get('p-dropdown[formControlName="theatreGroup"]>div>div>div>ul>p-dropdownitem').then(groups => {
    
    // Assume we need to access item at index 3, then select in the dropdown
    let group3 = groups[3]['innerText'];        

    // An extra click to prevent error about detached element from the DOM.
    cy.get('p-dropdown[formControlName="theatreGroup"]').click();

    cy.get('p-dropdown[formControlName="theatreGroup"]').click().get('div').contains(group3).click();
  });
});
 

Я немного не уверен в вашей цели тестирования, но с динамическим текстом полезно утверждать, что в списке есть элементы перед тестированием.

Вот несколько идей

 cy.get('p-dropdown[formControlName="theatreGroup"]').click() //open

cy.get('ul.p-dropdown-items li span')    
  .should('have.length', 'gt', 0);     // list is animated on open, 
                                       // so wait for a populated list 

cy.get('ul.p-dropdown-items li span')  
  .then(($items, index) => {
    const texts = [...$items].map(item => item.innerText)
    ...  // take a look at the texts

cy.get('ul.p-dropdown-items li span')  
  .eq(1)
  .should('have.text', 'Candida')