Selektorer og påstander
Finn elementer og kontroller tilstanden.
Selektorer og påstander er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Gode selektorer gir stabile tester
Hvordan du finner elementer, avgjør hvor robuste testene dine er. Selektorer som er knyttet til CSS-klasser eller DOM-struktur, bryter sammen ved hver redesign. Semantiske, brukersynlige lokatorer overlever refaktorering fordi de gjenspeiler det brukerne faktisk oppfatter.
getByRole: Den foretrukne lokatoren
getByRole finner elementer basert på tilgjengelighetsrollen og det tilgjengelige navnet. Det er den mest robuste lokatoren og fungerer samtidig som en tilgjengelighetskontroll.
page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });getByLabel og getByPlaceholder
For skjemafelt finner du elementene via den tilknyttede etiketten eller plassholderen, akkurat slik en bruker identifiserer dem.
page.getByLabel('Email address');
page.getByPlaceholder('Search products');getByText og getByTestId
getByText finner synlig tekst. Når det ikke finnes en semantisk referanse, kan du bruke getByTestId som et alternativ. Den leser et data-testid-attributt som du legger til med hensikt.
page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">Unngå sårbare CSS-selektorer
Du kan fortsatt bruke page.locator('.css-selector'), men se på det som siste utvei. Klassenavn og nøsting endres ofte, mens roller og etiketter sjelden gjør det.
// Fragile, avoid when possible:
page.locator('div.row > button.primary');Web-first-påstander
Playwrights expect for lokatorer er web-first: Den prøver automatisk på nytt til betingelsen er oppfylt eller tidsavbruddet inntreffer. Dette er nøkkelen til påstander som ikke blir ustabile.
await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();Vanlige påstandsmatchere
Matcheren beskriver den forventede tilstanden til et element eller en side.
await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);Kontrollere antall elementer i lister
For å kontrollere gjentatte elementer finner du alle elementene og kontrollerer antallet. Lokatoren samsvarer med hvert element, og toHaveCount prøver på nytt til resultatet er stabilt.
const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');Negative påstander
Bruk .not for å kontrollere at noe mangler eller er skjult, for eksempel etter at et element er slettet.
await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();Filtrere og kjede lokatorer
Presiser en lokator med filter, eller kjed den for å begrense søket til innsiden av et overordnet element. Det holder påstandene presise.
const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();Hvorfor web-first er bedre enn manuell polling
Web-first-påstander prøver hele uttrykket på nytt, ikke bare ved å lese et foreldet øyeblikksbilde på nytt. Derfor venter await expect(loc).toHaveText('Done') på at teksten skal vises, og eliminerer kappløpsforholdene som plager manuelt skrevne ventinger.
Hurtigsjekk
Velg den mest robuste lokatoren.
Oppsummering
Foretrekk semantiske lokatorer: getByRole, getByLabel og getByText, med getByTestId som alternativ. Bruk web-first-matchere (toBeVisible, toHaveText, toHaveCount, toHaveURL) som prøver automatisk på nytt, og bruk .not og filter for å holde testene presise.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 38
- Leksjoner
- 144
Ofte stilte spørsmål
Er leksjonen «Selektorer og påstander» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Selektorer og påstander», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Selektorer og påstander»?
Finn elementer og kontroller tilstanden. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Angular Academy?
Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Selektorer og påstander»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?
Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Oversikt over E2E-testing
- Skrive Playwright-tester
- Selektorer og påstander
- CI-integrasjon