Obsah

• Co jsou příkazy Cypress?
• Příkazy interakce uživatelského rozhraní poskytované společností Cypress
• Příkaz Cypress klepněte pravým tlačítkem
• Příkaz Cypress Double Click
• Příkaz Cypress Click
• Příkaz Cypress Trigger
• Příkaz typu Cypress
• Cypress Vyberte příkaz
• Příkaz Cypress Check
• Příkaz Cypress Clear
• Jsou příkazy Cypress asynchronní?
• Cypress vlastní příkazy
• Chaining Assertion příkazy v Cypress
• Přepisování stávajících příkazů Cypress
• Řetězcové příkazy Cypress
• Rodičovský vlastní příkaz v Cypressu
• Vlastní příkaz dítěte v Cypressu
• Duální vlastní příkaz v Cypressu
• Cypress Custom Commands s příkladem
• Příkazy importu Cypress
• Cypress Custom Command IntelliSense

Co jsou příkazy Cypress?

Cypress nám poskytuje API a metody pro interakci s uživatelským rozhraním aplikace. Jsou známé jako Cypress Commands a pomáhají s interakcí webové aplikace. Všechny dostupné příkazy mají vestavěné metody a metody vyvoláme pouze v našich testovacích případech. Příkazy Cypress budou simulovat podobnou akci jako uživatel, který se pokouší provádět operace s aplikací.

Příkazy interakce uživatelského rozhraní poskytnuté společností Cypress

Cypress poskytuje různé příkazy, které interagují s uživatelským rozhraním. Podrobně se podíváme na seznam všech příkazů.

• .click ()
• .dblclick ()
• .klikněte pravým tlačítkem myši()
• .typ()
• .Průhledná()
• .šek()
• .uncheck ()
• .vybrat()
• .spoušť()

Příkaz Cypress Click

.click () - Tento příkaz je cvaknutí jakýkoli prvek v DOM.

Níže jsou uvedeny syntaxe pro příkaz kliknutí

.click() 

.click(options) 

.click(position) 

.click(position, options) 

.click(xCoordinate, yCoordinate) 

.click(xCoordinate, yCoordinate, options) 

Jak vidíte výše, kliknutí přijímá parametry jako možnosti, pozice, a souřadnic.

možnosti

Možné možnosti, které lze předat ke kliknutí, jsou

pozice

Různé typy pozic, které lze předat do .click (), jsou

• centrum (standardní)
• vlevo
• přesně
• AutoCruitment LLC („Společnost“ nebo „My“ nebo „AutoCruitment“) respektuje ochranu vašeho soukromí a je odhodlaná ho dodržováním těchto zásad chránit. Tyto zásady popisují typy informací, které můžeme shromažďovat od vás nebo které vy můžete poskytnout, když navštívíte webové stránky
• vlevo nahoře
• vpravo nahoře
• spodní
• vlevo dole
• dole vpravo

Příklad

cy.get('btn').click() //kliknutí na tlačítko cy.get('btn').click({ force: true }) //kliknutí na tlačítko předáním možnosti 'force' jako true cy. get('btn').click('bottomRight') // kliknutí na tlačítko v pravé dolní pozici cy.get('btn').click(10, 70, { force: true }) // kliknutí na tlačítko s hodnota pozice a síla true

Příkaz Cypress Double Click

Dvojitého kliknutí lze dosáhnout pomocí dblclick() syntaxe v Cypressu.

Syntax

.dblclick()
.dblclick(position)
.dblclick(x, y)
.dblclick(options)
.dblclick(position, options)
.dblclick(x, y, options)

možnosti

.dblclick() přijímá všechny možnosti, které jsou přijaty .click(). Možnosti najdete ve výše uvedené části.

pozice

Všechny možné polohy, které jsou specifikovány v .click() jsou také k dispozici pro dblclick(). Seznam pozic najdete ve výše uvedené části.

Příklad

cy.get('button').dblclick() // Dvakrát klikněte na tlačítko cy.focused().dblclick() // Dvakrát klikněte na prvek se zaměřením cy.contains('Home').dblclick() // Dvakrát klikněte klikněte na první prvek obsahující 'Home' cy.get('button').dblclick('top') // Dvakrát klikněte na tlačítko na horní pozici cy.get('button').dblclick(30, 10) // Dvakrát klikněte na souřadnice 30 a 10

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

