React Academy · Oppitunti

Playwrightin perusteet Reactille

Kirjoittakaa Playwright-testejä, jotka avaavat selaimen, käyttävät React-sovellusta ja tarkistavat tulokset.

Oppitunti 3/414 vaihetta

Playwrightin perusteet Reactille on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.

Mikä Playwright on

Playwright on Node.js-pohjainen E2E-testauskehys, joka ohjaa oikeita Chromium-, Firefox- ja WebKit-selaimia. Se sopii erinomaisesti React-sovelluksen kokonaisiin työnkulkuihin, kuten reitityksen, todentamisen ja API-yhteyksien testaamiseen.

Asennus

Asentakaa Playwright ja sen selainbinaarit yhdellä komennolla.

# npm init playwright@latest
# or
# npx playwright install

# playwright.config.ts is created automatically

Playwrightin asetukset Reactia varten

Määrittäkää Playwright käynnistämään kehityspalvelin ennen testien suorittamista.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:5173' },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

Ensimmäisen testin kirjoittaminen

Testeissä käytetään page-objektia, joka edustaa selainikkunaa. Siirtykää URL-osoitteeseen, käsitelkää elementtejä ja tarkistakaa tulos.

import { test, expect } from '@playwright/test';

test('home page shows heading', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

Paikantimet

Playwrightin paikantimet muistuttavat RTL-kyselyitä. Suosikaa roolipohjaisia paikantimia, jotta testit kestävät muutoksia.

// By role
const button = page.getByRole('button', { name: 'Submit' });
// By label
const input = page.getByLabel('Email address');
// By text
const link = page.getByText('Sign in');
// By placeholder
const search = page.getByPlaceholder('Search products');

Napsauttaminen ja kirjoittaminen

Käsitelkää elementtejä metodeilla click(), fill(), press() ja selectOption().

await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Log in' }).click();

Navigoinnin odottaminen

Playwright odottaa automaattisesti, että elementit ovat käyttövalmiita, mutta voitte myös odottaa erikseen navigoinnin tai verkkopyyntöjen valmistumista.

// Wait for URL to change after form submit
await page.waitForURL('/dashboard');

// Wait for a specific request
const [response] = await Promise.all([
  page.waitForResponse('/api/users'),
  page.click('button[type="submit"]'),
]);

Assertiot

Käyttäkää expect(locator)-kutsua yhdessä Playwrightin sisäänrakennettujen matchereiden kanssa. Ne odottavat automaattisesti ehdon täyttymistä.

await expect(page.getByRole('heading')).toHaveText('Dashboard');
await expect(page.getByTestId('user-count')).toContainText('5 users');
await expect(page.getByRole('button', { name: 'Delete' })).toBeDisabled();
await expect(page).toHaveURL('/success');

Kuvakaappausten ottaminen virhetilanteissa

Playwright ottaa asetusten mukaan automaattisesti kuvakaappauksia ja jäljityksiä testin epäonnistuessa. Ottakaa tämä käyttöön asetustiedostossa.

use: {
  screenshot: 'only-on-failure',
  trace: 'retain-on-failure',
  video: 'retain-on-failure',
}

Testien suorittaminen

Suorittakaa kaikki testit headless-tilassa tai käyttäkää --ui-valitsinta vuorovaikutteiseen testien selaimeen, jossa voitte käydä testit visuaalisesti vaihe vaiheelta läpi.

# Run all tests
npx playwright test

# Run with UI mode
npx playwright test --ui

# Run a specific file
npx playwright test e2e/login.spec.ts

# Debug mode
npx playwright test --debug

Playwrightin Trace Viewer

Kun testi epäonnistuu, avatkaa jäljitystiedosto komennolla npx playwright show-trace toistaaksenne testin vaihe vaiheelta kuvakaappausten, verkkopyyntöjen ja konsolilokien avulla.

CI-integraatio

Playwright suoritetaan CI-ympäristössä oletusarvoisesti headless-tilassa. Asentakaa selaimet komennolla npx playwright install --with-deps ja suorittakaa testit tavallisen npm-komentosarjan avulla.

# .github/workflows/e2e.yml
- name: Install Playwright Browsers
  run: npx playwright install --with-deps
- name: Run Playwright tests
  run: npx playwright test

Pikatarkistus

Mitä Playwright-metodia tulisi käyttää tekstisyötekentän täyttämiseen?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Playwright testaa oikeita selaimia ja odottaa automaattisesti elementtien valmistumista. Käyttäkää roolipohjaisia paikantimia, vuorovaikutukseen metodeja fill() ja click(), tarkistuksiin expect(locator)-kutsua ja kehityksen aikaiseen visuaaliseen vianmääritykseen --ui-tilaa.

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 maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Playwrightin perusteet Reactille” ilmainen?

Kyllä – oppitunnin ”Playwrightin perusteet Reactille” 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 ”Playwrightin perusteet Reactille”?

Kirjoittakaa Playwright-testejä, jotka avaavat selaimen, käyttävät React-sovellusta ja tarkistavat tulokset. 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 3/4.

Kuinka kauan ”Playwrightin perusteet Reactille”-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

Integraatiotestaus React Testing Librarylla
Asynkronisen käyttöliittymän ja API-kutsujen testaus MSW:llä
Playwrightin perusteet Reactille
Lomakkeiden ja käyttäjäpolkujen päästä päähän -testaus

← Takaisin: React Academy