Kaip pradėti su Playwright: praktinis gidas pradedantiesiems

Playwright yra modernus automatizuoto testavimo įrankis, skirtas web aplikacijų UI ir E2E testams. Jis leidžia greitai rašyti stabilius testus, paleisti juos skirtingose naršyklėse ir lengvai integruoti į CI/CD procesą.

Jei ieškote, kaip pradėti su Playwright nuo nulio, šiame gide rasite praktinius žingsnius: nuo projekto sukūrimo ir pirmojo testo iki lokatorių, HTML ataskaitos, tracing ir pasiruošimo CI/CD.

Šis straipsnis skirtas pradedantiesiems, bet jame sąmoningai parodoma ir gera kryptis, kad vėliau testų bazė netaptų sunkiai prižiūrima.

Trumpai: kaip pradėti su Playwright?

Paprasčiausias kelias pradėti su Playwright atrodo taip:

1. Įdiegti Node.js LTS versiją.
2. Sukurti naują testavimo projektą.
3. Įdiegti Playwright.
4. Parašyti pirmą testą.
5. Paleisti testus lokaliai.
6. Peržiūrėti HTML ataskaitą.
7. Vėliau integruoti testus į CI/CD pipeline’ą.

Jei dar tik aiškinatės bendrą automatizavimo vertę, pradėkite nuo straipsnio: kas yra automatizuotas testavimas ir kaip jis veikia .

Kas yra Playwright?

Playwright – tai Microsoft sukurtas testavimo įrankis, leidžiantis automatizuoti naršyklės veiksmus. Jis palaiko Chromium, Firefox ir WebKit, todėl su vienu įrankiu galima testuoti aplikaciją keliose naršyklėse.

Playwright ypač stiprus ten, kur svarbu stabilumas: jis turi automatinį laukimą, patogius lokatorius, integruotą tracing, screenshots, video įrašymą ir HTML ataskaitas.

Jei renkatės tarp įrankių, skaitykite: Playwright vs Selenium: kurį rinktis testų automatizavimui .

1. Playwright diegimas

Pirmiausia įsitikinkite, kad turite Node.js. Praktikoje geriausia naudoti LTS versiją, nes ji stabilesnė ilgalaikiams projektams.

node -v
npm -v

Tada sukurkite naują projektą:

mkdir playwright-demo
cd playwright-demo
npm init -y

Įdiekite Playwright:

npm init playwright@latest

Diegimo metu Playwright gali paklausti kelių klausimų: ar naudoti TypeScript, kur laikyti testus, ar įdiegti naršykles. Pradedant rekomenduojama rinktis TypeScript ir standartinę testų struktūrą.

Po diegimo dažniausiai gausite panašią struktūrą:

playwright-demo/
  tests/
    example.spec.ts
  playwright.config.ts
  package.json

2. Pirmasis Playwright testas

Sukurkite arba atidarykite failą tests/example.spec.ts ir įrašykite paprastą testą:

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

test('homepage has title', async ({ page }) => {
  await page.goto('https://example.com');

  await expect(page).toHaveTitle(/Example/);
});

Šis testas atidaro puslapį ir patikrina jo pavadinimą. Tai paprastas pavyzdys, bet jis parodo pagrindinį Playwright principą: testas naudoja page objektą naršyklės veiksmams ir expect patikrinimams.

Realesnis testas dažniausiai atrodo taip:

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

test('user can open contact page', async ({ page }) => {
  await page.goto('https://www.auto-test.pro/');

  await page.getByRole('link', { name: 'Kontaktai' }).click();

  await expect(page).toHaveURL(/kontaktai/);
  await expect(page.getByRole('heading', { name: /Kontaktai/i })).toBeVisible();
});

Toks testas jau artimesnis realiam E2E scenarijui: vartotojas ateina į puslapį, paspaudžia nuorodą ir sistema patikrina, ar atsidarė teisingas puslapis.

3. Playwright lokatoriai

Vienas svarbiausių dalykų pradedant su Playwright yra teisingai rašyti lokatorius. Blogi lokatoriai greitai padaro testus nestabilius, todėl geriau nuo pradžių naudoti vartotojui artimus selektorius.

Geras pavyzdys:

await page.getByRole('button', { name: 'Prisijungti' }).click();
await page.getByLabel('El. paštas').fill('test@example.com');
await page.getByTestId('submit-button').click();

Silpnesnis pavyzdys:

await page.locator('.btn-primary').click();
await page.locator('#email').fill('test@example.com');

CSS selektoriai nėra blogi savaime, bet jie dažnai labiau priklauso nuo dizaino ar HTML struktūros. getByRole, getByLabel ir getByTestId dažnai leidžia rašyti stabilesnius testus.

Plačiau apie tai skaitykite: Playwright lokatoriai: kaip rašyti stabilius testus .

4. Testų paleidimas ir ataskaitos

Testus galite paleisti komanda:

npx playwright test

Jei norite paleisti testus su matoma naršykle:

npx playwright test --headed

Jei norite paleisti konkretų testą:

npx playwright test tests/example.spec.ts

Po paleidimo galite atidaryti HTML ataskaitą:

