Cypress Commands & Custom Commands: 21 důležitých faktů

Cypress Cy příkazy

anysnap 01. října 2021 v 4:03 59 hodin

Cypress je výkonný testovací rámec což vývojářům umožňuje automatizovat end-to-end testy pro webové aplikace. Jeden z klíčové vlastnosti Cypřiše je jeho rozsáhlý soubor of vestavěné příkazy, které usnadňují interakci s prvky na webové stránce. Kromě těchto vestavěné příkazy, Cypress také umožňuje vytvářet vlastní příkazy, které lze dále vylepšovat schopnosti vašich testů. v v této části, některé z nich prozkoumáme nejpoužívanější Cypress vlastní příkazy.

Příkaz Cypress Click

Cypřiš click() se používá k simulaci kliknutí uživatele na prvek na webové stránce. Tento příkaz je zvláště užitečný, když chcete pracovat s tlačítky, odkazy nebo jakýkoli jiný klikací prvek. Chcete-li použít click() stačí zadat selektor, který identifikuje prvek, na který chcete kliknout. Cypřiš pak bude simulovat kliknutí událost na tom prvku.

Zde je příklad toho, jak můžete použít click() příkaz v Cypressu:

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

V tomto příkladu get() příkaz se používá k vyhledání tlačítkový prvek na stránce a poté click() příkaz se používá k simulaci kliknutí on to tlačítko.

Příkaz Cypress Double Click

Cypřiš dblclick() příkaz je podobný příkazu click() příkaz, ale používá se speciálně k simulaci dvojitým kliknutím událost na prvku. Dvojité kliknutí se často používá ke spouštění určité akce nebo chování na webové stránce. Chcete-li použít dblclick() musíte zadat selektor, který identifikuje prvek, na který chcete poklepat.

Zde je příklad toho, jak můžete použít dblclick() příkaz v Cypressu:

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

V tomto příkladu get() příkaz se používá k vyhledání prvku s třída „prvek“ na stránce a poté dblclick() příkaz se používá k simulaci dvojitým kliknutím na tom prvku.

Příkaz Cypress klepněte pravým tlačítkem

Cypřiš rightclick() příkaz se používá k simulaci kliknutím pravým tlačítkem událost na prvku. Pravým kliknutím často otevírá kontextové menu s další možnosti nebo akce pro použitír vybrat si z. Chcete-li použít rightclick() musíte zadat selektor, který identifikuje prvek, na který chcete kliknout pravým tlačítkem.

Zde je příklad toho, jak můžete použít rightclick() příkaz v Cypressu:

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

V tomto příkladu get() příkaz se používá k vyhledání prvku s id „prvek“ na stránce a poté rightclick() příkaz se používá k simulaci kliknutím pravým tlačítkem na tom prvku.

Příkaz typu Cypress

Cypřiš type() příkaz se používá k simulaci psaní textu do vstupního pole nebo textové oblasti na webové stránce. Tento příkaz je zvláště užitečný, když chcete testovat formulářové vstupy or funkce vyhledávání. Chcete-li použít type() musíte poskytnout selektor, který identifikuje vstupní pole nebo textarea a poté zadejte text, který chcete zadat.

Zde je příklad toho, jak můžete použít type() příkaz v Cypressu:

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

V tomto příkladu get() příkaz se používá k vyhledání vstupního pole s jméno „uživatelské jméno“ na stránce a poté type() příkaz se používá k simulaci psaní text „JohnDoe“Do to vstupní pole.

Příkaz Cypress Clear

Cypřiš clear() příkaz se používá k vymazání textu ze vstupního pole nebo textové oblasti na webové stránce. Tento příkaz se často používá ve spojení s type() příkaz k vymazání jakýkoli existující text před psaním nový text. Chcete-li použít clear() musíte poskytnout selektor, který identifikuje vstupní pole nebo textarea.

Zde je příklad toho, jak můžete použít clear() příkaz v Cypressu:

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

V tomto příkladu get() příkaz se používá k vyhledání vstupního pole s jméno „uživatelské jméno“ na stránce a poté clear() příkaz se používá k vymazání jakýkoli existující text od to vstupní pole.

