Cypress-parancsok és egyéni parancsok: 21 fontos tény

Cypress Cy parancsok

A ciprus az hatékony tesztelési keretrendszer amely lehetővé teszi a fejlesztők számára a végpontok közötti tesztek automatizálását webes alkalmazások. Az egyik a legfontosabb jellemzőket a Cypress az kiterjedt készlete of beépített parancsok, amelyek megkönnyítik a weblap elemeivel való interakciót. Ezeken kívül beépített parancsok, A Cypress lehetővé teszi egyéni parancsok létrehozását is, amelyek tovább javíthatják a képességeket a tesztjeidről. Ban ben ez a szekció, megvizsgálunk néhányat a leggyakrabban használt Cypress egyéni parancsok.

Cypress Kattintson a Parancsra

A ciprus click() paranccsal szimulálja a felhasználót, aki egy weboldal elemére kattint. Ez a parancs különösen akkor hasznos, ha gombokkal, hivatkozásokkal, ill bármely más kattintható elem. A click() parancsot, egyszerűen meg kell adnia egy választót, amely azonosítja a kattintani kívánt elemet. A Cypress ezután szimulál egy kattintás esemény azon az elemen.

Íme egy példa arra, hogyan használhatja a click() parancs a Cypressben:

javascript
cy.get('button').click();

Ebben a példában a get() parancsot használjuk a helymeghatározásra egy gombelem oldalon, majd a click() parancsot használják a szimulációra egy kattintás on azt a gombot.

Cypress Double Click Command

A ciprus dblclick() parancs hasonló a click() parancsot, de kifejezetten szimulációra használják dupla kattintás esemény egy elemen. Dupla kattintás gyakran használják kiváltására bizonyos cselekvéseket vagy viselkedés egy weboldalon. Használatához a dblclick() parancsot, meg kell adnia egy választót, amely azonosítja a duplán kattintani kívánt elemet.

Íme egy példa arra, hogyan használhatja a dblclick() parancs a Cypressben:

javascript
cy.get('.element').dblclick();

Ebben a példában a get() paranccsal egy elem megkeresésére szolgál az osztály „eleme” az oldalon, majd a dblclick() parancsot használják a szimulációra dupla kattintás azon az elemen.

Cypress Kattintson jobb gombbal a parancsra

A ciprus rightclick() parancsot használják a szimulációra jobb klikk esemény egy elemen. Jobb kattintás gyakran megnyílik helyi menü val vel további lehetőségek vagy cselekvések a használatr választani. Használatához a rightclick() parancsot, meg kell adnia egy választót, amely azonosítja azt az elemet, amelyre a jobb gombbal kattintani szeretne.

Íme egy példa arra, hogyan használhatja a rightclick() parancs a Cypressben:

javascript
cy.get('#element').rightclick();

Ebben a példában a get() paranccsal egy elem megkeresésére szolgál az id „elem” az oldalon, majd a rightclick() parancsot használják a szimulációra jobb klikk azon az elemen.

Cypress Type Command

A ciprus type() parancs a szöveg beírásának szimulálására szolgál a weboldal beviteli mezőjébe vagy szövegterületébe. Ez a parancs különösen akkor hasznos, ha tesztelni szeretne űrlap bemenetek or keresési funkció. A type() parancsot, meg kell adnia egy választót, amely azonosítja a beviteli mezőt vagy textarea, majd adja meg a beírni kívánt szöveget.

Íme egy példa arra, hogyan használhatja a type() parancs a Cypressben:

javascript
cy.get('input[name="username"]').type('JohnDoe');

Ebben a példában a get() paranccsal egy beviteli mezőt keresünk a „felhasználónév” az oldalon, majd a type() parancs a gépelés szimulálására szolgál a „JohnDoe”Be azt a beviteli mezőt.

Cypress Clear Command

A ciprus clear() paranccsal törölheti a szöveget a beviteli mezőből vagy a weboldal szövegterületéből. Ezt a parancsot gyakran együtt használják a type() parancs a törléshez bármely létező szöveget gépelés előtt új szöveg. A clear() parancsot, meg kell adnia egy választót, amely azonosítja a beviteli mezőt vagy textarea.