Tento příkaz Cypress klikne pravým tlačítkem na prvek DOM .rightclick() příkaz neotevře kontextové nabídky prohlížeče.rightclick() slouží k testování zpracování událostí souvisejících s pravým kliknutím v aplikaci, jako je contextmenu.

Syntax

.rightclick()
.rightclick(position)
.rightclick(options)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)

možnosti

Jak jsme viděli výše, všechny možnosti, které jsou přijímány .click() příkaz lze konfigurovat pomocí .rightclick() také povel.

pozice

Všechny možné pozice, které lze předat do .rightclick() je stejný jako .click() zmíněno výše.

Příklad

cy.get('.welcome').rightclick() // Klikněte pravým tlačítkem na .welcome cy.focused().rightclick() // Klikněte pravým tlačítkem na prvek se zaměřením cy.contains('Leden').rightclick() / / Klikněte pravým tlačítkem na první prvek obsahující 'leden' cy.get('button').dblclick('topRight') // Dvakrát klikněte na tlačítko na pozici vpravo nahoře cy.get('button').dblclick(80, 20 ) // Dvakrát klikněte na souřadnice 80 a 20

Příkaz typu Cypress

.type() příkaz zadá hodnotu do prvku DOM.

Syntax

.type(text)
.type(text, options)

Argumenty

.type() přijímá řetězec jako argument. Hodnoty předány do .type() může obsahovat některou ze sekvencí speciálních znaků uvedených níže.

možnosti

Můžeme předat objekty jako možnosti pro úpravu výchozího chování .type()

Příklad

Podívejme se na příklady .type() příkaz

cy.get('textarea').type('Ahoj') // zadejte hodnotu do textové oblasti cy.get('body').type('{shift}') //povolí klávesu shift cy.get ('body').type('{rightarrow}') //typ události šipka vpravo 

Příkaz Cypress Clear

Příkaz Vymazat vymaže hodnoty ve vstupní oblasti nebo v textovém poli.

Syntax

Syntaxe příkazu clear je následující.

.clear()
.clear(options)

možnosti

Podíváme se na možnosti, které lze předat do .clear() příkaz.

Příklad

Podívejme se na příklady jasného příkazu

cy.get('[type="text"]').clear() // Vymazat vstup typu text cy.get('textarea').type('Vítejte!').clear() // Vymazat textovou oblast cy .focused().clear() // Vymazání zaměřeného vstupu/textové oblasti

Příkaz Cypress Check

Příkaz check zkontroluje nebo jednodušeji zaškrtne zaškrtávací políčka nebo přepínače. Zrušení zaškrtnutí políček nebo přepínačů můžete zrušit pomocí .uncheck() příkaz.

Syntax

Porozumíme syntaxi příkazu check v Cypressu.

//Syntax for check command
.check()
.check(value)
.check(options)
.check(values, options)

//Syntax for uncheck command
.uncheck()
.uncheck(value)
.uncheck(options)
.uncheck(values, options)

možnosti

Možné možnosti, které lze předat příkazům ke kontrole/odškrtnutí, jsou stejné jako výše uvedený příkaz clear

Příklad

Podíváme se na příklad, jak můžeme použít příkazy check a uncheck.

cy.get('[type="checkbox"]').check() // Zaškrtávací políčko prvku cy.get('[type="radio"]').first().check() // Kontrola prvního rádia element cy.get('[type="radio"]').check('Male') //Zkontrolujte rádiový prvek, který obsahuje Male cy.get('[type="checkbox"]').uncheck() / /Zrušte zaškrtnutí políčka prvek cy.get('[type="radio"]').uncheck() //Zrušte zaškrtnutí prvního prvku rádia cy.get('[type="checkbox"]').uncheck('Snídaně') // Zrušte zaškrtnutí prvku snídaně

Cypress Vyberte příkaz

Příkaz select Cypress vám umožňuje vybrat prvky v a štítek.

Syntax

Následuje syntaxe příkazu select

.select(value)
.select(values)
.select(value, options)
.select(values, options)

možnosti

Můžeme předat možnosti upravit výchozí chování příkazu select.

Příklad

Podívejme se na příklady příkazu select

cy.get('select').select('butterfly') // Vyberte možnost 'butterfly' cy.get('select').select(0) // vybere prvek s indexem 0 cy.get('select ').select(['parrot', 'peacock']) //vybere možnost papoušek a páv

Příkaz Cypress Trigger

Příkaz Trigger pomáhá spustit jakoukoli událost na prvku.