npx playwright show-report

Ataskaita padeda greitai suprasti, kurie testai nepavyko, kokie veiksmai buvo atlikti ir kurioje vietoje scenarijus sustojo.

5. Projekto struktūra: kada naudoti Page Object Model?

Pradžioje nereikia kurti per daug sudėtingos architektūros. Jei turite vos kelis testus, paprasti testų failai yra visiškai pakankami. Tačiau kai testų daugėja, verta atskirti puslapio veiksmus nuo pačių testų.

Pavyzdžiui, testas neturėtų ilgainiui tapti ilgu lokatorių ir techninių veiksmų sąrašu. Geriau turėti aiškią struktūrą, kur testas aprašo scenarijų, o puslapio klasė slepia detales.

class LoginPage {
  constructor(private readonly page) {}

  async login(email: string, password: string) {
    await this.page.getByLabel('El. paštas').fill(email);
    await this.page.getByLabel('Slaptažodis').fill(password);
    await this.page.getByRole('button', { name: 'Prisijungti' }).click();
  }
}

Tokia kryptis padeda palaikyti testus, kai projektas auga. Daugiau apie struktūrą: Playwright Page Object Model .

6. Kaip integruoti Playwright su CI/CD?

Playwright lengvai integruojamas su Azure DevOps, GitHub Actions ar kitais CI/CD įrankiais. Testai gali būti paleidžiami automatiškai po kiekvieno pakeitimo arba prieš release.

Tipinė CI/CD nauda:

• greitesnis klaidų aptikimas;
• mažiau rankinio regresinio testavimo;
• aiškesnė release kokybė;
• automatinės ataskaitos po pipeline’o vykdymo.

Jei naudojate Azure DevOps, skaitykite: CI/CD testų integracija su Azure DevOps .

Jei svarstote, ar automatizavimas atsiperka, skaitykite: kiek kainuoja testų automatizavimas .

Kodėl verta rinktis Playwright?

Playwright verta rinktis tada, kai norite greitai pradėti, bet kartu turėti įrankį, kuris tinka ir rimtesniam ilgalaikiam testavimo sprendimui.

• Automatinis laukimas sumažina flaky testų kiekį.
• Modernūs lokatoriai padeda rašyti stabilesnius testus.
• HTML report ir trace viewer palengvina debug procesą.
• Galima testuoti Chromium, Firefox ir WebKit.
• Patogu integruoti į CI/CD procesą.

Dažniausios klaidos pradedant su Playwright

Pradedant svarbu ne tik paleisti pirmą testą, bet ir nuo pradžių išvengti klaidų, kurios vėliau brangiai kainuoja.

• Per anksti kuriama sudėtinga architektūra. Pradėkite paprastai, o struktūrą auginkite pagal poreikį.
• Naudojami trapūs CSS arba XPath selektoriai. Kur įmanoma, rinkitės getByRole, getByLabel ir getByTestId.
• Testai priklauso vienas nuo kito. Kiekvienas testas turėtų būti kuo savarankiškesnis.
• Ignoruojamos ataskaitos ir trace. Debug procesas turi būti sistemos dalis, o ne paskutinės minutės veiksmas.
• Automatizuojama per daug iš karto. Pirmiausia automatizuokite kritinius verslo scenarijus.

Strategiškai apie tai plačiau: kada verta automatizuoti testus ir kada ne .

DUK: kaip pradėti su Playwright

Ar Playwright tinka pradedantiesiems?

Taip. Playwright yra patogus pradedantiesiems, nes turi aiškią dokumentaciją, greitą diegimą, integruotą testų runner’į ir HTML ataskaitas.

Ar reikia mokėti TypeScript?

TypeScript nėra būtinas, bet labai rekomenduojamas. Jis padeda anksčiau pastebėti klaidas ir palaikyti tvarkingesnę testų bazę.

Kiek laiko užtrunka pradėti su Playwright?

Paprastą projektą galima paleisti per keliasdešimt minučių. Realus framework’as su struktūra, testų duomenimis ir CI/CD integracija užtrunka ilgiau.

Ar Playwright geresnis už Selenium?

Naujiems projektams dažniausiai taip. Playwright paprastai siūlo stabilesnį automatinį laukimą, patogesnius lokatorius ir geresnes integruotas debug galimybes.

Ar Playwright galima naudoti su Azure DevOps?

Taip. Playwright testus galima paleisti Azure DevOps pipeline’uose ir išsaugoti testų ataskaitas kaip build artefaktus.

Susiję straipsniai

• Playwright vs Selenium: kurį rinktis testų automatizavimui
• Playwright lokatoriai: kaip rašyti stabilius testus
• Playwright Page Object Model: struktūra, kuri palengvina testų priežiūrą
• CI/CD testų integracija su Azure DevOps
• Testų automatizavimas
• Testavimo paslaugos

Reikia pagalbos diegiant Playwright?

Padedame komandoms pradėti su Playwright teisingai: parinkti testų struktūrą, sukurti stabilų framework’ą, aprašyti kritinius E2E scenarijus ir integruoti testus į CI/CD procesą.

Susisiekite dėl Playwright automatizavimo konsultacijos →