Cypress

Cypress est un framework de test E2E Node.js.

Installation

Pour l'installer :

yarn add -D cypress

Utilisation

Pour ouvrir l'interface utilisateur :

npx cypress open

Démarrer les tests

npx cypress run

Démarrer un seul test :

npx cypress run -s <path>

Configuration

Créez un fichier cypress.json :

cat > cypress.json << EOF
{
    "fixturesFolder": false,
    "pluginsFile": "__tests__/integration/plugins.js",
    "integrationFolder": "__tests__/integration/",
    "testFiles": "*.spec.js",
    "supportFile": false,
    "screenshotOnRunFailure": false,
    "trashAssetsBeforeRuns": false,
    "video": false,
    "defaultCommandTimeout": 10000,
    "requestTimeout": 10000,
    "baseUrl": "http://localhost:3000",
    "chromeWebSecurity": false,
    "retries": {
        "runMode": 2,
        "openMode": 0
    }
}
EOF

Ajoutez si besoin les lignes suivantes dans votre fichier .eslintrc.json pour configurer Eslint :

{
    "plugins": [
        "cypress"
    ],
    "env": {
        "cypress/globals": true
    }
}

yarn add -D eslint-plugin-cypress

npm pkg set scripts.test:e2e="cypress run"

Ajouter des sélecteurs data-test

Pour faciliter la sélection de vos éléments HTML, ajoutez des sélecteurs data-test ou data-testid dans votre code.

Exemples :

<input type="text" data-test=login-username />
<input type="text" data-testid=login-username />

Supporter les variables d'environnement dotenv

Si vous souhaitez utiliser des variables d'environnements en provenance d'un fichier .env dans vos tests, installez la librairie suivante :

yarn add -D cypress-dotenv

Références :