Íme egy példa arra, hogyan használhatja a clear() parancs a Cypressben:

javascript
cy.get('input[name="username"]').clear();

Ebben a példában a get() paranccsal egy beviteli mezőt keresünk a „felhasználónév” az oldalon, majd a clear() parancs a törlésre szolgál bármely létező szöveget ból ből azt a beviteli mezőt.

Cypress Check Command

A ciprus check() parancsot használjuk az ellenőrzésre jelölőnégyzet vagy rádiógomb egy weboldalon. Ez a parancs különösen akkor hasznos, ha tesztelni szeretne a választék lehetőségekről vagy választási lehetőségekről. Használatához a check() parancsot, meg kell adnia egy választót, amely azonosítja a csekkdoboz vagy rádiógomb.

Íme egy példa arra, hogyan használhatja a check() parancs a Cypressben:

javascript
cy.get('input[type="checkbox"]').check();

Ebben a példában a get() parancsot használjuk a helymeghatározásra egy jelölőnégyzet elemet oldalon, majd a check() parancsot használjuk az ellenőrzésre azt a jelölőnégyzetet.

Cypress Select Command

A ciprus select() parancsot használjuk a kiválasztáshoz egy opció ból ből egy legördülő menü menü egy weboldalon. Ez a parancs különösen akkor hasznos, ha tesztelni szeretne a választék lehetőségek közül egy legördülő menü. A select() parancsot, meg kell adnia egy választót, amely azonosítja a legördülő menüből, majd biztosítsa az érték vagy szövege az opció ki szeretné választani.

Íme egy példa arra, hogyan használhatja a select() parancs a Cypressben:

javascript
cy.get('select[name="country"]').select('USA');

Ebben a példában a get() parancsot használjuk a helymeghatározásra egy legördülő menü menü val vel az „ország” név” az oldalon, majd a select() parancsot használjuk a kiválasztáshoz az opció az „USA” szöveggel azt a legördülő listát.

Cypress Trigger Command

A ciprus trigger() parancsot használják az indításhoz Esemény egy weboldal elemén. Ez a parancs különösen akkor hasznos, ha szimulálni szeretne egy konkrét esemény, Mint például a egy egérmutatót or egy gombnyomás. A trigger() parancsot, meg kell adnia egy választót, amely azonosítja az elemet, majd meg kell adnia az esemény ki akarod váltani.

Íme egy példa arra, hogyan használhatja a trigger() parancs a Cypressben:

javascript
cy.get('.element').trigger('mouseover');

Ebben a példában a get() paranccsal egy elem megkeresésére szolgál az osztály „eleme” az oldalon, majd a trigger() parancsot használják a szimulációra egy egérmutatót esemény az adott elemen.

Ezek csak néhány példa of az egyéni parancsokat hogy Cypress nyújt. A tőkeáttétellel ezeket a parancsokat, létrehozhat erőteljes és kifejező tesztek amelyek pontosan szimulálják felhasználói interakciók val vel a webalkalmazásod. Egyéni parancsok a Cypress súgó egyszerűsítésére a tesztkódot és olvashatóbbá és karbantarthatóbbá tegye. Tehát menjen előre és fedezze fel a teljes skálát of Cypress egyéni parancsok a tesztelési munkafolyamat javítása érdekében.

Cypress egyéni parancsok

Egyéni parancsok a Cypressben lehetővé teszi a kiterjesztést a funkcionalitás of a Cypress tesztelési keretrendszer létrehozásával saját újrafelhasználható parancsait. Ezek az egyéni parancsok kapszulázására használható összetett sorozatok cselekvések, állítások, ill bármilyen más funkció amelyeket gyakran használ a tesztjei során. Ban ben ez a szekció, felfedezzük különböző szempontok of Cypress egyéni parancsok és hogyan javíthatják a tesztelési munkafolyamatot.

