Augurken en komkommers onder de cipresboom

Wat is Cypres ?

Cypress is een open-source JavaScript-gebaseerd end-to-end testframework. Het is ontworpen om het proces van het testen van webapplicaties te vereenvoudigen en te stroomlijnen. Cypress biedt een alles-in-één testervaring door verschillende testfunctionaliteiten te combineren in één tool. Hier zijn enkele belangrijke kenmerken van Cypress:

• Browserautomatisering: met Cypress kunt u interacties en gedrag binnen de browser automatiseren. Het biedt een schone en intuïtieve API om gebruikersacties te simuleren, zoals het klikken op knoppen, het invullen van formulieren en het navigeren door pagina’s.

• Real-time herladen: Cypress biedt een unieke functie genaamd “Hot Reloading” die real-time herladen mogelijk maakt terwijl u wijzigingen aanbrengt in uw tests of applicatiecode. Het geeft directe feedback tijdens de testontwikkeling, waardoor het testproces efficiënter wordt.

• Tijdreizen en foutopsporing: met Cypress kunt u de testuitvoering op elk moment pauzeren en de status van de toepassing inspecteren. Het biedt een tijdreizende debugger waarmee u kunt zien wat er bij elke stap van uw test is gebeurd, waardoor foutopsporing en probleemoplossing eenvoudiger worden.

• Automatisch wachten en opnieuw proberen: Cypress wacht automatisch tot elementen op de pagina verschijnen voordat er interactie mee plaatsvindt. Het gaat op intelligente wijze om met asynchroon gedrag en voert automatische nieuwe pogingen uit, waardoor testfouten als gevolg van timingproblemen worden verminderd.

• Uitgebreide beweringenbibliotheek: Cypress bevat een ingebouwde beweringenbibliotheek die een breed scala aan beweringen biedt om het verwachte gedrag in uw tests te verifiëren. Het ondersteunt zowel synchrone als asynchrone beweringen, waardoor het eenvoudiger wordt om robuuste en betrouwbare tests te schrijven.

• Testrunner en dashboard: Cypress wordt geleverd met een testrunner die een duidelijk overzicht geeft van uw testsuite, inclusief teststatus, duur en foutdetails. Het biedt ook een cloudgebaseerd dashboard voor het vastleggen en organiseren van testresultaten, wat samenwerking en continue integratie mogelijk maakt.

• Netwerk- en XHR-controle: Met Cypress kunt u netwerkverzoeken van uw applicatie onderscheppen en controleren. U kunt antwoorden stoppen of nabootsen, verzoeken wijzigen en netwerkactiviteit observeren, waardoor API-interacties grondig kunnen worden getest.

Cypress is populair geworden onder ontwikkelaars vanwege het gebruiksgemak, de krachtige functies en de uitgebreide documentatie. Het biedt een ontwikkelaarsvriendelijke testervaring en heeft als doel veelvoorkomende pijnpunten die verband houden met traditionele testkaders te elimineren. Cypress wordt voornamelijk gebruikt voor end-to-end testen van webapplicaties, om ervoor te zorgen dat alle lagen van de applicatie samenwerken zoals verwacht.

Wat is Cucumber ?

Cucumber is een veelgebruikte open-sourcetool voor BDD-testen (Behaviour-Driven Development). Het biedt een raamwerk voor het schrijven en uitvoeren van geautomatiseerde tests in een voor mensen leesbaar formaat dat de samenwerking tussen technische en niet-technische belanghebbenden bevordert.

Komkommertests zijn geschreven met behulp van een taal met platte tekst, genaamd Gherkin, die een gestructureerde syntaxis gebruikt om het gedrag en de verwachte resultaten van een systeem in een natuurlijke taalstijl te beschrijven. Augurkscenario’s zijn geschreven in een “Given-When-Then”-indeling:

Gegeven: beschrijft de randvoorwaarden en begintoestand van het systeem.

Wanneer: specificeert de acties of gebeurtenissen die worden geactiveerd.

Dan: Definieert de verwachte uitkomsten of resultaten.

Komkommertests zijn georganiseerd in functiebestanden, die meerdere scenario’s bevatten die verschillende testgevallen vertegenwoordigen. Elk scenario in het functiebestand is gekoppeld aan een stapdefinitie, de code-implementatie die de stappen in het Gherkin-scenario toewijst aan de daadwerkelijke testlogica.

Door Cucumber te gebruiken, kunnen teams levende documentatie maken die het beoogde gedrag van het systeem beschrijft en dat gedrag automatisch valideert door middel van geautomatiseerde tests. Het helpt bij het bevorderen van communicatie, het stimuleren van ontwikkeling vanuit het perspectief van een gebruiker en het verbeteren van de onderhoudbaarheid en duidelijkheid van testsuites.

Integrate Cucumber with Cypress

Komkommer integreert mooi met Cypress. Hiermee kunt u schone, leesbare en consistente tests schrijven in het Gherkin-formaat.

Installeer om te beginnen de cypress-cucumber-preprocessor, die ondersteuning voor het gebruik van functiebestanden toevoegt aan Cypress:

npm install --save-dev cypress-cucumber-preprocessor

Eenmaal geïnstalleerd, moet u de Cypress-plug-in toevoegen aan uw plug-insbestand.
Het standaard Cypress-plug-inbestand bevindt zich in cypress/plugins/index.js, maar mogelijk gebruikt u een ander bestand (zoals gedefinieerd in uw cypress.json-bestand).

const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = (on, config) => {
  on('file:preprocessor', cucumber())
}

Vervolgens moet u ervoor zorgen dat Cypress uw functiebestanden oppikt.
Wijzig uw cypress.json-bestand:

