html - Finns det ett sätt i Cypress att välja från en p-dropdown med text?
Jag försöker implementera ett Cypress-test där jag skulle vilja välja från en p-dropdown baserat på text.
I princip vill jag välja från följande rullgardinsmeny genom texten 'test 1 GROUP'
Detta är min HTML-kod för p-dropdown:
<p-dropdown #scenarioDropdown [options]="scenarioDropdownList" [(ngModel)]="scenario" [attr.data-cy]="'scenarioDropdownList'"></p-dropdown>
med "scenarioDropdownList" som fylls med en array av följande klass, där fältet label är vad som visas i alternativen:
export interface SelectItem<T = any> {
label?: string;
value: T;
styleClass?: string;
icon?: string;
title?: string;
disabled?: boolean;
}
Jag tror att detta borde vara ganska enkelt, men jag har inte haft någon tur hittills.
I mitt Cypress-test kan jag fånga rullgardinsmenyn på det här sättet - men jag kan inte få den att hitta eller välja ett faktiskt alternativ.
cy.get('[data-cy="scenarioDropdownList"]')
Några förslag?
Tack så mycket
Svar #1
Enligt min mening är det bättre att arbeta från webbsidans HTML snarare än Angular-käll-HTML, eftersom det är webbsidan som Cypress ser.
Angular kommer att kompilera dess källkod, så det skulle vara skillnader mellan käll- och liveversioner.
Också (inte säker på om det gäller Angular) under kompilering avvisar vissa ramverk attribut som data-cy, så du skulle behöva kontrollera den aktiva sidan för att se om de är närvarande och om du kan använda dem.
Här är live-sidan för p-dropdown
Från det kan jag se alla delar jag behöver för testet
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')
Självklart kan du ersätta day-cy-väljare och se om de fungerar, men att använda faktisk text från sidan är vanligtvis ganska bra, och du lägger inte till extra belastning på sidans laddning genom att använda attribut som bara är för testning.

