V minulém článku jsme viděli, co je Cypress, jeho architektura, proces instalace a předpoklady potřebné pro instalaci. Než však začneme psát naše testy, musíme si nainstalovat Cypress. Klikněte zde získáte podrobné kroky k instalaci Cypressu.

Cypress Příklad

Tento článek bude diskutovat o Příklad cypřiše, příklady JSON, proměnné a aliasy a jak psát testovací případy. Pojďme tedy začít.

Obsah

Cypress JSON Příklad

Zpočátku, když jsme otevřeli náš Cypress Test Runner, a cypress.json je vytvořen konfigurační soubor. Máme tendenci ukládat úryvek, který poskytuje způsob implementace a uchování některých vlastností, které pomáhají v provádění programu nebo automatizačního kódu. Podobně má Cypress také soubor JSON pro ukládání všech hodnot, které dodáváme jako vlastnosti konfigurace.

Pojďme se na některé podívat příklady, které můžeme nakonfigurovat v našem Cypress JSON soubor.

Cypress již má přiřazené některé výchozí konfigurační hodnoty. Existuje několik možností, které můžeme přizpůsobit na základě našich požadavků. Například můžeme poskytnout baseURL majetek v našem cypress.json soubor. Takže pokaždé, když spustíme skript, nastaví se baseURL a spustí se.

Volba	Výchozí hodnoty	Popis
baseUrl	null	Tuto možnost lze použít jako a URL předpona pro cy.request () or cy.visit () příkazy.
watchForFileChanges	pravdivý	Tato možnost je ve výchozím nastavení nastavena na hodnotu true. Sleduje změny souborů a po provedení jakýchkoli úprav je restartuje.

Níže je snímek, který jsme upravili vlastnosti baseURL a watchForFileChanges v našem Cypress.json soubor.

Poznámka: O všech možnostech v Cypress Configuration budeme diskutovat později jako o samostatném tématu.

Otevřete Cypress

Dříve jsme viděli, jak vytvořit projekt Cypress. Zde uvidíme, jak otevřít a spustit běžec Cypress Test. Pojďme se tedy ponořit!

Pokud jste nainstalovali Cypress přes npm, pak byl nainstalován do adresáře ./node_modules. Můžeme tedy otevřít naše Cypress testovací běžec předáním příkazu npm z kořen našeho projektového adresáře.

Cypress můžeme otevřít jedním z následujících způsobů

1. zadáním příkazu úplná cesta

./node_modules/.bin/cypress open

2. pomocí zástupce pro zásobník npm

$(npm bin)/cypress open

3. pomocí npx

Zde je npx podporováno pouze s npm> v5.2, nebo jej můžeme nainstalovat samostatně.

npx cypress open

4. pomocí příze

yarn run cypress open

Nyní uvidíme, jak otevřít Cypress předáním příkazu plné cesty v našem terminálu.

1. Musíte předat příkaz uvedený výše v bodě 1 a v terminálu vidíte následující

2. Po chvíli můžeme vidět spuštění Cypress Test runner a budeme moci zobrazit Test Runner, jak je znázorněno níže. Po spuštění testovacího běžce byste mohli vidět některé ukázkové testovací případy. Společnost Cypress vytvořila v kořenovém adresáři projektu testovací složku, která nám pomáhá se základním nastavením a psaním testovacích případů.

Nyní se vraťme zpět k VS Code. Nejprve si můžete prohlédnout některé struktury složek, které se naplnily. Nyní pojďme rozebrat každou ze struktur složek a podívat se na ně podrobně.

Struktura složek v cypřiši

Jak vidíme, Cypress vytvořil strukturu složek v našem editoru kódu. Budeme o nich podrobně diskutovat.

Proměnné a aliasy

Promluvíme si o proměnných a aliasech v Cypressu podrobně.