Syntax

Podíváme se na syntaxi pro přístup k spouštěcímu příkazu

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, options)
.trigger(eventName, x, y, options)

Volba

Příkaz Trigger přijímá všechny možnosti, které jsou uvedeny pro .clear() příkaz. Kromě toho existuje několik možností, které můžeme konfigurovat, které jsou uvedeny níže.

Příklad

Pojďme si představit různé způsoby použití .trigger() v kódu.

cy.get('a').trigger('mouseover') // Spuštění události přejetí myší na odkazu cy.get('.target').trigger('mousedown', { button: 0 }) //spuštění myši při button 0 cy.get('button').trigger('mouseup', topRight, { bubbles: false }) //mouseup spuštěn na pozici topRight s nastavením bubliny jako false

Jsou příkazy Cypress asynchronní?

Všechny příkazy Cypress jsou asynchronní. Jsou zařazeny do fronty k provedení v pozdějším časovém okamžiku a nebudou čekat na dokončení příkazů. Příkaz Cypress v době jejich vyvolání nedělá nic, místo toho jej ukládá pro pozdější provedení. Můžete pochopit asynchronní chování Cypressu zde

Řetězcové příkazy Cypress

V Cypressu můžeme použít řadu příkazů k interakci s prvky v DOM. Je nutné pochopit, jak zřetězení příkazů funguje interně. Pokud řetězíme příkazy v určitém řádku, pak Cypress zvládne příslib založený na řetězci příkazů a poskytne příkaz na základě předmětu dalšího příkazu, dokud řetězec příkazů neskončí nebo nedojde k chybě.

Cypress nám umožňuje kliknout na prvek nebo psát do prvků pomocí .click() or .type() získávání prvků pomocí cy.get() or cy.contains(). Podívejme se na jednoduchý příklad řetězení příkazů

cy.get('textarea').type('Jak se máš?')

Ve výše uvedeném příkladu cy.get() je jeden příkaz Cypress a .type() je další příkaz, kde řetězíme řetězec .type() příkaz na cy.get() příkaz, který mu řekne, aby zadal předmět, který pochází z cy.get() živel. Podobně můžeme zřetězit všechny příkazy, o kterých jsme diskutovali výše.

Řetězení příkazů tvrzení v Cypressu

Podobně jako při řetězení více příkazů pomocí Cypressu můžeme také řetězit tvrzení pomocí příkazů. Tvrzení jsou příkazy, které vám umožňují popsat očekávaný stav nebo chování aplikace. Cypress počká, až prvky dosáhnou očekávaného stavu, a test neprojde, pokud tvrzení neprojdou. Uvidíme, jak můžeme použít řetězové příkazy při prosazování prvku.

cy.get('button').should('be.disabled') //očekávejte, zda má být tlačítko deaktivováno cy.get('form').should('have.class', 'form-vertical') / /očekávejte, zda by formulář měl mít třídu jako 'form-vertical' cy.get('input').should('not.have.value', 'Name') // potvrdit, zda by vstup neměl mít hodnotu 'Name '

Jak je uvedeno výše, používáme cy.get() příkaz a řetězení s .should() příkaz asertion, který očekává chování založené na výsledku. Tímto způsobem můžeme použít řetěz příkazy aserce v Cypressu.

Cypress vlastní příkazy

Cypress nám poskytuje API k vytváření příkazů na základě našich požadavků. Vlastní příkaz Cypress je podobný výchozím příkazům, které již existovaly, kromě toho, že je uživatelem definované. Díky vlastním příkazům si můžeme s příkazy pohrát a zřetězit je podle případu použití. Vlastní příkazy Cypressu jsou užitečné v našem pracovním postupu, pokud je potřebujete v testech používat znovu a znovu.

Podívejme se na syntaxi pro vytvoření nového vlastního příkazu v Cypressu.

Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)

kde argumenty jsou následující

název - Název příkazu v řetězci, který chceme přidat nebo přepsat

zpětné voláníFn - Tato funkce přebírá argument předaný příkazu

možnosti - Předáním libovolného objektu voleb definujte chování příkazu

Poznámka : možnosti jsou podporovány pouze pro příkazy pro přidání a nepodporují příkazy k přepsání

Možnosti, které prevSubject přijímá, jsou následující

• false - ignorovat předchozí předměty (rodičovský příkaz)
• true - přijmout předchozí předměty (podřízený příkaz)
• optional - zadejte, zda chcete zahájit nový řetězec nebo použít existující řetězec (duální příkaz)

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

