PricingLoginStart free
React Academy · Oppitunti

Lomakkeiden ja käyttäjäpolkujen päästä päähän -testaus

Automatisoikaa monivaiheiset lomakelähetykset ja navigointipolut Playwrightin page-objekteilla.

Oppitunti 4/414 vaihetta

Lomakkeiden ja käyttäjäpolkujen päästä päähän -testaus on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Lomakkeiden E2E-testausstrategia

E2E-lomaketestit simuloivat käyttäjän koko matkan: sivulle siirtymisen, kenttien täyttämisen, lähettämisen, validointivirheiden käsittelyn ja onnistuneen lopputuloksen tarkistamisen.

Page Object -malli

Page Object -malli (POM) kapseloi sivun paikantimet ja toiminnot luokkaan, mikä tekee testeistä luettavampia ja vähentää toistoa.

class LoginPage {
  constructor(private page: Page) {}

  async goto() { await this.page.goto('/login'); }
  async fillEmail(email: string) { await this.page.getByLabel('Email').fill(email); }
  async fillPassword(pw: string) { await this.page.getByLabel('Password').fill(pw); }
  async submit() { await this.page.getByRole('button', { name: /log in/i }).click(); }
  async getError() { return this.page.getByRole('alert').textContent(); }
}

Page Objectin käyttäminen testeissä

Page Objecteja käyttämällä testeistä tulee käyttäjän toimia tarkoituksen tasolla kuvaavia kuvauksia, joita on helppo lukea ja ylläpitää.

test('successful login redirects to dashboard', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.fillEmail('alice@example.com');
  await loginPage.fillPassword('password123');
  await loginPage.submit();
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});

Validointivirheiden testaaminen

Lähettäkää lomake virheellisillä tai tyhjillä tiedoilla ja tarkistakaa käyttöliittymän näyttämät virheilmoitukset.

test('shows validation errors on empty submit', async ({ page }) => {
  await page.goto('/register');
  await page.getByRole('button', { name: 'Create account' }).click();
  await expect(page.getByText('Email is required')).toBeVisible();
  await expect(page.getByText('Password must be at least 8 characters')).toBeVisible();
});

Monivaiheisen lomakkeen testaaminen

Siirtykää monivaiheisissa ohjatuissa lomakkeissa jokaisen vaiheen läpi ja tarkistakaa, että lomake etenee ja säilyttää aiemmin syötetyt tiedot.

test('completes 3-step signup', async ({ page }) => {
  await page.goto('/signup');
  // Step 1
  await page.getByLabel('First Name').fill('Alice');
  await page.getByRole('button', { name: 'Next' }).click();
  // Step 2
  await page.getByLabel('Plan').selectOption('pro');
  await page.getByRole('button', { name: 'Next' }).click();
  // Step 3
  await page.getByLabel('Card Number').fill('4242424242424242');
  await page.getByRole('button', { name: 'Complete' }).click();
  await expect(page.getByText('Welcome, Alice!')).toBeVisible();
});

APIn mockaaminen Playwrightissa

Käyttäkää page.route()-metodia API-kutsujen sieppaamiseen ja mock-vastausten palauttamiseen. Näin voitte testata poikkeustilanteita ilman oikeaa taustajärjestelmää.

await page.route('/api/register', async route => {
  await route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ token: 'fake-token' }),
  });
});

await page.goto('/register');
// ...fill and submit form
await expect(page).toHaveURL('/dashboard');

Tiedostojen lataamisen testaaminen

Käyttäkää setInputFiles()-metodia tiedoston lataamisen simulointiin Playwrightissa.

test('uploads a profile photo', async ({ page }) => {
  await page.goto('/profile');
  const fileInput = page.getByLabel('Profile photo');
  await fileInput.setInputFiles('./fixtures/avatar.png');
  await page.getByRole('button', { name: 'Upload' }).click();
  await expect(page.getByAltText('Profile photo')).toBeVisible();
});

Todennustilan uudelleenkäyttö