Szülő egyéni parancs a Cypressben

Egyéni szülőparancs a Cypressben egy parancs, amely műveletek vagy állítások sorozatát foglalja magában. Úgy szolgál, mint magas szintű absztrakció, amely lehetővé teszi az írást olvashatóbb és karbantarthatóbb tesztek. Szülő egyéni parancs létrehozásával csökkentheti kódduplikáció és modulárisabbá tegye a teszteket.

Egyéni szülőparancs létrehozásához használhatja a Cypress.Commands.add() a Cypress által biztosított módszer. Ez a metódus két argumentumot használ: az egyéni parancs nevét és egy függvényt, amely meghatározza a parancs viselkedését. A funkción belül használhatja létező Cypress parancsok cselekvéseket végrehajtani vagy állításokat tenni.

Íme egy példa egy szülő egyéni parancsra, amely bejelentkezik a felhasználóba:

javascript
Cypress.Commands.add("login", (username, password) => {
cy.visit("/login");
cy.get("#username").type(username);
cy.get("#password").type(password);
cy.get("#login-button").click();
});

Ezzel az egyéni paranccsal egyszerűen hívhat cy.login(username, password) az elvégzendő tesztekben a bejelentkezés akció. Ez javítja a tesztek olvashatóságát, és könnyebben karbantartható.

Gyermek egyéni parancs a Cypressben

Gyermek egyéni parancs in Cypress egy olyan parancs, amely kiterjeszti a Cypress által biztosított meglévő parancsot. Lehetővé teszi a hozzáadást további funkcionalitás vagy módosítani a viselkedését a meglévő parancsot. Ez akkor lehet hasznos, ha egy parancs viselkedését kívánja testre szabni az Ön speciális tesztelési igényeit.

Készíteni gyermek egyéni parancs, használhatja a Cypress.Commands.overwrite() a Cypress által biztosított módszer. Ez a metódus két argumentumot használ: a kiterjeszteni kívánt parancs nevét és egy függvényt, amely meghatározza a viselkedését a kiterjesztett parancs. A funkción belül hívható az eredeti parancsot segítségével Cypress.Commands.overwrite().

Itt egy példa gyermek egyéni parancs hogy kiterjeszti a cy.click() parancsot a hozzáadáshoz késés kattintás előtt:

javascript
Cypress.Commands.overwrite("click", (originalFn, subject, options) => {
const delay = options && options.delay ? options.delay : 500;
cy.wait(delay);
originalFn(subject);
});

Ezzel az egyéni paranccsal most további egységet is átadhat delay opció a cy.click() parancsot a bemutatásra késés előtt a kattintás műveletet hajtanak végre. Ez lehetővé teszi olyan forgatókönyvek szimulálását, ahol a használatr eltarthat majd valamikor interakcióba lépni az elemmel.

Kettős egyéni parancsok a Cypressben

Kettős egyéni parancs a ciprusban vannak egy kombináció a szülő és gyermek egyéni parancsok. Műveletek vagy állítások sorozatát foglalják magukba, miközben egy meglévő parancsot is kiterjesztenek. Ez biztosítja erőteljes módja létrehozni újrafelhasználható és testreszabható parancsok.

Készíteni kettős egyéni parancs, használhatja mind a Cypress.Commands.add() és a Cypress.Commands.overwrite() a Cypress által biztosított módszerek. Ez lehetővé teszi az egyéni parancs viselkedésének meghatározását és egy meglévő parancs kiterjesztését a címen ugyanakkor.

Itt egy példa kettős egyéni parancs amely bejelentkezik egy felhasználóba és végrehajtja egy konkrét akció:

javascript
Cypress.Commands.add("loginAndPerformAction", (username, password, action) => {
cy.login(username, password);
cy.get("#action-button").click();
cy.contains(action).click();
});

Ezzel az egyéni paranccsal bejelentkezhet egy felhasználót és végrehajthat egy konkrét akció in egyetlen parancsot. Ez javítja a tesztek olvashatóságát és újrafelhasználhatóságát.

