Valitsimet ja väitteet
Kohdistakaa elementteihin ja varmistakaa niiden tila
Valitsimet ja väitteet on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Hyvät valitsimet tekevät testeistä vakaita
Se, miten löydätte elementit, vaikuttaa testien kestävyyteen. CSS-luokkiin tai DOM-rakenteeseen sidotut valitsimet rikkoutuvat jokaisessa uudistuksessa. Semanttiset, käyttäjälle näkyvät paikantimet kestävät uudelleenjärjestelyjä, koska ne kuvaavat sitä, mitä käyttäjät todella havaitsevat.
getByRole: suositeltu paikannin
getByRole etsii elementtejä niiden saavutettavuusroolin ja saavutettavan nimen perusteella. Se on kestävin paikannin ja toimii samalla saavutettavuuden tarkistuksena.
page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });getByLabel ja getByPlaceholder
Etsikää lomakekentät niihin liittyvän selitteen tai paikkamerkin perusteella, juuri kuten käyttäjä tunnistaa ne.
page.getByLabel('Email address');
page.getByPlaceholder('Search products');getByText ja getByTestId
getByText vastaa näkyvää tekstiä. Kun semanttista tunnistustapaa ei ole, käyttäkää varavaihtoehtona getByTestId-toimintoa, joka lukee tarkoituksella lisättyä data-testid-attribuuttia.
page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">Välttäkää hauraita CSS-valitsimia
Voitte edelleen käyttää page.locator('.css-selector')-kutsua, mutta pitäkää sitä viimeisenä vaihtoehtona. Luokkien nimet ja sisäkkäisyys muuttuvat usein, mutta roolit ja selitteet harvoin.
// Fragile, avoid when possible:
page.locator('div.row > button.primary');Verkkolähtöiset väitteet
Playwrightin paikantimille tarkoitettu expect on verkkolähtöinen: se yrittää automaattisesti uudelleen, kunnes ehto täyttyy tai aikakatkaisu saavutetaan. Tämä on epävakaiden väitteiden välttämisen avain.
await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();Yleiset väitevastineet
Väitevastine kuvaa elementin tai sivun odotettua tilaa.
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/);Listojen lukumäärien tarkistaminen
Toistuvien elementtien tarkistamiseksi paikantakaa ne kaikki ja tarkistakaa lukumäärä. Paikannin vastaa jokaista elementtiä, ja toHaveCount yrittää uudelleen, kunnes tulos on vakaa.
const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');Kielteiset väitteet
Käyttäkää .not-määrettä väittämään, että jokin puuttuu tai on piilotettu, esimerkiksi kohteen poistamisen jälkeen.
await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();Paikantimien suodattaminen ja ketjuttaminen
Tarkentakaa paikanninta filter-toiminnolla tai ketjuttakaa se rajataksenne haun ylemmän tason elementin sisälle. Näin väitteet pysyvät täsmällisinä.
const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();Miksi verkkolähtöiset väitteet ovat parempia kuin manuaalinen kysely
Verkkolähtöiset väitteet yrittävät koko lauseketta uudelleen eivätkä vain lue uudelleen vanhentunutta tilannevedosta. Siksi await expect(loc).toHaveText('Done') odottaa tekstin ilmestymistä ja poistaa kilpailutilanteet, jotka vaivaavat itse kirjoitettuja odotuksia.
Pikatarkistus
Valitkaa kestävin paikannin.
Kertaus
Suosikaa semanttisia paikantimia: getByRole, getByLabel ja getByText; käyttäkää getByTestId-toimintoa varavaihtoehtona. Tehkää väitteet automaattisesti uudelleen yrittävillä verkkolähtöisillä vastineilla (toBeVisible, toHaveText, toHaveCount, toHaveURL) ja käyttäkää .not- ja filter-toimintoja täsmällisyyden säilyttämiseen.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 38
- Oppitunnit
- 144
Usein kysytyt kysymykset
Onko oppitunti ”Valitsimet ja väitteet” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Valitsimet ja väitteet”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Valitsimet ja väitteet”?
Kohdistakaa elementteihin ja varmistakaa niiden tila Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Valitsimet ja väitteet”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?
Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- E2E-testauksen yleiskatsaus
- Playwright-testien kirjoittaminen
- Valitsimet ja väitteet
- CI-integraatio