cypress

# **Einführung**

Ich werde euch heute was über Cypress erzählen, also um genauer zu sein: werde ich erstmal erklären was cypress selbst ist,dann was es für verschiedene Tests gibt, die Vor und Nachteile von Cypress im Gegensatz zu anderen sprachen dann werde ich den syntax zeigen, die wichtigsten befehle und dann ein Beispiel, keine sorge es wird sehr leicht. und dann zuguter letzt die quellen und so weil ja, braucht man wohl.

# **Was ist Cypress**

also erstmal WAS ist cypress? ich denke die meisten haben noch nichts davon gehört und das ging mir bis vor kurzem auch noch so. also cypress ist ein end to end testing framework das auf javascript basiert. es ist open source und wird mit mocha für UI Testing benutzt. da es direkt im browser läuft ist es perfekt da es die selben sachen machen kann wie der enduser und noch mehr.

# **Was gibt es für Tests**

hab vorhin den begiff end to end testing und UI testing benutzt aber was genau ist das eigentlich und was gibt es sonst für tests? es gibt hier so eine schöne testpyramide,

ganz unten sehen wir das unittesting, das testet die funktionen direkt IM code. also rein um zu sehen ob die einzelnen funktionen so funktionieren wie sie es sollten.

dann gibt es das integration testing, das testet die logik untereinander, ob zum beispiel funktion a mit funktion b richtig funktioniert. die beiden tests testen direkt im code selbst und sind deswegen ziemlich nützlich wenn man schauen will ob die logik hinter allem so funktioniert wie sie es sollte.

dann gibt es ganz oben noch das E2E testing - auch end to end testing. Das testet eben nicht den code oder die logik sondern direkt  das fertige produkt - wie eine website. das testet dann das fertige produkt wie der enduser es tun würde und ist deswegen auch sehr nützlich, die beste logik bringt nichts wenn man in der oberfläche dann ein ganz anderes problem damit hat.

# **Vor- und nachteile von Cypress**

zurück zu cypress selbst. also was gibt es denn für vorteile von cypress im gegensatz zu all den anderen sprachen da draußen? also erstmal, ich hab die vorteile in 4 gruppen aufgeteilt, einmal alles was timing angeht, dann die handhabung, funktionen und die logik dahinter fangen wir direkt mal mit einem der hauptgründe an, dass viele cypress angenehm finden.

## **Positive Sachen**

### Timing

man hat keine Async Hölle da Cypress automatisch auf  veränderungen, ladezeiten etc wartet. selbes gilt auch wenn links oder buttons deaktiviert sind,

es wartet auch wenn ladeanimationen vorkommen.

### Handhabung

dann ist cypress viel konsistenter als andere sprachen, bei anderen sprachen kommt es öfter mal vor dass es aus irgendwelchen gründen random fehlschlagen. das hatte ich persönlich in cypress eigentlich erst 2 mal in mehreren tausenden tests.

cypress hat auch eine klar übersichtliche oberfläche wenn man headed testet. das läuft alles im browser (zeig ich später dann noch).

cypress speichert von jedem test einen snapshot, man kann also jederzeit zeitreisen und sogar sehen was vor und nach einer aktion passiert ist.

in der oberfläche ist es auch sehr sehr leicht css selektoren zu lokieren und finden. näheres dazu auch später

ausserdem supported es auch einige browser wie chrome, election, brave, Edge, firefox und deren varienten wie zb chrome canary

### Funktionen

eine super nützliche funktion ist forceclick, cypress kann keine links oder buttons klicken die von einem dropdown zb überdeckt sind oder unsichtbar sind. mit forceclick kann man diese dann aber doch klicken.

es kann netzwerkanfragen faken wenn man zb einen 404 code testen will oder custom elements haben will.

es kann genauso auch apis anpingen und antworten abfragen

da es direkt im browser funktionert kann es den DOM und cookies so manipulieren wie es will.

cypress ist ein wenig limitiert was bestimmte sachen angeht aber da es das jquery framework direkt eingebaut hat gibt es quasi keine limitationen. man kann von node package manager sehr viele pakete runterladen welche sehr nützlich sein können.

### Logik

wie vorhin genannt achtet es automatisch auf unsichtbaren und deaktivierte sachen.

es kümmert sich ausserdem auch automatisch um popups und klickt diese weg.

man kann auch hooks wie beforeEach benutzen.

ein großer vorteil ist auch dass man mit cypress component testing durchführen kann. das ist quasi ein mix aus unit und integration testing.

und aus diesen gründen ist cypress, wie man hier sieht auch topofthetop compared zu den anderen großen e2e testing apps.

## **Negative Sachen**

natürlich ist cypress nicht perfekt, ich habe allerdings nicht allzuviele nachteile gefunden,

### Timing

zu timing gibt es nicht allzuviel zu sagen, im gegensatz zu anderen sprachen ist es mit ein paar sekunden unterschied meistens die langsamste sprache.

bei allen e2e tests gibt es das problem dass es schwer ist die tests aufrechtzuerhalten, allein jetzt vor ein paar tagen als das neue dev portal kam musste ich einige tests umschreiben wegen neuem layout.

### Handhabung

Mobiles testen wird leider nicht supportet, man kann zwar die resolution von der testwebsite umstellen aber nicht wirklich mobiles testen.