Uvidíme, jak do Cypressu přidat nadřazený vlastní příkaz. Nadřazený příkaz vždy zahájí nový řetězec příkazů, přestože jste předchozí příkaz zřetězili. Dříve zřetězený příkaz bude ignorován a nový příkaz bude zřetězen vždy. Některé nadřazené příkazy jsou cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()

Příklad

Uvidíme příklad, jak v Cypressu napsat nadřazený vlastní příkaz

Cypress.Commands.add('clickLink', (label) => { cy.get('a').contains(label).click() }) //kliknutí na odkaz "Koupit nyní" cy.clickLink('Koupit Nyní')

Ve výše uvedeném příkladu 'klikněte na odkaz'je název našeho vlastního příkazu.' Bude vyhledávat štítek. V řádku 2 příkaz dostane 'a'a vyhledejte odkaz obsahující štítek a klikněte na prvek. cy.clickLink() provede akci v testovacím souboru a klikne na „Kup nyní" odkaz.

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

Podřízené vlastní příkazy v Cypressu jsou zřetězeny z rodičovského příkazu nebo jiného podřízeného příkazu. Předmět z předchozího příkazu bude vrácen funkci zpětného volání.

Některé z příkazů Cypress, které lze řetězit jako podřízený příkaz, jsou .click(), .trigger(), .should(), .find(), .as()

Příklad