Meglévő ciprusparancsok felülírása

A Cypressben felül is lehet írni létező Cypress parancsok módosítani viselkedésüket. Ez akkor lehet hasznos, ha egy parancs viselkedését kívánja testre szabni az Ön speciális tesztelési igényeit.

Felülírni meglévő Cypress parancs, használhatja a Cypress.Commands.overwrite() a Cypress által biztosított módszer. Ez a metódus két argumentumot használ: a felülírni kívánt parancs nevét és egy függvényt, amely meghatározza a a felülírt parancsot. A funkción belül hívható az eredeti parancsot segítségével Cypress.Commands.overwrite().

Cypress egyéni parancsok importálása

Miután meghatározta az egyéni parancsokat, importálhatja őket a a Cypress tesztfájljait hogy használja őket a tesztjeihez. Cypress biztosít egyszerű módon egyéni parancsok importálásához a support mappát.

Egyéni parancsok importálásához hozzon létre Fájl nevezett commands.js a support mappája a Cypress projekted. -ban ez a fájl, importálhatja egyéni parancsait a import nyilatkozatot, és regisztrálja azokat a Cypress segítségével a Cypress.Commands.add() or Cypress.Commands.overwrite() mód.

Cypress egyéni parancsok IntelliSense

Cypress biztosít IntelliSense támogatás egyéni parancsokhoz, megkönnyítve a tesztek írását egyéni parancsokkal. Az IntelliSense biztosítja kód kitöltése és az egyéni parancsok dokumentációja, amely segít a tesztek hatékonyabb megírásában.

Az IntelliSense egyéni parancsok engedélyezéséhez telepítenie kell a @types/cypress csomag be a projekt. Ez a csomag biztosít TypeScript definíciók a Cypress számára, beleértve az egyéni parancsok támogatását.

Miután telepítette a @types/cypress csomagban, elkezdheti használni az IntelliSense-t az egyéni parancsokhoz a Cypress tesztfájljait. Az IntelliSense javaslatokat és dokumentációt nyújt az egyéni parancsokhoz gépelés közben, megkönnyítve a tesztek írását.

Összefoglalva, a Cypress egyéni parancsai erőteljes funkció amely lehetővé teszi a kiterjesztését a funkcionalitás of a Cypress tesztelési keretrendszer. Lehetővé teszik az alkotást újrafelhasználható és testreszabható parancsok, javítja a tesztek olvashatóságát, karbantarthatóságát és hatékonyságát. Akár egy műveletsorozatot kell beágyazni, akár egy meglévő parancsot kell kiterjesztenie, akár felül kell írnia egy meglévő parancsot, az egyéni parancsok rugalmas és intuitív módon a tesztelési munkafolyamat javítása érdekében.

Példák és használati esetek

Példa a bejelentkezési függvényre

Az egyik a leggyakoribb használati esetek Az egyéni parancsokhoz a Cypress alkalmazásban valósul meg egy bejelentkezési funkció. Ez lehetővé teszi az egyszerű újrafelhasználást a bejelentkezési logika át több teszt, Így a tesztcsomagod hatékonyabb és karbantarthatóbb.

Tegyük fel, hogy van egy webes alkalmazás val vel egy bejelentkezési oldal ami megköveteli egy felhasználónév és jelszót. Ismétlés helyett a bejelentkezési lépéseket in minden teszt, létrehozhat egy egyéni parancsot a kezeléséhez a bejelentkezési folyamat.

Íme egy példa arra, hogyan definiálhat egyéni parancsot a bejelentkezéshez:

javascript
Cypress.Commands.add("login", (username, password) => {
cy.visit("/login");
cy.get("#username").type(username);
cy.get("#password").type(password);
cy.get("#login-button").click();
});

Ezzel az egyéni paranccsal most egyszerűen bejelentkezhet egyszerűen hívással cy.login(username, password) a tesztjeidben. Ez javítja a tesztek olvashatóságát és csökkenti a kód ismétlődését.

