Vue Academy · Oppitunti

Päästä päähän -testaus

Varmistakaa kokonaiset käyttäjäpolut end-to-end-testeillä.

Oppitunti 3/313 vaihetta

Päästä päähän -testaus on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/3. 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 Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 3 oppituntia.

Testaaminen käyttäjän tavoin

End-to-end-testaus käyttää oikeaa sovellustanne oikeassa selaimessa, painaa painikkeita ja täyttää lomakkeita täsmälleen käyttäjän tavoin. Se varmistaa, että kaikki käyttöliittymästä taustajärjestelmään toimii yhdessä.

Miksi E2E-testausta?

Yksikkötestit tarkistavat osia erillään, mutta vain e2e-testit vahvistavat koko käyttökulun: käyttäjä voi kirjautua sisään, siirtyä näkymästä toiseen, lähettää lomakkeen ja nähdä tuloksen. Ne löytävät integraatioaukkoja, joita mikään muu ei havaitse.

Cypressin asentaminen

Cypress on suosittu e2e-kehys, jossa on interaktiivinen test runner. Asentakaa se kehitysriippuvuudeksi ja avatkaa sen runner.

npm install -D cypress
npx cypress open

Cypress-testin rakenne

Cypress-testissä describe ryhmittelee testit ja it määrittää kunkin skenaarion, mikä vastaa tuttua testisyntaksia.

describe("Login flow", () => {
  it("logs in a user", () => {
    // steps go here
  })
})

Sivulla siirtyminen

Käyttäkää cy.visit-metodia URL-osoitteen lataamiseen selaimessa. Se on useimpien testien lähtökohta.

cy.visit("http://localhost:5173/login")

Elementtien etsiminen

cy.get valitsee elementtejä CSS-valitsimella. Cypress odottaa automaattisesti elementtien ilmestymistä, mikä vähentää epävakaita testejä.

cy.get("input[name=email]")
cy.get("button[type=submit]")

Tekstin kirjoittaminen syötekenttiin

Liittäkää type valittuun syötekenttään näppäimistösyötteen simuloimiseksi.

cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")

Elementtien napsauttaminen

Käyttäkää click-komentoa painikkeiden ja linkkien napsauttamiseen aivan kuten käyttäjä tekisi.

cy.get("button[type=submit]").click()

Tuloksen tarkistaminen

Tarkistakaa vuorovaikutuksen jälkeen should-komennolla, mitä käyttäjän pitäisi nyt nähdä. Cypress yrittää tarkistuksia uudelleen, kunnes ne menevät läpi tai aikakatkaisu umpeutuu.

cy.url().should("include", "/dashboard")
cy.contains("Welcome back").should("be.visible")

Täydellinen E2E-testi

Kun vaiheet yhdistetään, saadaan helposti luettava testi aidosta käyttäjäpolusta.

describe("Login flow", () => {
  it("logs in successfully", () => {
    cy.visit("/login")
    cy.get("input[name=email]").type("user@example.com")
    cy.get("input[name=password]").type("secret123")
    cy.get("button[type=submit]").click()
    cy.url().should("include", "/dashboard")
  })
})

Playwright-vaihtoehto

Playwright on toinen tehokas e2e-työkalu, jossa on samanlaisia käsitteitä: se käynnistää selaimen, siirtyy sivuille, on vuorovaikutuksessa niiden kanssa ja tekee tarkistuksia. Ohjelmointirajapinta poikkeaa, mutta testausajattelutapa on sama.

// Playwright style
// await page.goto("/login")
// await page.fill("input[name=email]", "user@example.com")
// await page.click("button[type=submit]")
// await expect(page).toHaveURL(/dashboard/)

Pikatarkistus

Testatkaa e2e-testauksen tuntemustanne.

Vastaa interaktiivisessa oppitunnissa

Kertaus

End-to-end-testit ohjaavat oikeaa sovellusta selaimessa. Cypressin avulla jäsentäkää testit describe/it-rakenteella, ladatkaa sivut komennolla cy.visit, etsikää elementit komennolla cy.get, käyttäkää vuorovaikutukseen komentoja type ja click ja varmistakaa tulokset komennolla should. Playwright noudattaa samoja periaatteita. Seuraavaksi optimoitte koontiversionne ja julkaisette sen.

Aloita maksutta

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: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Päästä päähän -testaus” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Päästä päähän -testaus”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”Päästä päähän -testaus”?

Varmistakaa kokonaiset käyttäjäpolut end-to-end-testeillä. Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/3.

Kuinka kauan ”Päästä päähän -testaus”-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ä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue 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

← Takaisin: Vue Academy