Controleer optiewaarde en label.
Maak het selectieveld expliciet als zichtbare naam en verzonden waarde verschillen.

Vertaalde editie. Technische identificatiegegevens blijven in hun oorspronkelijke vorm.

Een select toont Weekly, de optiewaarde is weekly_demo. De test rapporteert beide als dezelfde string. Het verslag verliest het verschil tussen leesbare naam en controlwaarde. Beide kunnen belangrijk zijn.
De actiehandleiding ondersteunt value of label. De Locator-API zegt dat strings beide matchen; een object noemt het veld. Gebruik dit als het verschil de casus raakt.
Benoem het veld
Onze verzonnen native select heet Delivery cadence en heeft aparte labels en waarden. Geen bestelling, abonnement of levering. We kiezen de weekwaarde en controleren tekst apart.
const cadence = page.getByLabel('Delivery cadence');
await cadence.selectOption({ value: 'weekly_demo' });
await expect(cadence).toHaveValue('weekly_demo');
await expect(cadence.locator('option:checked')).toHaveText('Weekly');Runner en geïmporteerde expect zijn nodig. Het doel is native select, geen gelijkende popup. option:checked leest de gekozen optie erin. Dit enkele-selectiegeval verwacht precies één.
Een tweede geval kiest Monthly op label en controleert teruggegeven monthly_demo met input en change. Dit bevestigt de fixture, niet algemene serveropslag.
Controleer gewijzigde labels
Lokalisatie kan namen wijzigen met stabiele waarde. Waardeselectie werkt nog bij verkeerd zichtbaar label. Controleer tekst als vereist. Alleen labelselectie bewijst geen juiste identifier.
Gebruik afgesproken waarden in plaats van incidentele index voor identiteit. Index hangt van volgorde af. Controleer bij de eerste aanbeveling volgorde en identiteit expliciet.
selectOption wacht op aanwezige opties en geeft input en change. Dat bewijst geen acceptatie door de applicatie. Controleer UI en vereist toegestaan serverbewijs. Blind wachten vervangt geen bewijs.
Bewaar type en aantal
Een eigen combobox kan andere interactie vragen. Bekijk implementatie en toegankelijk gedrag voor kopiëren. Gelijk uiterlijk bewijst geen gelijk contract.
Meervoudige selectie verandert de uitkomst. Gebruik waardelijst en passende assertions, niet ongecontroleerd één tekst uitbreiden. De demo blijft bewust bij één optie.
Noteer type, veld, waarde, label en persistentie. AnyTest beschrijft verkenning en menselijke review; geen specifieke selectimplementatie wordt beweerd. Houd identifier en label apart.
Ook bij vandaag gelijke velden blijft expliciet matchen nuttig als het contract dat vereist. Een latere naamswijziging blijft beoordeelbaar zonder stille identiteitswijziging.
Deze fixture verwacht precies één geselecteerde optie. Meervoudige selectie vraagt een afgesproken waardelijst en passende assertions. Eén zichtbaar label beschrijft niet de volledige uitkomst van zo een control.
Veelgestelde vragen
Selecteert een string alleen op waarde?
Nee. Het matcht waarden en labels; gebruik zo nodig een object.
Werkt selectOption voor elke eigen dropdown?
Nee. Het richt zich op native select; beoordeel eigen controls apart.