Když rozumíme a učíme se Cypress, může být pro nás těžké pochopit Asynchronní API příroda v Cypřiši. Ale jak v budoucnu uvidíme mnoho příkladů, stalo by se z toho hračka. Mnoho moderních prohlížečů používá asynchronní API a dokonce i základní uzlové moduly jsou psány s asynchronním kódem. Asynchronní kód je navíc přítomen všude v kódu Javascript. Proto se podíváme na návratové hodnoty v Cypressu.

Vrátit hodnoty v cypřiši

Všechny příkazy Cypress jsou v pořadí  a  běh asynchronně. Proto jsme nemůže přiřadit ani pracovat s žádnými návratovými hodnotami všech příkazů Cypress. Uvidíme malý příklad toho samého.

const button = cy.get("login-btn");  //this command is to get the element with the button attribute

button.click()

Uzávěry

K atributům tlačítka nemůžeme přistupovat pomocí výše uvedeného příkazu. Místo toho můžeme příkazy Cypress získat pomocí .then (). Říkáme jim uzávěry.

.pak()

.then () vám pomůže získat přístup k vláknu získanému z předchozího příkazu. Pokud jste pochopili rodné sliby, je to stejné.. () () pracuje s Cypress. Můžeme také vnořit různé příkazy do .then (). Každý vnořený příkaz má přístup k předchozímu příkazu ve smyčce. Uvidíme to na příkladu.

cy.get('login').then(($btn) => {

  // store the button's text
  const buttonText = $btn.text()

  // we are comparing the two buttons' text
  // and ensuring they are different
  cy.get('login').should(($btn2) => {
    expect($btn2.text()).not.to.eq(buttonText)
  })
})

Použili jsme Uzávěry ve výše uvedeném příkladu, což nám umožňuje zachovat odkaz na předchozí příkaz ve smyčce.

Proměnné

Obvykle máme tendenci přiřazovat hodnotu proměnné. Ale v Cypressu to sotva používáme const, var, a let. Když používáme uzávěry, můžeme přistupovat k získaným objektům bez jejich přiřazení k proměnné.

Existují však některé případy, kdy můžeme deklarovat proměnnou, když změny stavu objektu (proměnlivé objekty). Například pokud požadujeme porovnání objektu s jeho předchozí hodnotou, deklarujeme je do proměnné, abychom jej mohli porovnat s další hodnotou. Podívejme se na příklad.

<button>increment</button>

You clicked button <span id="num">0</span> times

Zde se rozpětí s počtem 0 neustále zvyšuje pokaždé, když klikneme na tlačítko. Objekt tlačítka má tedy tendenci pokaždé měnit svůj stav.

Nyní se podívejme, jak to můžeme přiřadit k proměnné v našem kódu Cypress.

cy.get('#num').then(($span) => {
  // we are capturing the number by assigning it to a variable
  const num1 = parseFloat($span.text())

  cy.get('button')
    .click()  //we have clicked the button once
    .then(() => {
      // we are capturing the number again by assigning it to another variable
      const num2 = parseFloat($span.text())

      // we are ensuring that num1+1 is equal to num2
      expect(num2).to.eq(num1 + 1)
    })
})

Protože span mění svůj stav pokaždé, když klikneme na tlačítko, můžeme jej přiřadit k proměnné a porovnat její současný a předchozí stav. Pouze v případě proměnlivých objektů budeme vyžadovat proměnné a použití const je dobrý přístup.

Aliasy

Dříve jsme viděli, jaké proměnné a jejich omezení v Cypressu jsou. K překonání tohoto omezení přicházejí do hry Aliasy. Alias ​​je jedním z mocných konstruktů v Cypress. Podíváme se na to podrobně s příklady.

Aliasy vám obecně mohou pomoci pracovat jako proměnná. Existují však některé případy použití, kdy nám namísto proměnné může pomoci alias.

1. Opětovné použití prvků DOM

Můžeme alias DOM prvků a později k nim přistupovat pro opětovné použití. Aliasy také překonávají omezení .pak() příkaz.

2. Sdílení kontextu

V jednoduchém smyslu je kontext sdílení sdílení objektu mezi háčky a testy. Primárním případem použití pro sdílení kontextu je řešení cy.fixture - což je načtení pevné sady dat do souboru.