Kirjautukaa kerran, tallentakaa selaimen tallennustila ja käyttäkää sitä testeissä uudelleen, jotta toistuvia kirjautumisvaiheita ei tarvitse suorittaa.

// auth.setup.ts
test('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('alice@example.com');
  await page.getByLabel('Password').fill('password');
  await page.getByRole('button', { name: 'Log in' }).click();
  await page.context().storageState({ path: 'e2e/.auth/user.json' });
});

// playwright.config.ts — use storageState in other tests
use: { storageState: 'e2e/.auth/user.json' }

Virheistä palautumisen testaaminen

Simuloikaa verkkoyhteyden häiriöitä ja varmistakaa, että käyttäjä voi yrittää uudelleen tai näkee hyödyllisen virheilmoituksen.

await page.route('/api/submit', route => route.abort());
await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByText('Network error. Please try again.')).toBeVisible();
await page.unroute('/api/submit');
// Now the real request goes through
await page.getByRole('button', { name: 'Retry' }).click();

Näppäimistönavigoinnin testaaminen

Testatkaa, että lomakkeet ovat täysin näppäimistöllä käytettäviä siirtymällä sarkaimella kentästä toiseen ja lähettämällä lomake Enter-näppäimellä.

test('submits form with keyboard only', async ({ page }) => {
  await page.goto('/contact');
  await page.keyboard.press('Tab'); // focus name
  await page.keyboard.type('Alice');
  await page.keyboard.press('Tab'); // focus email
  await page.keyboard.type('alice@example.com');
  await page.keyboard.press('Tab'); // focus submit
  await page.keyboard.press('Enter');
  await expect(page.getByText('Message sent!')).toBeVisible();
});

Testidatan fixturet

Käyttäkää Playwrightin fixturejä jakamaan alustamislogiikka, kuten testikäyttäjän luominen, siististi useiden testien kesken.

// fixtures.ts
const test = base.extend<{ testUser: User }>({ 
  testUser: async ({}, use) => {
    const user = await createTestUser();
    await use(user);
    await deleteTestUser(user.id);
  },
});

// In a test file:
test('edits profile', async ({ page, testUser }) => {
  await page.goto(`/users/${testUser.id}/edit`);
});

Testien rinnakkainen suorittaminen

Playwright suorittaa testit oletusarvoisesti rinnakkain eri työprosesseissa. Käyttäkää test.describe.serial-määritystä vain testeihin, jotka on suoritettava järjestyksessä.

Pikatarkistus

Mikä on Page Object -mallin (POM) tärkein hyöty E2E-testauksessa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

E2E-lomaketesteissä käytetään Page Objecteja ylläpidettävyyden parantamiseen, page.route()-metodia APIn mockaamiseen, setInputFiles()-metodia latauksiin ja tallennustilaa todennettujen istuntojen uudelleenkäyttöön. Testatkaa validointi, monivaiheiset työnkulut ja näppäimistönavigointi, jotta käyttäjän todelliset työnkulut tulevat katetuiksi.

Aloita maksutta

Opi React 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
88
Oppitunnit
324
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Lomakkeiden ja käyttäjäpolkujen päästä päähän -testaus” ilmainen?

Kyllä – oppitunnin ”Lomakkeiden ja käyttäjäpolkujen päästä päähän -testaus” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Lomakkeiden ja käyttäjäpolkujen päästä päähän -testaus”?

Automatisoikaa monivaiheiset lomakelähetykset ja navigointipolut Playwrightin page-objekteilla. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

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

Kuinka kauan ”Lomakkeiden ja käyttäjäpolkujen 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ä React Academy-oppitunnilla?

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

  1. Integraatiotestaus React Testing Librarylla
  2. Asynkronisen käyttöliittymän ja API-kutsujen testaus MSW:llä
  3. Playwrightin perusteet Reactille
  4. Lomakkeiden ja käyttäjäpolkujen päästä päähän -testaus
← Takaisin: React Academy