Příkaz Cypress Check

Cypřiš check() příkaz se používá ke kontrole zaškrtávací políčko nebo přepínač na webové stránce. Tento příkaz je zvláště užitečný, když chcete testovat výběr možností nebo voleb. Chcete-li použít check() musíte poskytnout selektor, který identifikuje zkontrolovatpole nebo přepínač.

Zde je příklad toho, jak můžete použít check() příkaz v Cypressu:

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

V tomto příkladu get() příkaz se používá k vyhledání prvek zaškrtávacího políčka na stránce a poté check() příkaz se používá ke kontrole to zaškrtávací políčko.

Cypress Vyberte příkaz

Cypřiš select() příkaz se používá k výběru možnost od rozevírací seznam menu na webové stránce. Tento příkaz je zvláště užitečný, když chcete testovat výběr z možností od rozevírací seznam. Chcete-li použít select() musíte poskytnout selektor, který identifikuje rozevírací nabídcea poté poskytnout hodnota nebo text možnost chcete vybrat.

Zde je příklad toho, jak můžete použít select() příkaz v Cypressu:

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

V tomto příkladu get() příkaz se používá k vyhledání rozevírací seznam menu s název „země“ na stránce a poté select() příkaz se používá k výběru možnost s textem „USA“ od ten rozbalovací seznam.

Příkaz Cypress Trigger

Cypřiš trigger() příkaz se používá ke spuštění událost na prvek na webové stránce. Tento příkaz je zvláště užitečný, když chcete simulovat konkrétní událost, Jako přejetí myší or stisknutí klávesy. Chcete-li použít trigger() musíte zadat selektor, který identifikuje prvek, a poté zadat akce chcete spustit.

Zde je příklad toho, jak můžete použít trigger() příkaz v Cypressu:

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

V tomto příkladu get() příkaz se používá k vyhledání prvku s třída „prvek“ na stránce a poté trigger() příkaz se používá k simulaci přejetí myší událost na tomto prvku.

Tyto jsou jen pár příkladů of vlastní příkazy který Cypřiš poskytuje. Pákovým efektem tyto příkazy, můžete vytvořit silné a expresivní testy které přesně simulují uživatelské interakce s vaši webovou aplikaci. Vlastní příkazy v Cypress pomoci zefektivnit váš testovací kód a učinit jej čitelnějším a udržitelnějším. Takže pokračujte a prozkoumejte celý rozsah of Cypress vlastní příkazy pro vylepšení vašeho pracovního postupu při testování.

Cypress vlastní příkazy

obraz

Vlastní příkazy v Cypress vám umožní rozšířit funkčnost of testovací rámec Cypress vytvořením své vlastní opakovaně použitelné příkazy. Tyto vlastní příkazy lze použít k zapouzdření složité sekvence jednání, tvrzení, popř jakékoli jiné funkce které často používáte ve svých testech. v v této části, prozkoumáme různé aspekty of Cypress vlastní příkazy a jak mohou zlepšit váš pracovní postup testování.

Rodičovský vlastní příkaz v Cypressu

Vlastní příkaz rodiče v Cypress je příkaz, který zapouzdřuje sekvenci akcí nebo tvrzení. Slouží jako abstrakce na vysoké úrovni, což vám umožní psát čitelnější a udržitelnější testy. Vytvořením nadřazeného vlastního příkazu můžete snížit duplikace kódu a vaše testy budou modulárnější.

Chcete-li vytvořit nadřazený vlastní příkaz, můžete použít Cypress.Commands.add() metoda poskytovaná společností Cypress. Tato metoda používá dva argumenty: název vlastního příkazu a funkci, která definuje chování příkazu. V rámci funkce můžete použít stávající Cypřišové příkazy provádět akce nebo dělat tvrzení.

Zde je příklad nadřazeného vlastního příkazu, který přihlásí uživatele:

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();
});

Pomocí tohoto vlastního příkazu můžete jednoduše zavolat cy.login(username, password) ve svých testech provést přihlášení akce. To zlepšuje čitelnost vašich testů a usnadňuje jejich údržbu.