Jak získat přístup k aliasům?

Zde uvidíme, jak přistupovat k aliasům. Budeme používat .as() příkaz pro přiřazení prvku pro pozdější použití. Povinným parametrem je alias jméno. Název aliasu se používá jako reference v rámci a cy.get() or cy.wait() s použitím @ předpona.

Podíváme se na příklad přístupu k aliasům.

cy.get('#user_login').as('username')
cy.get('@username').type('abc@gmail.com')

V prvním řádku získáváme ID uživatele_login z DOM. Pak používáme .as() a deklarovat pomocí jména uživatelské jméno. Ve druhém řádku přistupujeme k našemu aliasu s @ symbol a provedení typ akce.

Cypress Test Příklad

Začneme psát náš první testovací případ s Cypress. Je to velmi jednoduché a snadné. Ale předtím se podíváme na konstrukty cypřišového testu.

Základní cypřišové konstrukty

Společnost Cypress přijala pro své testovací případy syntaxi Mocha a využívá všechny možnosti, které Mocha poskytuje. Níže jsou uvedeny základní konstrukce Cypress, které se běžně používají pro naše testovací případy.

• Popsat() - kombinuje všechny testovací případy do jednoho většího testu a seskupuje je dohromady. Trvá dva parametry - popis testu a funkce zpětného volání.
• to() - jednotlivé testovací případy zapisujeme do našeho bloku it (). Tento blok má také dva parametry - to, co dělá test, a druhým parametrem je funkce zpětného volání.
• po() - toto se provede po všech testech v souboru spec.
• afterEach () - to běží po každém jednotlivém testovacím případě.
• před() - běží před všemi testy v souboru spec.
• beforeEach () - provádí před každým jednotlivým testovacím případem.

Jak napsat testovací případ?

Než začneme, měli bychom vědět, co je testovací případ, napsat jej a jaké jsou kroky pro základní testovací případ.

1. Předpoklad - Stav aplikace, kterou budeme testovat.

2. Akce - Provedeme nějakou akci s aplikací.

3. Tvrzení - Prosazujeme nebo ověřujeme změněné chování týkající se našich akcí.

Budeme uvažovat LamdaGeeks aplikace pro naše příklady testů. Stejným postupem budeme uvažovat o automatizaci následujícího scénáře

1. Navštivte web https://lambdageeks.com/

2. Ověřte, zda je název Home - Lambda Geeks
Cypress používá cy jako jeho definice typu. Budeme připojovat cy příkaz k vyvolání libovolných metod.
Nejprve vytvořme nový soubor v našem editoru kódu.

1. Vytvořte novou složku s názvem Demonstrace pod integrační složkou.

2. Ve složce Demo vytvořte nový soubor sample.js. Do tohoto souboru zapíšeme náš první testovací případ.

Nyní začneme psát naše testovací případy!

1. 1. Nejprve navštívíme stránku pomocí návštěva() metoda v Cypress. Tento příkaz přejde na adresu URL, kterou poskytujeme. Zahrnieme je do bloku description () a it ().

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {
        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

2. Jakmile je aplikace otevřená, ověříme název pomocí get() metoda v Cypress .get() načte všechny selektory css z DOM.

K názvu přistupujeme pomocí title() Metoda a my tvrdíme, že používáme knihovnu Chai s příkazem by měl předáním prvního parametru jako rovného, ​​ve zkratce eq. Druhým parametrem je řetězec, který očekáváme.

 cy.title().should('eq','Home - Lambda Geeks')

Hurá! Ve dvou jednoduchých krocích jsme napsali náš případ Cypress Test.

Zde je kompletní kód našeho testovacího případu

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {

        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

        // validate the title
        cy.title().should('eq','Home - Lambda Geeks')
       
    });
});

Příklad přihlášení Cypress

Uvidíme příklady, jak automatizovat přihlašovací stránku pomocí Cypressu. Jak jsme viděli dříve, psaní testovacího případu v Cypressu je jednoduché. Nyní přejdeme k nastavení hodnot v textovém poli a tvrzení.

