Lopeta sovellustesi rikkominen: Näin automatisoit testauksen luonnollisella kielellä Midscenen ja Cursorin avulla
Rakennat sovelluksia vauhdilla. Cursor tekoäly sylkee ulos uusia ominaisuuksia minuuteissa, ja vibe-koodaus tuntuu supervoimalta – kunnes jokin hajoaa.
Perinteinen ohjelmistotestaus tekoälyllä varustetussa kehityksessä on pullonkaula. Jos käytät tunteja CSS-selektoreiden ja XPath-polkujen korjaamiseen jokaisen pienen käyttöliittymämuutoksen jälkeen, häviät tekoälykehityksen tuoman nopeushyödyn.
Tarvitset testausjärjestelmän, joka ymmärtää käyttöliittymän tarkoituksen, ei sen koodirakennetta. Tässä astuu kuvaan tekoälytestaus ja erityisesti Midscene.js.
---
Miksi perinteinen selainautomaatio pettää vibe-koodauksessa
Perinteiset E2E-testaustyökalut perustuvat tarkkoihin DOM-polkuihin. Kun Cursor muuttaa painikkeen luokkaa tai siirtää elementin toiseen div-elementtiin, testit hajoavat välittömästi. Regressiotestaus muuttuu jatkuvaksi korjauskierteeksi.
Vibe-koodauksessa sovelluksen rakenne muuttuu nopeasti. Tarvitset testausratkaisun, joka toimii samalla tasolla kuin sinä: luonnollisella kielellä.
Midscene.js on avoimen lähdekoodin selainautomaatio-kirjasto, joka käyttää multimodaalisia kielimalleja sivun visuaaliseen ymmärtämiseen. Se ei välitä siitä, onko painikkeesi div vai button. Se etsii elementit visualisoinnin ja kontekstin perusteella, aivan kuten ihminen.
---
Arkkitehtuuri: Cursor + Midscene.js
Miten tämä integroidaan osaksi päivittäistä kehitystä? Alla on suoraviivainen arkkitehtuurikaavio siitä, miten vibe-koodari ajaa testejä ilman koodirivin kirjoittamista testiautomaatiota varten.
┌────────────────────────────────────────────────────────┐
│ Cursor AI │
│ (Generoi testitiedostot luonnollisella kielellä) │
└──────────────────────────┬─────────────────────────────┘
│
▼ (.spec.ts -testitiedosto)
┌────────────────────────────────────────────────────────┐
│ Midscene.js Runner │
│ (Tulkitsee testit ja ottaa kuvakaappaukset sivusta) │
└──────────────────────────┬─────────────────────────────┘
│
▼ (Kuvakaappaukset + DOM-malli)
┌────────────────────────────────────────────────────────┐
│ Multimodaalinen LLM (GPT-4o) │
│ (Analysoi näkymän ja palauttaa koordinaatit) │
└──────────────────────────┬─────────────────────────────┘
│
▼ (Toimintaohjeet)
┌────────────────────────────────────────────────────────┐
│ Selain (Playwright-ajuri) │
│ (Suorittaa klikkaukset, kirjoitukset ja tarkistukset) │
└────────────────────────────────────────────────────────┘
Tämä työnkulku poistaa tarpeen ylläpitää monimutkaisia testiskriptejä. Jos käyttöliittymän ulkoasu muuttuu, LLM mukautuu muutokseen automaattisesti.
---
Käytännön toteutuskehys vibe-koodarille
Älä kirjoita testejä käsin. Anna Cursorin hoitaa asennus ja testitiedostojen luonti. Seuraa tätä kolmivaiheista kehystä.
Vaihe 1: Ympäristön pystytys Cursorissa
Avaa Cursorin pääte (Terminal) ja asenna Midscene.js osaksi Playwright-projektiasi. Aja seuraava komento:
npm i @midscene/web3 playwright -D
Pyydä tämän jälkeen Cursorin chatissa (.cursorrules tai Composer-tilassa) konfiguroimaan Playwright käyttämään Midscene-ajuria.
Vaihe 2: Testien määrittely luonnollisella kielellä
Midscene.js perustuu kolmeen päämetodiin, joita ohjataan vapaalla tekstillä:
- aiAction: Suorittaa toimintoja (esim. "kirjoita hakukenttään", "klikkaa kirjaudu-painiketta").
- aiAssert: Tekee tarkistuksia (esim. "varmista, että ostoskorissa on kaksi tuotetta").
- aiQuery: Hakee tietoa sivulta JSON-muodossa ilman selektoreita.
Vaihe 3: Cursor-kehotepohja testien luomiseen
Käytä tätä järjestelmäkehitetettä (System Prompt) Cursorissa, kun haluat luoda uusia Midscene-testejä. Kopioi tämä suoraan Cursorin chattiin:
Sinä olet QA-insinööri, joka kirjoittaa Midscene.js-testejä Playwright-ympäristöön.
Kirjoita testit käyttäen vain luonnollisen kielen ohjeita.
Säännöt:
1. Älä käytä CSS-selektoreita tai XPath-polkuja.
2. Käytä aiAction-metodia kaikissa vuorovaikutuksissa.
3. Käytä aiAssert-metodia tilan varmistamiseen.
4. Käytä aiQuery-metodia, jos testissä pitää poimia tietoa sivulta jatkokäsittelyä varten.
Esimerkki testirakenteesta:
await aiAction("Kirjoita hakukenttään 'kissa' ja paina Enter");
await aiAssert("Sivulla näkyy vähintään kolme hakutulosta");
---
Blueprint: Verkkokaupan ostoskoritesti
Tässä on valmis rakenteellinen malli siitä, miltä luonnollisen kielen testitiedosto näyttää. Voit antaa tämän suoraan Cursorille pohjaksi.
Testitapaus: Ostoskorin toiminnallisuuden regressiotestaus
Alustus:
- Avaa sivu: "https://esimerkkikauppa.fi/tuotteet"
Testivaiheet:
- aiAction: "Etsi tuote nimeltä 'Cursor Pro' ja klikkaa sen kohdalla 'Lisää ostoskoriin'."
- aiAction: "Odota sekunti ja klikkaa sivun oikeassa yläkulmassa olevaa ostoskorikuvaketta."
- aiAssert: "Varmista, että ostoskorin sivupaneeli aukeaa ja siellä näkyy tuote 'Cursor Pro'."
- aiAssert: "Varmista, että ostoskorin loppusumma on suurempi kuin 0 euroa."
- aiQuery: "Hae ostoskorissa olevien tuotteiden määrä muodossa { kpl: number }."
Kun ajat tämän testin, Midscene ottaa sivusta kuvakaappauksen, lähettää sen tekoälylle analysoitavaksi ja suorittaa klikkaukset täysin dynaamisesti. Jos "Lisää ostoskoriin" -painike muuttuu vihreästä punaiseksi tai sen teksti muuttuu muotoon "Osta nyt", testi läpäisee silti.
---
Visuaalinen raportointi ja virheenkorjaus
Yksi Midscenen suurimmista eduista on sen tarjoama visuaalinen raportointityökalu. Kun testi epäonnistuu, et joudu lukemaan kryptisiä virhelokeja.
Ajon jälkeen Midscene luo HTML-raportin, joka näyttää:
1. Kuvakaappauksen jokaisesta vaiheesta.
2. Visuaalisen kohdistuksen: Punainen tai vihreä laatikko sen elementin päällä, johon tekoäly päätti klikata.
3. LLM-päättelyn: Miksi tekoäly valitsi juuri kyseisen elementin annettujen ohjeiden perusteella.
Jos testi epäonnistuu siksi, että käyttöliittymässä on todellinen virhe, ota kuvakaappaus Midscenen raportista, pudota se Cursorin chattiin ja sano: "Tämä testi epäonnistui tässä vaiheessa. Korjaa sovelluksen koodi."
---
Siirry selektoreista intentioon
Älä tuhlaa aikaasi vanhanaikaisten testien ylläpitoon. Kun tekoälykehitys ja vibe-koodaus nostavat kehitysnopeutesi moninkertaiseksi, testauksen on pysyttävä perässä.
Siirtymällä luonnollisen kielen selainautomaatioon poistat turhan työn testien ylläpidosta. Voit keskittyä siihen, mikä on tärkeää: uusien ominaisuuksien rakentamiseen ja arvon tuottamiseen käyttäjille.
Kokeile tätä jo tänään. Asenna Midscene, anna Cursorin luoda ensimmäinen testitiedosto ja katso, kuinka tekoäly testaa sovelluksesi puolestasi.