Példa újrapróbálkozása

Egy másik hasznos példa Az egyéni parancsok a Cypress alkalmazásban valósul meg egy újrapróbálkozási mechanizmus mert pelyhes tesztek. Foltos tesztek olyan tesztek, amelyek időnként meghiúsulnak időszakos problémák, Mint például a hálózati késések or versenykörülmények.

A Cypress beépített retry parancs, amely lehetővé teszi az újrapróbálást egy konkrét parancsot vagy állítsa többször, amíg át nem megy vagy eléri a maximális szám az újrapróbálkozásból.

Íme egy példa arra, hogyan határozhat meg egy egyéni parancsot, amely újrapróbálkozik egy konkrét parancsot:

javascript
Cypress.Commands.add("retryCommand", { prevSubject: true }, (subject) => {
return cy.wrap(subject, { timeout: 5000 }).should("be.visible");
});

Ebben a példában az egyéni parancs retryCommand tart egy téma as egy veszekedés és újra megpróbálja a parancsot should("be.visible") on azt a tárgyat mert maximum of 5 másodperc.

Ezt az egyéni parancsot ezután a következőképpen használhatja a tesztekben:

javascript
cy.get(".element").retryCommand();

Ez az egyéni parancs segít kezelni pelyhes tesztek úgy, hogy automatikusan újrapróbálja a parancsot, amíg el nem múlik vagy időtúllép. Javítja a stabilitás a tesztek és csökkenti hamis pozitív.

Promise és Async/Await példa

A Cypress lehetővé teszi az ígéretekkel és az aszinkron/várakozó szintaxissal való munkát is, így könnyebben kezelhető aszinkron műveletek a tesztjeidben. Létrehozhat egyéni parancsokat, amelyek kihasználják az ígéreteket, vagy aszinkronizálnak/várnak végrehajtásra összetett műveletek vagy várja meg specifikus körülmények között.

Íme egy példa arra, hogyan definiálhat egy egyéni parancsot, amely az async/await paranccsal arra vár, hogy egy elem látható legyen:

javascript
Cypress.Commands.add("waitForElement", { prevSubject: true }, async (subject) => {
await cy.wrap(subject, { timeout: 5000 }).should("be.visible");
});

Ebben a példában az egyéni parancs waitForElement tart egy téma as egy veszekedés és megvárja, amíg az elem láthatóvá válik a segítségével should("be.visible") állítás.

Ezt az egyéni parancsot ezután a következőképpen használhatja a tesztekben:

javascript
cy.get(".element").waitForElement();

Ez az egyéni parancs egyszerűsíti a kezelést of aszinkron műveletek a tesztekben, olvashatóbbá és karbantarthatóbbá téve azokat.

Ezek a példák bizonyítani a hatalom és az egyéni parancsok rugalmassága a Cypressben. A teremtéssel újrafelhasználható egyéni parancsok, javíthat a hatékonyságot, olvashatósága és stabilitása a tesztcsomagod.
Következtetés

Összefoglalva, Cypress parancsok és a Cypress egyéni parancsok faliórái erőteljes eszközök ami nagyban fokozhatja a tesztautomatizálásod erőfeszítések. A beépített Cypress parancsok ad széles választék az interakcióhoz használható funkciókról a te alkalmazásod, Míg a az egyéni parancsokat lehetővé teszi az alkotást újrafelhasználható és speciális parancsok valakire szabva az Ön konkrét igényeit. A tőkeáttétellel ezeket a parancsokat, tudsz írni tiszta, tömör és karbantartható tesztek amelyek könnyen érthetők és frissíthetők. Akár vagy egy kezdő or tapasztalt tesztelő, beépítve Cypress parancsok és az egyéni parancsok a tesztelési munkafolyamatba kétségtelenül leegyszerűsítik a tesztelési folyamatot és segít a szállításban kiváló minőségű szoftver. Szóval minek várni? Kezdje el felfedezni a világ of Cypress parancsok és egyéni parancsokat ma és vegye a tesztautomatizálásod nak nek a következő szint!