Podíváme se na příklad, jak zřetězit podřízený vlastní příkaz

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (předmět, možnosti) => { // zabalte existující předmět a něco s ním udělejte cy.wrap(subject).click({force:true }) }) //přístup k forceClick v testovacím souboru cy.get("[data-test='panel-VALUES']").forceClick();

Ve výše uvedeném příkladu pojmenujeme náš vlastní příkaz jako 'forceClick'. Předáváme argument prevSubject prvku a zabalujeme stávající předmět. S cy.wrap(), nutně klikáme na předmět. Potom v testovacím souboru přistupujeme k vlastnímu příkazu 'forceClick' na cy.get() příkaz.

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

Duální vlastní příkazy jsou hybridní mezi rodičovským a podřízeným příkazem. Můžete začít nový řetězec příkazů nebo řetězec zrušit stávající příkaz. Duální příkazy jsou užitečné, pokud chceme, aby náš příkaz fungoval různými způsoby se stávajícím předmětem nebo bez něj.

Některé z příkazů, které lze použít pro duální příkazy, jsou cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()

Příklad

Podívejme se na příklad, jak používat duální vlastní příkazy

Cypress.Commands.add('getButton', { prevSubject: 'nepovinné' }, (předmět) => { if (předmět) { cy.get(předmět).get('btn').its('tlačítko'); } else { cy.get('btn').its('button'); } })

V některých případech budeme požadovat získání tlačítka textu pomocí getButton, které získá všechna tlačítka prvku. Nyní můžeme použít getButton k řetězení s nadřazeným prvkem nebo zřetězit podřízený prvek, kde může vyvolat prvky nadřazeného.

Vzhledem k tomu, prevSubject je volitelný, můžeme předmět buď předat jako argument, nebo vyvolat příkaz bez předmětu v testovacím souboru, jak je uvedeno níže

cy.getButton() // bez předmětu cy.get('#loginBtn').getButton() // s předmětem

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

Můžeme přepsat již existující příkazy Cypress a upravit chování, abychom se vyhnuli vytváření dalšího příkazu, který se na konci pokusí použít původní příkaz.

Některé z původních příkazů Cypress, které lze přepsat, jsou cy.visit(), cy.type(), cy.screenshot(), cy.contains()

Příklad

Podívejme se na příklad, jak můžeme přepsat stávající Cypřiš příkaz.

Cypress.Commands.overwrite('contains', (originalFn, subject, filter, text, options = {}) => { // určení, zda byl předán argument filtru if (typeof text === 'object') { options = text text = filtr filtr = nedefinováno } options.matchCase = false return originalFn(předmět, filtr, text, možnosti) } )

Jak jsme viděli výše, používáme Cypress.Commands.overwrite upravit stávající příkaz Cypress. Náš vlastní příkaz pojmenujeme jako contains a předáváme argumenty k určení, zda argument filtru prošel.

Příkazy importu Cypress

V této části pochopíme, jak importovat příkazy Cypress.

Vlastní příkazy Cypress musíme vytvořit v souboru cypress/support/commands.js soubor. Vlastní příkazy přidáme do souboru command.js a importujeme do našeho souboru testovacích případů, abychom jej mohli použít.

Cypress Custom Commands s příkladem

Budeme rozumět tomu, jak vytvořit vlastní příkaz a použít jej v našem souboru specifikací s příkladem v reálném čase.

Jak jsme viděli výše, musíme přidat nové vlastní příkazy pod commands.js soubor. V tomto souboru přidejme vlastní příkaz pro přihlašovací funkci

Cypress.Commands.add("login", (uživatelské jméno, heslo) => { //přidání nového příkazu s názvem login cy.get('[id=Email]').clear(); cy.get('[id =E-mail]').type(uživatelské jméno); cy.get('[id=Heslo]').clear(); cy.get('[id=Password]').type(heslo); cy.get( '[type=submit]').click(); });

Ve výše uvedeném kódu pojmenujeme náš vlastní příkaz jako přihlásit se. Do vlastního příkazu jsme přidali kroky vymazání pole uživatelského jména a zadání hodnoty do textového pole. Podobně vymažeme pole a přidáme heslo do pole pro heslo. Později klikneme na tlačítko Odeslat. Jedná se o jednoduchý vlastní příkaz, který přijímá dva argumenty: uživatelské jméno a heslo. Hodnotu uživatelského jména a hesla předáme v našem souboru specifikací.

Nyní vytvořme soubor s názvem s názvem customCommand.spec.js ve složce integrace. Náš soubor specifikací bude obsahovat následující kód

description("Příklad vlastních příkazů", () => { it("měli byste se přihlásit pomocí vlastních příkazů", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .přihlásit se("[chráněno e-mailem]", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Jak jsme viděli výše, přistupujeme k našemu vlastnímu příkazu jako cy.login() , kde předáváme hodnoty uživatelského jména a hesla.

Cypress Vlastní příkazy IntelliSense

IntelliSense poskytuje inteligentní návrhy kódů v IDE nebo editoru kódu přímo při psaní testů. Pomáhá zobrazením vyskakovacího okna, které zobrazuje definici příkazu, odkaz na stránku dokumentace a příklady kódu. Pokud používáme jakýkoli moderní editor kódu, jako je Visual Studio Code nebo IntellJ, pak bude IntelliSense velmi užitečné.

IntelliSense používá k pochopení a zobrazení syntaxe strojopis. Pokud píšeme vlastní příkazy a poskytujeme definice strojopisu pro vlastní příkazy, můžeme k zobrazení technologie IntelliSense použít trojitá lomítka, i když náš projekt používá pouze JavaScript.

Ke konfiguraci IntelliSense musíme popsat kód v cypřiš/podpora/index.d.ts soubor.

// definice typů pro objekt Cypress "cy" /// deklarovat jmenný prostor Cypress { rozhraní zřetězené { /** * Přihlášení pomocí přihlašovacích údajů * @example * cy.login(uživatelské jméno,heslo) */ login(uživatelské jméno: Řetězec, heslo: Řetězec): Zřetězené } }

Nyní bychom měli nechat naše soubory se specifikacemi vědět, že v souboru jsou některé definice strojopisu index.d.ts soubor. Na začátku našeho souboru specifikací tedy přidejte níže uvedený kód, aby nám IntelliSense mohl poskytovat návrhy.

// definice typů pro vlastní příkazy jako "login" // se vyřeší jako "cypress/support/index.d.ts" //

Jak jsme viděli výše, IntelliSense nám poskytuje argumentaci, kterou jsme uvedli v našem souboru command.js, a pomáhá s automatickým dokončováním.

Aishwarya Lakshmi

Ahoj…Jsem Aishwarya Lakshmi, dokončil jsem B.Tech a mám téměř 2 roky zkušeností v oblasti testování. Jsem testovací nadšenec a nadšený pro testování a rád objevuji nové věci ve svém oboru a sdílím je se svými vrstevníky. Baví mě psát blogy ve svém volném čase tím nejjednodušším, ale efektivním způsobem. Jako tester mám rád věci k dokonalosti, takže svým čtenářům přeji, aby technologii dokonale rozuměli. Neustále se aktualizuji o nových technologiích souvisejících s testováním a trávím čas jejich pochopením. Jsem rád, že mohu studentům pomoci porozumět pojmům v testování.