Tester un site avec CodeceptJS

WordCamp MTL 2019

Présentation par Sariha

Sariha Chabert

Pourquoi tester un site ?

Eviter d'introduire de nouveaux bugs
Eviter les bugs de regression
Avoir une connaissance approfondie d'un site
Tranquilité d'esprit

- ne pas introduire de bugs lors de la mise en ligne
- éviter les regressions
- connaissance d'un site et de ses fonctionnalités
- tranquilité d'esprit / confiance
- gain de temps

La chasse aux bugs...

Les bugs du chef

le programmeur teste son code.

Pendant l'écriture du code
Tests en local, dans son environnement
Tester ce qui fonctionne
Instinctivement, oublis des cas qui ne marchent pas
Impossible de gerer tous les cas

Le chef des bugs

Le contrôle qualité

A la fin du projet (ou des phases)
En beta ou pre-prod
Tour complet du site
Teste les fonctionnalités "sensibles"
Difficile de gérer tous les cas

Le client trouve un bug

Le client teste ce qui est important (pour lui)
Le client trouve des cas inconnus
Il n'apprecie pas vraiment

Le bug en production

Les tests automatisés

Test unitaires
Tests fonctionnels / Acceptance / End-to-end

Quand coder les tests ?

Dès le début du projet
Au cours du développement
A chaque nouvelle fonctionnalité
Quand un bug est découvert

C'est difficile d'écrire tous les tests d'un coup.

ou ? : dans le repo git

Quand exécuter les tests ?

Au cours du développement
Lors des déploiements en beta
Aux retours du contrôle qualité
Avant et après la mise en production
Périodiquement

Multiplier les exécutions de tests grâce au déploiement continu

Choisir un outil de testing

Comment ça s'est passé chez nous ?

À tâton ..

Petite histoire de notre tambouille interne

Maître controleur qualité

Les tests sont faits manuellement à la fin d'un projet.

Mais..
Il est possible d'automatiser certaines tâches répétitives avec une extension pour les navigateurs !

Cool cool cool

- Rencontre CQ avec Eric Sicart
- Merci Eric Sicart
- Katalon recorder
- Selenium IDE
- Robot Framework

Nos besoins

Écriture des test faciles
Tester des fonctionnalités interactives
Exécution des tests en local
Exécution automatisée lors d'un push avec git

gatsby / react

Automatisation

Katalon recorder
Extension pour chrome, permet de génerer des suites de tests.

+ Robot Framework

*** Test Cases ***
  Login
	open  /fr/
	setViewportSize  1024    840
	click  xpath=//a[contains(text(),'Login')]
	type  id=login_user    sariha
	type  id=login_pass    CatCat
	click  id=button_connect
	Wait Until Page Contains  Vous êtes maintenant connecté!

- Rapide, fait avec pyhton
- Syntax peu commune
- Quelques soucis avec les selecteurs
- Prise en main pas facile
- Recorder inefficace
- difficile de rouler les script lors des depoiements..

CodeceptJS

+ puppeteer

- Javascript
- Roule avec nodeJS (facile pour nous)
- Images docker - Mais pas de recorder ?

Les autres

Cypress
CasperJS
Protractor
Nightwatch.js
TestCafe

CodeceptJS

Installation

Prérequis

Quelques notion de ligne de commande
NodeJS 8.9 ou plus

Installer codecpetJS & puppeteer

npm install codeceptjs puppeteer --save-dev

Initialiser le projet codeceptJS

npx codeceptjs init

Mon premier test..

npx codeceptjs gt

(Démo)

Fichier demo_test.js rouler les tests de démo

npx codeceptjs run demo_test.js

Rapports de tests

Retour de la ligne de commande
JSON / XML
Allure
Html : Mochawesome

Produire un rapport avec Allure

npx codeceptjs run --plugins allure

serve allure

allure serve output

Mochawesome

Conclusion

Faire des tests automatisés c'est pas si compliqué
C'est rassurant
On gagne du temps à moyen et long terme

Questions ?

la documentation se trouve sur codecept.io

slides ici : sariha.com/wordcamp

Merci !

Tester un site avec CodeceptJS WordCamp MTL 2019 Présentation par Sariha