AI u testiranju web rješenja

Jedno od zanimljivijih predavanja na zadnjem Infobip Shiftu u Zadru održala je Debbie O’Brien (Microsoft Principal Technical Program Manager). U njemu je predstavila prednosti koje alat Playwright u suradnji s MCP (Model Context Protocol) tehnologijom donosi u pogledu automatizacije testiranja web rješenja u preglednicima.

Pomoću Playwright MCP tehnologije postiže se nova razina inteligentne automatizacije testiranja, što je Debbie demonstrirala na konkretnom primjeru korištenja.

S Debbie je u direktnom kontaktu dogovoreno da za primjer koji je prezentirala na konferenciji dozvoli objavu u časopisu VIDI, kako bismo mogli vjernim čitateljima predstaviti o čemu je riječ, što predstavlja svojevrsnu ekskluzivu u suradnji s predavačima na konferenciji. Budući da je u ovom slučaju riječ o spoju dvije različite tehnologije, objasnimo prvo svaku od njih.

Debbie O’Brien: Predavanje o Playwright tehnologiji na Infobip Shiftu 2025.

MCP (Model Context Protocol)

MCP (Model Context Protocol) predstavlja protokol koji omogućava standardizaciju načina na koji različite aplikacije omogućuju pristup danas izuzetno popularnim LLM sustavima. Na taj način LLM sustavi, ali potencijalno i drugi AI sustavi, mogu na dvosmjerni način razmjenjivati podatke iz različitih izvora podataka, servisa i drugih alata. Pri tome MCP u sebi uključuje danas podrazumijevane karakteristike modernih IT sustava, kao što su sigurnost, efikasnost i mogućnost prilagodbe sustava rastućim zahtjevima (skalabilnost).

Kako sve to skupa djeluje u praksi? MCP klijent, koji je obično integriran u neku od API aplikacija, priprema zahtjev za izvođenje određene akcije, odnosno pristup potrebnim podacima. Takav zahtjev se iz MCP klijenta šalje do MCP servera, a on ih obrađuje i prosljeđuje odgovarajućem izvoru podataka ili vanjskom alatu. Nakon prikupljanja traženih podataka, oni se šalju MCP serveru, a on ih na kraju vraća na polaznu točku, to jest MCP klijentu. Na taj način MCP protokol predstavlja svojevrsnu analogiju dobro poznatoj USB-C tehnologiji, samo što je u ovom slučaju riječ o prijenosu AI orijentiranih podataka.

Playwright

Playwright predstavlja open-source tehnologiju koju je razvio Microsoft kako bi pojednostavio i automatizirao testiranje web aplikacija. Pomoću Playwright tehnologije moguće je simulirati stvarne korisnikove akcije u pregledniku, kao što su unos podataka, klikanje mišem, kretanje po stranici i slično.

Iako je razvijena od strane Microsofta, Playwright tehnologija nije ograničena samo na Microsoftove alate, što znači da je pogodna za provođenje testiranja u svim modernim preglednicima (Chrome, Edge, Firefox i Safari). Također, može se koristi u suradnji s više najpopularnijih web orijentiranih programskih jezika, kao što su JavaScript, TypeScript, Python, C# i Java. Neke od karakteristika Playwright tehnologije koje su vrlo korisne kod testiranja web aplikacija su mogućnost paralelnog provođenja testiranja, izvođenje testiranja u različitim kontekstima aplikacija (kao da više različitih korisnika izvodi testiranje), mogućnost čekanja na pojavu određenih objekata da bi se tek onda provelo testiranje i slično.

Model Context Protocol (MCP): Protokol za standardizaciju načina na koji aplikacije omogućavaju pristup svojih sadržaja do LLM sustava

Playwright MCP

Već na temelju kratkog opisa prethodne dvije tehnologije, jasno je da su one međusobno prilično kompatibilne. Dok Playwright omogućava napredno testiranje web orijentiranih aplikacija, MCP može „otvoriti kanal za komunikaciju“ između AI modula i web aplikacija. Povezivanjem ovoga stižemo do onoga što se naziva Playwright MCP.

Pomoću Playwright MCP tehnologije, AI alati mogu „razumjeti“ sadržaj web stranice (aplikacije) te na taj način pripremiti pametno testiranje stranice, bez potrebe da to rade ljudi. Naravno, to nudi i brojne druge uobičajene prednosti AI tehnologije u odnosu na ljude koji pokušavaju napraviti istu stvar: veću količinu različitih testova pripremljenih u istom periodu, podršku za veći broj povezanih tehnologija kao što su korisnička sučelja i slično.

Pogledajmo kako izgleda korištenje ove dvije objedinjene tehnologije u praksi:

Prvo je potrebno instalirati i konfigurirati server kako bi on mogao primati naredbe i pretvarati ih u odgovarajuće operacije u nekom od podržanih preglednika. Bez ovog koraka nije moguće ostaviti komunikaciju između preglednika i LLM-a ili nekog drugog AI modula.

