In cypress is there a way to select from a p-dropdown by text?

I am trying to implement a Cypress test in which I would like to select from a p-dropdown by text.

Basically I want to select from the following dropdown by the text 'test 1 GROUP'

This is my html code for the p-dropdown:

<p-dropdown #scenarioDropdown [options]="scenarioDropdownList" [(ngModel)]="scenario" [attr.data-cy]="'scenarioDropdownList'"></p-dropdown>

with the "scenarioDropdownList" being populated with an array of following class, in which the label field is what is displayed in the options:

export interface SelectItem<T = any> {
    label?: string;
    value: T;
    styleClass?: string;
    icon?: string;
    title?: string;
    disabled?: boolean;
}

I think this should be pretty simple but I haven't had any luck so far.

In my Cypress test, I can get the dropdown like this - but I can't get it to find or select an actual option.

cy.get('[data-cy="scenarioDropdownList"]')

Any suggestions?

Thanks much

IMO it's better to work from the web page HTML rather than the Angular source HTML, since the web page is what Cypress sees.

Angular will compile it's source, so there would be differences in source and live versions.

Also (not sure if it applies to Angular) during compilation some frameworks reject attributes like data-cy, so you would have to check the live page to see if they are present and you can use them.

Here's the live page for p-dropdown

From that I can see all the parts I need for the test

cy.get('p-dropdown[placeholder="Select a City"]`)
  .find('div[role="button"]').click()

cy.contains('p-dropdownitem', 'London').click()

cy.get('p-dropdown[placeholder="Select a City"]`)
  .find('input')
  .should('have.value', 'London')

Of course, you can substitute day-cy selectors and see if they work, but using actual text from the page is usually pretty good, and you don't add extra bulk to the page load by using testing-only attributes.