Vlastní příkaz dítěte v Cypressu

Vlastní podřízený příkaz v Cypress je příkaz, který rozšiřuje existující příkaz poskytovaný Cypressem. Umožňuje přidat další funkce nebo upravit chování stávající příkaz. To může být užitečné, když chcete přizpůsobit chování příkazu tak, aby vyhovovalo vaše specifické testovací potřeby.

Vytvořit podřízený vlastní příkaz, můžete použít Cypress.Commands.overwrite() metoda poskytovaná společností Cypress. Tato metoda používá dva argumenty: název příkazu, který chcete rozšířit, a funkci, která definuje chování rozšířený příkaz. V rámci funkce můžete volat původní příkaz použitím Cypress.Commands.overwrite().

Zde je příklad podřízený vlastní příkaz který rozšiřuje cy.click() příkaz přidat zpoždení před kliknutím:

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

Pomocí tohoto vlastního příkazu nyní můžete předat další delay možnost na cy.click() příkaz představit zpoždení před kliknutí akce je provedena. To vám umožní simulovat scénáře kde použitír Může trvat Nějaký čas k interakci s prvkem.

Duální vlastní příkazy v Cypressu

cypřišové logo

Duální vlastní příkazy v Cypřiši jsou kombinace rodiče a podřízené vlastní příkazy. Zapouzdřují sekvenci akcí nebo tvrzení a zároveň rozšiřují existující příkaz. Toto poskytuje mocný způsob vytvořit opakovaně použitelné a přizpůsobitelné příkazy.

Vytvořit duální vlastní příkaz, můžete použít obojí Cypress.Commands.add() a Cypress.Commands.overwrite() metody poskytované společností Cypress. To vám umožní definovat chování vlastního příkazu a rozšířit stávající příkaz na stejný čas.

Zde je příklad duální vlastní příkaz který přihlásí uživatele a provede konkrétní akci:

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

Pomocí tohoto vlastního příkazu se můžete přihlásit uživatele a provést konkrétní akci in jediný příkaz. To zlepšuje čitelnost a opětovnou použitelnost vašich testů.

Přepisování stávajících příkazů Cypress

V Cypressu můžete také přepsat stávající Cypřišové příkazy pozměnit jejich chování. To může být užitečné, když chcete přizpůsobit chování příkazu tak, aby vyhovovalo vaše specifické testovací potřeby.

K přepsání existující příkaz Cypress, můžete použít Cypress.Commands.overwrite() metoda poskytovaná společností Cypress. Tato metoda používá dva argumenty: název příkazu, který chcete přepsat, a funkci, která definuje chování přepsaný příkaz. V rámci funkce můžete volat původní příkaz použitím Cypress.Commands.overwrite().

Import vlastních příkazů Cypress

Jakmile nadefinujete své vlastní příkazy, můžete je importovat do vaše testovací soubory Cypress abyste je mohli použít ve svých testech. Cypřiš poskytuje jednoduchý způsob pro import vlastních příkazů pomocí support složka.

Chcete-li importovat vlastní příkazy, vytvořte soubor pojmenovaný commands.js v support složka váš projekt Cypress, v tento soubor, můžete importovat své vlastní příkazy pomocí import a zaregistrujte je u Cypress pomocí Cypress.Commands.add() or Cypress.Commands.overwrite() metody.

Cypress Vlastní příkazy IntelliSense

anysnap 01. října 2021 v 5:06 15 hodin

Cypřiš poskytuje Podpora IntelliSense pro vlastní příkazy, což usnadňuje psaní testů pomocí vlastních příkazů. IntelliSense poskytuje dokončení kódu a dokumentaci pro vlastní příkazy, která vám pomůže psát testy efektivněji.

Chcete-li povolit IntelliSense pro vlastní příkazy, musíte nainstalovat @types/cypress balíček v váš projekt. Tento balíček poskytuje Definice TypeScript pro Cypress, včetně podpory vlastních příkazů.

Po instalaci @types/cypress balíčku, můžete začít používat IntelliSense pro vlastní příkazy v vaše testovací soubory Cypress. IntelliSense bude poskytovat návrhy a dokumentaci pro vaše vlastní příkazy během psaní, což usnadňuje psaní testů.