U sljedećem koraku AI modul uz pomoć MCP protokola izvodi svojevrsno „propitivanje“ postojećeg sustava/aplikacije/stranice kako bi saznao što je sve na raspolaganju za automatizaciju testiranja. Riječ je o ranije spomenutim mogućnostima, kao što su mogućnost unosa podataka na stranici, podržane operacije klikanjem mišem, kretanje po stranici i ostalo.

Nakon dovršetka prethodnog koraka, AI modul na temelju zadanog scenarija može pripremiti sve što je potrebno za automatizaciju testiranja u pregledniku.

Sad kad je AI modul pripremio automatizaciju testiranja, može se stvarno započeti s njezinim provođenjem. Playwright modul izvodi u jednom ili više različitih preglednika ono što mu preko MCP protokola „naređuje“ AI modul.

Nakon izvođenja svake od primljenih naredbi u AI modul se ponovo vraća vrlo detaljna povratna informacija o tome što se stvarno dogodilo tijekom izvođenja naredbe. Na temelju tih rezultata AI modul može izvesti različite analize i rezultate, odnosno predložiti i pripremiti sljedeće korake u testiranju web aplikacije.

Koje su prednosti i mane u odnosu na ručno testiranje web aplikacija pomoću Playwright MCP tehnologije?

Prednosti se svakako ogledaju u mogućnosti brže i jednostavnije pripreme različitih testova, te (zbog korištenja standardiziranog MCP protokola) mogućnosti korištenja različitih AI modula za pripremu testova, kao i za razumijevanje, odnosno prezentaciju rezultata testiranja. Svojevrsna analogija sa spajanjem različitih uređaja na USB-C.
Nedostatke treba tražiti u tome što je na početku potrebno više toga naučiti i „instalirati“ od strane IT stručnjaka da bi sve skupa dobro radilo, ali zato nakon prve dovršene konfiguracije i provedene automatizacije testiranja, svaki sljedeći put sve ide puno jednostavnije. Problemi se također mogu pojaviti kod pokušaja korištenja Playwright MCP tehnologije s nekim od vrlo starih sustava (takozvani legacy sustavi). Takvi sustavi možda ne podržavaju moderne tehnologije kakve se očekuju u ovom slučaju. Ako ponovno napravimo analogiju s USB-C tehnologijom, riječ je o nečem sličnom povezivanju hardverskog uređaja bez podrške za USB tehnologiju na računalo koje ima isključivo takve priključke. Teoretski se može, ali se pri tome mogu pojaviti i različiti problemi.

Pogledajmo sada kako bi korištenje Playwright MCP tehnologije izgledalo na korištenju primjera koji smo dobili od Debbie. Budući da će Playwright MCP tehnologiju u praksi koristiti IT stručnjaci kojima engleski jezik ne bi trebao biti nepoznanica, nećemo prevoditi ni objašnjavati izvorni primjer. Osnovna ideja u pozadini je da sve bude razumljivo samo po sebi.

Krećemo od toga što biste htjeli provjeriti. Taj dio ima sljedeći oblik:

## Test Plan
- Navigate to https://www.falkensteiner.com/en/family-hotel-diadora
- Click on “Experience” from the main menu and select “Academies”
- Click on Swimming Academy card/Reserve button
- Select booking date: September 14th, 2025
- Configure age group: Baby Goldfish (6 months - 3 years)
- Select time slot: 09:30-09:50
- Set party size to 2 participants
- Click “Reserve” to add to cart
- Verify cart shows: Swimming Academy, Sep 14 2025, 09:30-09:50, 2 participants, €0.00

Na temelju toga nastaje automatizirano testiranje koje ima sljedeći oblik. Zbog ograničenja prostora u časopisu u nastavku nije prikazan cjelokupni test, ali na temelju prikazanog biste trebali dobiti dojam o tome kako to izgleda u stvarnosti.

# Swimming Lesson Booking Test Plan
## Falkensteiner Family Hotel Diadora - Swimming Academy

### Test Overview
This test plan documents the complete user journey for booking a swimming lesson at Falkensteiner Resort Punta Skala’s Swimming Academy. The test covers navigation from the homepage through to successful cart addition for two 21-month-old babies on September 14th.

### Test Prerequisites
- Browser: Chrome/Chromium
- Target URL: https://www.falkensteiner.com/en/family-hotel-diadora
- Test Data: 2 babies aged 21 months, booking date: September 14th, 2025

### Test Steps

#### Step 1: Navigate to Falkensteiner Homepage
1. **Action**: Navigate to `https://www.falkensteiner.com/en/family-hotel-diadora`
2. **Expected Result**: Falkensteiner homepage loads successfully
3. **Verification**: Page title contains “Falkensteiner” and main navigation is visible
4. **Screenshot**: `01-falkensteiner-homepage.png`

#### Step 2: Handle Cookie Consent
1. **Action**: Wait for cookie consent banner to appear
2. **Action**: Click “Accept All” or equivalent consent button
3. **Expected Result**: Cookie banner disappears, homepage content becomes fully accessible
4. **Verification**: Cookie banner is no longer visible, page interactions are enabled
5. **Screenshot**: `02-homepage-after-cookies.png`