Gyakran ismételt kérdések

Hogyan telepíthetem a Cypress-t?

A Cypress telepítéséhez kövesse ezeket a lépéseket:

1. Nyisd ki a terminálod or parancssorból.
2. navigáljon a projekt könyvtárban.
3. Indítsa el a parancsot npm install cypress a Cypress helyi telepítéséhez.

Hogyan frissíthetem a Cypress-t a legújabb verzióra?

A Cypress frissítéséhez a legújabb verzió, Akkor a következő parancs:

npm update cypress

Ez frissíti a Cypress-t a következőre a legújabb elérhető verzió.

Hogyan használhatok egyéni parancsokat a Cypressben?

Egyéni parancsok használatához a Cypressben meg kell adni azokat a projekttámogatási fájlja. A következőképpen teheti meg:

1. Teremt egy új fájlt hívott commands.js a cypress/support könyvtárban.
2. Határozza meg egyéni parancsait a Cypress.Commands.add() módszer.
3. Megtakarítás A fájl és indítsa újra a Cypress tesztfutóját.

Most már használhatja egyéni parancsait a Cypress-tesztek során.

Miért nem működnek az egyéni parancsaim a Cypressben?

Ha az egyéni parancsok nem működnek a Cypressben, feltétlenül ellenőrizze a következő:

1. Győződjön meg arról, hogy megfelelően definiálta az egyéni parancsokat a támogatási fájlt.
2. Ellenőrizze ezt a támogatási fájlt helyesen szerepel benne az Ön Cypress konfigurációját.
3. Ellenőrizze, hogy bármilyen szintaktikai hiba vagy gépelési hibák egyéni parancsdefinícióit.

Hogyan próbálhatok újra egy egyéni parancsot a Cypressben?

A Cypress egyéni parancsának újrapróbálásához használja a .retry() módszer. Íme egy példa:

javascript
cy.customCommand().retry(3);

Ez legfeljebb háromszor próbálkozik újra az egyéni paranccsal, ha az sikertelen.

Hogyan használhatok egyéni állításokat a Cypressben?

Használata egyéni állítások a Cypressben a következővel határozhatja meg őket chai állítási könyvtár. Íme egy példa:

javascript
chai.Assertion.addMethod('customAssertion', function(expected) {
// Assertion logic goes here
});

Miután meghatározta, használhatja a egyéni állítások a Cypress-tesztekben.

Hogyan használhatok egyéni választókat a Cypressben?

Használata egyéni kiválasztók a Cypressben a következővel határozhatja meg őket cy.get() módszer. Íme egy példa:

javascript
Cypress.Commands.add('customSelector', (selector) => {
return cy.get(`[data-custom="${selector}"]`);
});

Miután meghatározta, használhatja a egyéni kiválasztók a Cypress-tesztekben.

Hogyan tudom hibakeresni a Cypress tesztjeimet?

A Cypress tesztek hibakereséséhez használhatja a cy.debug() parancs. Íme egy példa:

javascript
cy.customCommand().debug();

Ez szünetel a teszt végrehajtása és nyitott a Cypress tesztfutó hibakereső konzolja.

Hogyan javíthatom a Cypress tesztem teljesítményét?

Javítása A teljesítmény a Cypress tesztjeit követheti ezeket a legjobb gyakorlatokat:

1. használat cy.wait() megfontoltan kerülni szükségtelen késések.
2. Minimalizálása a használat of cy.get() És használni egyéni kiválasztók amikor csak lehetséges.
3. Használja a cy.intercept() parancsot, hogy csonk vagy gúnyoljon hálózati kérések.
4. Futtassa le a teszteket fejetlen mód (--headless) számára gyorsabb végrehajtás.

Hol találom a Cypress dokumentációját?

Megtalálható a hivatalos dokumentációt a Cypressnek at https://docs.cypress.io. A dokumentáció biztosít részletes információk a Cypress használatáról, beleértve az útmutatókat, API hivatkozások, és példák.