Na závěr, vlastní příkazy v Cypressu jsou výkonná funkce která vám umožní prodloužit funkčnost of testovací rámec Cypress. Umožňují vám tvořit opakovaně použitelné a přizpůsobitelné příkazy, zlepšuje čitelnost, udržovatelnost a efektivitu vašich testů. Ať už potřebujete zapouzdřit sekvenci akcí, rozšířit existující příkaz nebo přepsat existující příkaz, vlastní příkazy vám flexibilní a intuitivní způsob pro vylepšení vašeho pracovního postupu při testování.

Příklady a případy použití

Příklad přihlašovací funkce

Jeden z nejčastější případy použití pro vlastní příkazy v Cypress implementuje přihlašovací funkce. To umožňuje snadné opětovné použití logika přihlášení přes více testů, Což vaši testovací sadu efektivnější a udržitelnější.

Řekněme, že ano webová aplikace s přihlašovací stránku to vyžaduje uživatelské jméno a heslo. Místo opakování kroky přihlášení in každý test, můžete vytvořit vlastní příkaz ke zpracování proces přihlášení.

Zde je příklad toho, jak můžete definovat vlastní příkaz pro přihlášení:

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();
});

Pomocí tohoto vlastního příkazu se nyní můžete snadno přihlásit pouhým zavoláním cy.login(username, password) ve vašich testech. To zlepšuje čitelnost vašich testů a snižuje duplicitu kódu.

Příklad příkazu opakovat

Další užitečný příklad vlastní příkazy v Cypress implementuje mechanismus opakování for šupinové testy. Šupinové testy jsou testy, které občas selžou kvůli občasné problémy, Jako zpoždění sítě or podmínky závodu.

Cypress poskytuje vestavěný retry příkaz, který vám umožní opakovat konkrétní příkaz nebo tvrzení několikrát, dokud neprojde nebo nedosáhne maximální počet opakování.

Zde je příklad toho, jak můžete definovat vlastní příkaz, který se zopakuje konkrétní příkaz:

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

V tomto příkladu vlastní příkaz retryCommand bere předmět as hádka a zopakuje příkaz should("be.visible") on ten předmět for maximum of 5 sekund.

Tento vlastní příkaz pak můžete použít ve svých testech takto:

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

Tento vlastní příkaz pomáhá zvládnout šupinové testy automatickým opakováním příkazu, dokud neprojde nebo nevyprší časový limit. Zlepšuje se to stabilitu vašich testů a snížení falešně pozitivní.

Příklad Promise a Async/Await

Cypress také umožňuje pracovat se sliby a syntaxí async/wait, což usnadňuje manipulaci asynchronní operace ve vašich testech. Můžete vytvořit vlastní příkazy, které využívají sliby nebo asynchronně/čekají na provedení složité operace nebo čekat specifické podmínky.

Zde je příklad toho, jak můžete definovat vlastní příkaz, který čeká na zviditelnění prvku pomocí async/await:

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

V tomto příkladu vlastní příkaz waitForElement bere předmět as hádka a čeká, až bude prvek viditelný pomocí should("be.visible") tvrzení.

Tento vlastní příkaz pak můžete použít ve svých testech takto:

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

Tento vlastní příkaz zjednodušuje manipulace of asynchronní operace ve vašich testech, aby byly čitelnější a udržitelnější.

Tyto příklady ukázat energie a flexibilitu vlastních příkazů v Cypressu. Tvořením opakovaně použitelné vlastní příkazy, můžete se zlepšit účinnost, čitelnost a stabilita vaši testovací sadu.
Proč investovat do čističky vzduchu?