1. Navštěvujeme web https://demo.applitools.com/ pomocí cy.visit příkaz.

 cy.visit('https://demo.applitools.com/')

2. Zadejte uživatelské jméno do pole uživatelské jméno pomocí příkazu type. Uživatelské jméno budeme předávat jako řetězec v typu jako parametr.

 cy.get('#username').type('test123')

3. Podobně napíšeme stejný příkaz pro zadání hesla

 cy.get('#password').type('123')

4. Nyní klikneme na tlačítko pro přihlášení pomocí click() metoda v Cypress.

cy.get('#log-in').click();

5. Po přihlášení přistaneme na stránce aplikace. Tvrdíme tedy, že adresa URL má /app rozšíření pomocí .include() klíčové slovo v chai. První parametr by měl být klíčové slovo, které uplatňujeme, a druhý parametr je očekávaný výsledek.

cy.url().should('include', '/app')

V pěti jednoduchých krocích jsme napsali kompletní kód pro funkce přihlášení. Níže je uveden kompletní kód pro vaši referenci.

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("should login with username and password", function() {

        // visit the lambdageeks page
        cy.visit('https://demo.applitools.com/')

        cy.get('#username').type('test123')

        cy.get('#password').type('123')

        cy.get('#log-in').click();

        cy.url().should('include', '/app')

    });
});

Řešení běžných problémů při spouštění Cypress & FAQ

Při pokusu o spuštění Cypressu mohou nastat některé běžné problémy, kterým budeme čelit. Budeme diskutovat o některých běžných problémech.

1. Během příkazu Otevřít Cypress nelze najít příkaz „Cypress“

Jednou po instalaci bychom měli předat příkaz open cypress z kořene adresáře projektu. Například jste vytvořili projekt s názvem CypressProject; měli byste projít npm init příkazem přejděte do složky CypressProject. Můžete se pohybovat zadáním následujícího příkazu v terminálu

cd CypressProject

Jakmile jste v kořenovém adresáři projektu, předejte npm init příkaz ke stažení závislostí.

Někteří lidé se nyní snaží otevřít Cypress a pokusí se přejít na /node_modules a ./bin a poté předat příkaz cypřiš otevřít. Takto to však nefunguje. Místo toho tedy zadejte celý otevřený příkaz z kořene adresáře projektu a otevřete Cypress.

./node_modules/.bin/cypress open

Buďte také opatrní ohledně lomítka '/'. Vždy poskytnout toto '/' otevřete Cypress.

2. Cypřiš nelze načíst, protože běh skriptů je v tomto případě zakázán systém

Při instalaci Cypressu v systému Windows se někdy můžete setkat s výše uvedenou chybou. Je to proto, že kvůli bezpečnostní výjimce. Tuto chybu můžeme vyřešit předáním níže uvedeného příkazu v prostředí PowerShell.

Set-ExecutionPolicy RemoteSigned

Kroky pro reprodukci:

• Otevřete PowerShell
• Spusťte tento příkaz Set-ExecutionPolicy RemoteSigned
• typ Yes
• Nyní otevřete Cypress projetím ./node_modules/.bin/cypress open. Testovací běžec se nyní otevře.

Časté dotazy

1. Které operační systémy podporuje Cypress?

Cypress podporuje gumák, Windows, a Linux operační systémy.

2. Podporuje Cypress automatizaci v nativních mobilních aplikacích?

Cypress nebude moci běžet na nativní mobilní aplikaci vůbec. Ale můžeme testovat mobilní aplikace, které jsou napsány v prohlížeči, jako je Iconic Frameworks.

3. Zda Cypress podporuje pouze aplikace založené na Javascript?

Ne! Cypress může komunikovat s jakýmkoli webovým prohlížečem napsaným v jazycích, jako je Ruby on Rails, Node, PHP, C #. Ale budeme psát naše testy v Javascript. Jinak může Cypress komunikovat s jakýmkoli frontendem, backendem, jazykem a frameworkem.