{
  "testFiles": "**/*.feature"
}

Nu je Cucumber for Cypress hebt geïnstalleerd en geconfigureerd, kun je beginnen met het toevoegen van functiebestanden in cypress/integratie. Voorbeeld van een functiebestand:

Feature: Google Main Page

  I want to open Google

  @focus

  Scenario: Opening Google

    Given I open Google page

    Then I see "Google" in the title

Waarom TypeScript ?

TypeScript is een sterk getypeerde superset van JavaScript die verschillende voordelen biedt voor softwareontwikkelingsprojecten. Hier zijn enkele redenen waarom u zou kunnen overwegen om TypeScript te gebruiken:

• Typeveiligheid: TypeScript introduceert statisch typen in JavaScript, waardoor u typegerelateerde fouten tijdens de ontwikkeling kunt opsporen in plaats van tijdens runtime. Dit helpt bugs vroegtijdig te identificeren, verbetert de kwaliteit van de code en verbetert de algehele betrouwbaarheid en onderhoudbaarheid van de codebase.

• Verbeterde tooling en IntelliSense: TypeScript biedt betere tooling-ondersteuning, inclusief code-editors met intelligente automatische aanvulling, type-inferentie en code-navigatie. Dit resulteert in verbeterde productiviteit, omdat ontwikkelaars functies zoals IntelliSense kunnen gebruiken om direct feedback en hulp te krijgen tijdens het coderen.

• Schaalbaarheid en onderhoudbaarheid: met zijn statische typering en de mogelijkheid om expliciete typen te definiëren, maakt TypeScript het gemakkelijker om grootschalige codebases te begrijpen en te onderhouden. Het zorgt voor een betere organisatie van de code, vergemakkelijkt refactoring en maakt gemakkelijkere samenwerking mogelijk tussen teamleden die aan hetzelfde project werken.

• Codeleesbaarheid en documentatie: TypeScript’s optionele type-annotaties en zelfbeschrijvende aard verbeteren de leesbaarheid van code. Het dient als een vorm van documentatie, waardoor het voor ontwikkelaars gemakkelijker wordt om het bedoelde gedrag van functies, klassen en interfaces te begrijpen.

• Moderne JavaScript-functies: TypeScript ondersteunt de nieuwste ECMAScript-functies en stelt u in staat code te schrijven met behulp van moderne JavaScript-syntaxis. Het stelt u in staat om te profiteren van nieuwe taalfuncties en zorgt voor achterwaartse compatibiliteit met oudere JavaScript-omgevingen door middel van transpilatie.

• Sterk ecosysteem en community-ondersteuning: TypeScript heeft een levendige en actieve community die een breed scala aan bibliotheken, frameworks en tools biedt. Veel populaire JavaScript-frameworks zoals Angular, React en Vue.js hebben officiële TypeScript-ondersteuning en bieden verbeterde ontwikkelingservaringen en typeveiligheid.

• Betere samenwerking en codeconsistentie: het typesysteem van TypeScript bevordert de samenwerking tussen ontwikkelaars door typecontracten af ​​te dwingen. Het zorgt ervoor dat verschillende delen van de codebase correct samenwerken en vermindert potentiële integratieproblemen.

• Geleidelijke acceptatie: TypeScript is een superset van JavaScript, wat betekent dat bestaande JavaScript-code geleidelijk kan worden gemigreerd naar TypeScript. U kunt beginnen met het toevoegen van type-annotaties aan specifieke bestanden of componenten en stapsgewijs TypeScript gebruiken zonder de volledige codebase te herschrijven.

Samenvattend biedt TypeScript voordelen zoals verbeterde typeveiligheid, betere tooling, verbeterde schaalbaarheid en verbeterde codeleesbaarheid. Het stelt ontwikkelaars in staat om robuustere en onderhoudbare code te schrijven, terwijl ze gebruikmaken van moderne JavaScript-functies en profiteren van een sterk ecosysteem en community-ondersteuning.

Nu brengen we alles samen:

Het gebruik van Typescript met Cypress en Cucumber is vrij eenvoudig en verbetert de ontwikkelaarservaring aanzienlijk. Door Typescript te gebruiken, is je testcode schoner en minder foutgevoelig vanwege het extra typewerk.

U kunt ervoor kiezen om Typescript te gebruiken in combinatie met Webpack, in welk geval u een cypress/webpack.config.js-bestand moet maken:

module.exports = {
  resolve: {
    extensions: [".ts", ".js"]
  },
  node: { fs: "empty", child_process: "empty", readline: "empty" },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: "ts-loader"
          }
        ]
      },
      {
        test: /\.feature$/,
        use: [
          {
            loader: "cypress-cucumber-preprocessor/loader"
          }
        ]
      },
      {
        test: /\.features$/,
        use: [
          {
            loader: "cypress-cucumber-preprocessor/lib/featuresLoader"
          }
        ]
      }
    ]
  }
};

Webpack gebruikt de cipres-komkommer-preprocessor om Typescript om te zetten in gewoon Javascript, dat Cypress vervolgens zal gebruiken om uw tests uit te voeren.

Om deze eerste test uit te voeren, moet u deze opdracht uitvoeren in uw console:

Uw stapdefinitiebestanden kunnen nu ook Typescript gebruiken:

import { Given } from "cypress-cucumber-preprocessor/steps";

const localFunctionWithTypes = (a: number, b: number): number => a + b;

Given(/I pass/, () => {
  pass("hi there");
  console.log(localFunctionWithTypes(1,2) === 2)
});

Om deze TypeScript + Cucumber-test met Cypress uit te voeren, moet u deze opdracht in uw console uitvoeren:

cypress run --spec **/*.features