Závěrem lze říci, Cypřišové příkazy a Cypress vlastní příkazy jsou mocné nástroje což může výrazně zvýšit vaše automatizace testování úsilí. Vestavěný Cypřišové příkazy poskytnout široký rozsah funkcí, se kterými lze interagovat tvá aplikace, Zatímco vlastní příkazy vám umožní vytvořit opakovaně použitelné a specializované příkazy vyrobený na míru vaše specifické potřeby. Pákovým efektem tyto příkazy, můžeš psát čisté, stručné a udržovatelné testy které jsou snadno pochopitelné a aktualizovatelné. Ať už jste začátečník or zkušený tester, začlenění Cypřišové příkazy a vlastní příkazy do vašeho pracovního postupu testování nepochybně zefektivní váš testovací proces a pomůže vám doručit vysoce kvalitní software. Tak proč čekat? Začněte objevovat svět of Cypřišové příkazy a vlastní příkazy dnes a přijmout vaše automatizace testování na další úroveň!

Často kladené otázky

Jak nainstaluji Cypress?

Chcete-li nainstalovat Cypress, můžete následovat tyto kroky:

  1. OTEVŘENO váš terminál or příkazového řádku.
  2. přejděte na váš projekt adresáře.
  3. Spusťte příkaz npm install cypress k místní instalaci Cypress.

Jak mohu aktualizovat Cypress na nejnovější verzi?

Chcete-li aktualizovat Cypress na poslední verze, Můžete použít následující příkaz:

npm update cypress

Tím se aktualizuje Cypress na nejnovější dostupnou verzi.

Jak mohu používat vlastní příkazy v Cypressu?

Chcete-li v Cypressu používat vlastní příkazy, musíte je definovat v váš projektsoubor podpory uživatele. Můžete to udělat takto:

  1. Vytvořit nový soubor volal commands.js v cypress/support adresáře.
  2. Definujte své vlastní příkazy pomocí Cypress.Commands.add() metoda.
  3. Uložit soubor a restartujte váš testovací běžec Cypress.

Nyní můžete používat své vlastní příkazy během testů Cypress.

Proč moje vlastní příkazy nefungují v Cypressu?

Pokud vaše vlastní příkazy v Cypressu nefungují, zkontrolujte následující:

  1. Ujistěte se, že jste své vlastní příkazy správně definovali v soubor podpory.
  2. Ověřte to soubor podpory je správně zařazena do vaši konfiguraci Cypress.
  3. Zkontrolujte, zda jakékoli syntaktické chyby nebo překlepy vlastní definice příkazů.

Jak mohu znovu vyzkoušet vlastní příkaz v Cypressu?

Chcete-li znovu vyzkoušet vlastní příkaz v Cypressu, můžete použít .retry() metoda. Zde je příklad:

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

To zopakuje vlastní příkaz až 3krát, pokud selže.

Jak mohu použít vlastní aserce v Cypressu?

Chcete-li použít vlastní tvrzení v Cypress je můžete definovat pomocí chai knihovna asercí. Zde je příklad:

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

Po definování můžete použít svůj vlastní tvrzení ve vašich cypřišových testech.

Jak mohu použít vlastní selektory v Cypress?

Chcete-li použít vlastní selektory v Cypress je můžete definovat pomocí cy.get() metoda. Zde je příklad:

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

Po definování můžete použít svůj vlastní selektory ve vašich cypřišových testech.

Jak mohu odladit své testy Cypress?

Chcete-li ladit své testy Cypress, můžete použít cy.debug() příkaz. Zde je příklad:

javascript
cy.customCommand().debug();

Tím se pozastaví provedení testu a otevřené ladicí konzole Cypress testovacího běžce.

Jak mohu zlepšit výkon svých testů Cypress?

Chcete-li zlepšit výkon z vašich cypřišových testů, můžete sledovat tyto osvědčené postupy:

  1. Použijte cy.wait() uvážlivě se vyhnout zbytečné průtahy.
  2. Minimalizovat použití of cy.get() A použití vlastní selektory kdykoli je to možné.
  3. Použití cy.intercept() příkaz k útržku nebo zesměšňování síťové požadavky.
  4. Spusťte testy bezhlavý režim (--headless) Pro rychlejší provedení.

Kde najdu dokumentaci pro Cypress?

Najdete oficiální dokumentaci pro Cypress at https://docs.cypress.io. Dokumentace poskytuje detailní informace o tom, jak používat Cypress, včetně průvodců, Reference APIa příklady.

Přejděte na začátek