logo

React E2E Testování je snadné pomocí Cypress a Jenkins

Co je End-To-End (E2E) testování?

Primárním cílem E2E Testing je otestovat aplikaci z pohledu uživatele. Aplikaci tedy považovat za černou skříňku – ignorovat vnitřní logiku a testovat pouze to, co vidí Uživatelé.

Nevýhody testování E2E

Chyba v E2E Test Suite znamená, že uživatel nemůže používat aplikaci tak, jak má. Problém je v tom, že nemůžeme přesně určit řádek kódu (LOC), který chybu způsobuje. Testování E2E tedy pomáhá při hledání významných chyb, ale nemůže pomoci při jejich ladění.

Na slavné testovací pyramidě lze vedle testů komponent a integrace nalézt testy E2E. Jako takové by nejprve měly být testy jednotky a integrace. Pomáhají včas zachytit chyby a ladit, čímž zvyšují tempo vývoje.

Výhody testování E2E

Testy E2E jsou napsány způsobem, který se podobá uživatelskému způsobu ovládání naší aplikace. Testy E2E jako takové poskytují naší Aplikaci velkou důvěru tím, že potvrzují, že klíčové funkce fungují tak, jak bylo zamýšleno z pohledu uživatele.

Kromě toho E2E testy v ideálním případě nespoléhají na detaily implementace, jako takové jsou robustnější a napsané způsobem, kdy je jejich oprava nebo aktualizace rychlá a snadná.

Praktický příklad

Nyní k té zábavné části:Kód!

Nejprve musíme nainstalovat Cypress 

npm install cypress --save-dev
or
yarn add cypress --dev

Poté můžeme v kořenovém adresáři vytvořit jednoduchý konfigurační soubor cypress.json 

{
    // specify the baseUrl from which we 
    // serve our applications in the test environment
    "baseUrl": "http://localhost:3000",

    // depends on project: allows accessing shadow dom without calling .shadow()
    "includeShadowDom": true,

    // optional: only necessary cypress component testing
    // not needed if all we do is e2e testing 
    "component": {
        "testFiles": "**/*.spec.{js,ts,jsx,tsx}",
        "componentFolder": "src"
    },
}

pokud je náš projekt napsán strojopisem, možná budeme chtít přidat tsconfig do podadresáře cypress, který rozšiřuje náš hlavní tsconfig

cypress/tsconfig.json

{
  "compilerOptions": { "types": ["cypress"] },
  "extends": "../tsconfig.json",
  "include": ["integration/*.ts", "support/*.ts", "../node_modules/cypress"]
}

Psaní testů

Poté, co jsme dokončili základní nastavení a instalaci, můžeme nyní začít psát testy. 

describe("Sample Test Suite", () => {
  beforeEach(() => {
    // intercept outgoing HTTP Requests by defining the endpoint and mocked response
    cy.intercept("GET", "/some_endpoint", {
      statusCode: 200,
      body: {"a":1},
    });
  });

  it("sample test", () => {
    // uses baseUrl defined in cypress.json configuration
    cy.visit("/landing-page");
    // access DOM Nodes via e.g. class, id, data-test-id
    // & interact with DOM
    cy.get('[data-test-id="add-button"]').click();
    cy.get(".some_class").should("exist");
  });
});

Ve výše uvedeném příkladu zachycujeme požadavky Http, které naše aplikace vytváří na koncovém bodu /some_endpoint. Proto zesměšňujeme backend a můžeme spouštět naše testy bez spuštění instance backendu.

Nyní můžeme spustit testy a zjistit, zda naše aplikace funguje tak, jak má. Za tímto účelem se můžeme rozhodnout jej spustit s uživatelským rozhraním a otevřít instanci chrome pro snazší ladění NEBO jej můžeme spustit bez hlavy, např. pro rychlý běh v CLI nebo jako integrovaný krok v našem CI Pipeline např. Jenkins, Azure Pipeline,...

Spusťte Cypress ve vývojářském prostředí

Chcete-li spustit Cypress pomocí uživatelského rozhraní a řízené instance Chrome, můžeme tento skript přidat do package.json 

"cy:open": "node_modules/.bin/cypress open",

přidání tohoto nám umožňuje snadno spustit uživatelské rozhraní cypřiše v terminálu 

npm run cy:open

Jenkinsova integrace

Abychom mohli Cypress integrovat do našeho Jenkins Pipeline, můžeme tyto skripty přidat do package.json 

"cy:run": "node_modules/.bin/cypress run",
"ci:e2e": "start-server-and-test start http://localhost:3000 cy:run"

Kromě toho musíme pro toto řešení nainstalovat start-server-and-test 

npm install --save-dev start-server-and-test

To zajistí, že náš server bude spuštěn předtím, než se pokusíme spustit naše testy E2E.

Nyní, když jsou všechny přípravy hotové, můžeme přidat krok do našeho Jenkinsfile. 

sh script: 'cd frontend; npm run ci:e2e'

Nyní, když se spustí Jenkins Build, uvidíme novou fázi v našem potrubí, která zobrazí zprávu o našich testech E2E.

Další informace a odstraňování problémů:

V závislosti na použitém obrazu Dockeru možná budeme muset nainstalovat další závislosti specifické pro OS. K tomu můžeme přidat krok DockerFile 

# Install cypress OS dependencies
RUN apt-get install -qy \
    libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4  \
    libnss3 libxss1 libasound2 libxtst6 xauth xvfb procps