cypress kann von dem testen videos erstellen die man im nachhinein ansehen kann, diese sind allerdings nicht empfohlen, hatte keine gute erfahrung mit ihnen und sie kosten nach einer weile was.

Es gibt keinen browser support für safari oder internet explorer.

ausserdem ist dateien hochladen ziemlich schwer und von dem was ich hörte nicht wirklich konsistent.

### Funktionen

man kann ausserdem nur einen browser gleichzeitig testen, wenn man mehrere browser testen will müsste man das danach machen.

der support für iframes ist auch limitiert, mit installierbaren pakete von npm ist es zwar besser aber trotzde, nicht nativ.

### Logik

es ist auch nicht möglich mehrere tabs oder childwindows zu testen, man kann das mit tabs und so zwar umgehen mit DOM manipulation aber ist umständlich.

Backend testung ist nicht unmöglich aber da wäre man mit einer eigenen sprache besser.

da es direkt im browser läuft kann es nur javascript selbst testen und keine externen sachen.

# **Wie sieht Cypress aus**

das war jetzt viel rumgerede, gehen wir jetzt zum syntax der sprache. er ist sehr sehr leicht verständlich, fangen wir mal an mit dem ersten code den man braucht.

## **Code**

das cy. am anfang steht immer da, damit sieht man dass es sich um cypress handelt, dann ein einfaches visit und in klammern die url wohin man will.

kommen wir zu dem wichtigsten aller commands, dem .get() command, wenn cypress sachen klicken oder überprüfen will weiß cypress natürlich nicht was es denn testen soll. deswegen fängt sogut wie jeder code mit cy.get an, in der klammer steht dann der css selektor wie zum beispiel textarea.

dann sagen wir wir haben mit cy.get einen button den wir klicken wollen, das machen wir einfach mit einem .click nach dem selektor. selbsterklärend was das macht.

dann sagen wir wir wollen nach etwas suchen in einem suchfeld, dann wieder cy.get und dann einfach .type und in der klammer das was wir schreiben wollen. da gehen natürlich auch variablen und so

sagen wir wir haben mehrere sachen gegeben und wollen schauen ob ein bestimmtes wort vorkommt, dann sagen wir cy.get und dann .should und in der klammer was es denn sollte da können sachen rein wie .should('be.visible') oder should('exist'). hier mit .should contain schauen wir ob der string "january" da irgendwo vorkommt.

das nächste wird am anfang bisschen verwirrend sein, es gibt nämlich auch einen einen .contains command, dieser checkt allerdings nicht ob es vorkommt sondern cycled durch die gegebenen sachen durch bis dieser string erreicht wird und klickt dann. (ja man kann die auch aufeinander reihen)

dann der letzte wirklich wichtige ist .eq, sagen wir wir haben 10 radio button und wollen den vierten klicken dann macht man .eq und dann eine drei in der klammer. die zahl in der klammer ist wie bei einem array, das erste ist null.

mit den paar kleinen codesnippets kann man schon extrem viel machen und man braucht eigentlich nur bei speziellen dingen kompliziertere sachen, als beispiel ist hier der code den ich geschrieben habe der automatisch den generierten permission code scannt und den generierten qr code scannt, in text umwandelt und schaut ob der permission code zu finden ist.

## **Wie führt man Cypress aus**

wie führt man denn jetzt eigentlich cypress code aus?

als erstes schreibt man npx cypress open in die konsole und dann öffnet sich die cypress software, wenn man e2e testing durchführen will klickt man einfach auf e2e testing,

dann wählt man einfach den browser aus denn man haben will. ich persönlich würde canary empfehlen und irgendwie hat firefox nie geklappt bei mir

ab jetzt ist alles im browser dann öffnet sich die wunderschöne übersicht mit allen verfügbaren tests die man im angegebenen verzeichnis hat. dann klickt man einfach eines von denen und es beginnt direkt

und hier sieht man wie so ein test aufgebaut ist, auf der rechten seite in dem fenster ist live die website die getestet wird und auf der linken seite die tests. die oben sind die die schon fertig sind, das in der mitte der aktuell laufende und darunter die kommenden. man sieht hier auch was passiert. als erstes .get, dann checkt es ob das diese zahl erhält und klickt dann darauf. der rest sind netzwerkcalls und kann man ignorieren

wie vorhin schon gesagt ist es sehr leicht die css Selektoren zu bekommen, man klickt einfach oben da auf die zielscheibe und hovert über ein objekt es wird markiert wie im Inspektor wenn man F12 klickt im Browser. dann wird der einzigartige css selektor schon mit dem cy.get oben angezeigt und das kann man easy copypasten

wir wollen das ganze in gitlab am besten als pipeline haben, die tests würde dann immer durchgeführt werden bevor man mergen kann, das sollte das manuelle testen das Lea durchführt möglichst ersetzen. wie das ganze dann noch funktioniert müssten wir mal schauen aber so in etwa würde das ganze dann aussehen

wenn etwas schiefläuft oder man die reports sehen will würde ich auch die screenshots und reports als artifacts automatisch uploaden lassen die man sich hier runterladen und ansehen kann.

# **Quellen**

genauuuu, dann noch die quellen, das sind die quellen die ich für die infos benutzt hab, das hab ich für das zoomen in der powerpoint angeschaut und das sind die leute die die powerpoint ansehen mussten und mir feedback gabten.

# **Dankeschön**

das war es dann mit der präsentation, danke fürs zuhören und gibt es noch fragen?