#### Step 3: Navigate to Resort Punta Skala
1. **Action**: Look for Resort Punta Skala link/section on homepage
2. **Action**: Click on Resort Punta Skala link
3. **Expected Result**: Navigate to Resort Punta Skala specific page
4. **Verification**: URL contains “resortpuntaskala” and page shows resort-specific content
5. **Screenshot**: `03-resort-punta-skala-homepage.png`

#### Step 4: Access Swimming Academy via Camps and Academies
1. **Action**: Navigate to “Experience” section in main menu
2. **Action**: Click on “Camps and Academies” or similar link
3. **Expected Result**: Page displays various academy options including Swimming Academy
4. **Verification**: Swimming Academy card is visible with “Free of charge” pricing
5. **Screenshot**: `04-academies-page-with-swimming.png`

#### Step 5: Open Swimming Academy Booking Details
1. **Action**: Click on Swimming Academy card or “Reserve” button
2. **Expected Result**: Detailed Swimming Academy booking interface opens
3. **Verification**:
- Page shows Swimming Academy details
- Age groups are visible (Baby Goldfish 6 months - 3 years old)
- Booking form/calendar is accessible
4. **Screenshot**: `05-swimming-academy-booking-detail.png`

#### Step 6: Select Booking Date (September 14th)
1. **Action**: Click on date selector/calendar
2. **Action**: Navigate to September 2025 if not already visible
3. **Action**: Click on day “14” for September 14th
4. **Expected Result**: September 14th, 2025 is selected and highlighted
5. **Verification**: Date selector shows “14 Sep 2025” or equivalent
6. **Screenshot**: `06-swimming-academy-september-14-selected.png`

...


### Test Data Summary
- **Website**: Falkensteiner Resort Punta Skala
- **Service**: Swimming Academy - Baby Goldfish Program
- **Target Age**: 21-month-old babies (fits 6 months - 3 years category)
- **Date**: September 14th, 2025
- **Time**: 09:30-09:50 (20 minutes)
- **Participants**: 2 babies
- **Cost**: Free of charge (€0.00)
- **Location**: Diadora indoor pool

### Key Business Rules Verified
1. **Age Appropriateness**: 21-month babies fit within “Baby Goldfish (6 months - 3 years old)” category
2. **Pricing**: Swimming Academy lessons are free of charge for hotel guests
3. **Duration**: Baby lessons are 20 minutes long
4. **Availability**: September 14th, 2025 has available slots
5. **Booking Process**: Multi-step process with date, time, and party size selection
6. **Cart Functionality**: Lessons can be added to cart with booking timer
7. **Cancellation Policy**: Fully refundable up until 24 hours before start time

### Expected Challenges & Solutions
- **Cookie Consent**: Handle privacy/cookie banners that may block interactions
- **Resort Navigation**: Navigate to correct resort (Punta Skala) rather than Family Hotel Diadora
- **Academy Discovery**: Find Swimming Academy through “Camps and Academies” section
- **Date Selection**: Navigate calendar interface to select specific date
- **Age Group Selection**: Understand age categories to select appropriate group
- **Form Interactions**: Handle dropdown selections and form field configurations

### Success Criteria
✅ Successfully navigated to Swimming Academy booking
✅ Selected appropriate age group for target demographic
✅ Configured booking for correct date and time
✅ Set party size to accommodate two babies
✅ Added swimming lesson to cart
✅ Verified all booking details are accurate
✅ Confirmed free pricing structure
✅ Demonstrated complete end-to-end booking flow

### Test Environment
- **Browser**: Chromium/Chrome
- **Viewport**: Full desktop view
- **Screenshots**: 8 comprehensive screenshots documenting each step
- **Network**: Standard connection (no offline scenarios)
- **Accessibility**: Page elements properly identified via accessibility tree

Microsoft Playwright: Kako djeluje Microsoft Playwright tehnologija

Što nedostaje u današnjem tekstu? Prije svega, „detaljna kuharica“ o tome što je sve potrebno instalirati na računalo da bi se mogli pripremati i koristiti Playwright MCP primjeri. A toga zbilja ima podosta – od osnovnih programskih jezika i razvojnih okolina koje se koriste u primjerima do samog Playwright alata i MCP servera. Za pokrivanje ovog dijela trebao bi nam dobar dio časopisa. To je loša vijest.

Dobra je vijest to što se na webu može pronaći čitav niz primjera i video zapisa, koje je pripremila sama Debbie o Playwright i Playwright MCP tehnologiji. Od instalacije svih potrebnih alata do same pripreme primjera. Tako da imate na raspolaganju stvarno dosta dodatnog materijala za istraživanje, ako vas je zainteresirao današnji tekst. Dovoljno je da malo pretražite web upisujući „Debbie Playwright MCP“.

Playwright MCP: Kako se zajedno koriste Playwright i MCP tehnologija