Nous discuterons de la structure JSON, des exemples et de l'expérience pratique détaillée pour écrire JSON dans notre code. Mais, tout d'abord, plongeons-nous dans notre article !

Qu'est-ce que Cypress Json : exemple, schéma, analyse pratique détaillée

Dans notre précédent article, nous avons discuté des variables et des alias et de la façon d'écrire notre premier cas de test. Maintenant, nous allons discuter de Cypress JSON et de la façon de l'intégrer dans notre code.

Table des matières

• Fichier JSON Cypress
• Options JSON par défaut
• Options globales
• Délai d'expiration JSON de Cypress
• Cypress Lire le fichier JSON
• Options de capture d'écran et de vidéo
• Fenêtre et actionnabilité
• Exemple de Cypress JSON
• Tableau JSON Cypress Fixture
• Cyprès env JSON
• Cyprès JSON Reporter
• Cypress package-lock.json

Fichier JSON Cypress

Comme nous l'avons vu précédemment, la première fois que nous ouvrons notre Cypress Test Runner, cela crée un cyprès.json fichier. Ce fichier est utilisé pour transmettre toutes les valeurs de configuration dont nous avons besoin. Alors d'abord, nous examinerons les options que nous pouvons passer dans notre cypress.json fichier.

Options JSON par défaut

Certaines options sont définies par défaut dans Cypress. Cependant, nous pouvons les personnaliser en fonction de notre projet. Pour identifier les valeurs par défaut définies par Cypress, accédez au Paramètres dossier dans notre Cypress Test Runner. À partir de là, développez l'option Configuration pour afficher les options par défaut définies par Cypress.

Les options sont les configurations par défaut fournies par Cypress.

{
animationDistanceThreshold:5
baseUrl:null
blockHosts:null
browsers:Chrome, Firefox, Electron
chromeWebSecurity:true
component:{}
componentFolder:"cypress/component"
defaultCommandTimeout:4000
downloadsFolder:"cypress/downloads"
e2e:{}
env:null
execTimeout:60000
experimentalFetchPolyfill:false
experimentalInteractiveRunEvents:false
experimentalSourceRewriting:false
experimentalStudio:false
fileServerFolder:""
firefoxGcInterval:runMode, openMode
fixturesFolder:"cypress/fixtures"
hosts:null
ignoreTestFiles:".hot-update.js" includeShadowDom:false integrationFolder:"cypress/integration" modifyObstructiveCode:true nodeVersion:"default" numTestsKeptInMemory:50 pageLoadTimeout:60000 pluginsFile:"cypress/plugins" port:null projectId:"hpcsem" redirectionLimit:20 reporter:"spec" reporterOptions:null requestTimeout:5000 responseTimeout:30000 retries:runMode, openMode screenshotOnRunFailure:true screenshotsFolder:"cypress/screenshots" scrollBehavior:"top" supportFile:"cypress/support" taskTimeout:60000 testFiles:"/.*"
trashAssetsBeforeRuns:true
userAgent:null
video:true
videoCompression:32
videosFolder:"cypress/videos"
videoUploadOnPasses:true
viewportHeight:660
viewportWidth:1000
waitForAnimations:true
watchForFileChanges:true
}

Options

Nous pouvons modifier les options par défaut de Cypress en passant tous les arguments compatibles avec notre projet. Comme son nom l'indique, cypress.json est un fichier JSON, nous devons donc passer nos arguments au format JSON. Dans notre code VS, vous pouvez voir que le cypress.json est vide sans aucun argument qui lui est transmis. Voyons maintenant les différentes options que nous pouvons passer dans notre fichier JSON.

Options globales

Nous pouvons passer les options globales aux arguments qui doivent être accessibles globalement. Par exemple, dans le tableau ci-dessous, la colonne Options représente le mot-clé que nous allons passer dans notre fichier JSON ; Default indique la valeur par défaut de l'option particulière définie par Cypress, et Description indique la signification de l'option.

Délai d'expiration JSON de Cypress

Le délai d'attente est l'un des concepts les plus importants de tout cadre d'automatisation. Cypress fournit une variété d'options qui aident à gérer les délais d'attente dans nos scripts. Tout d'abord, nous examinerons les options que nous pouvons configurer.

Cypress Lire le fichier JSON

Parfois, nous aurons besoin d'interagir avec les dossiers ou les fichiers de notre projet. Pour interagir, nous devons définir certaines options dans notre cypress.json fichier pour manipuler les fichiers. Alors, tout d'abord, examinons les options disponibles dans notre configuration de dossiers/fichiers.

Captures d'écran et options vidéo

Nous pouvons configurer nos instantanés et vidéos dans notre fichier cypress.json(), et Cypress nous fournit quelques options pour personnaliser notre configuration.

Fenêtre et actionnabilité

Vous pouvez configurer et transmettre des valeurs pour modifier la hauteur et la largeur de la fenêtre avec les options fournies par Cypress. Les options d'action peuvent également être configurées.

Exemple de Cypress JSON

Tout à l'heure, nous avons vu les différentes configurations que nous pouvons passer dans notre cypress.json fichier. Maintenant, nous allons examiner un exemple de la façon de les utiliser dans notre projet.

Remplacement des valeurs par défaut dans le fichier cypress.json

Dans notre code VS, ouvrez le cypress.json fichier. Nous remplacerons le defaultCommandTimeout commande à 8000.

{
    "defaultCommandTimeout" : 8000
}

Voici à quoi cela ressemble dans notre projet de code VS.

En changeant le cypress.json fichier, il s'applique à l'ensemble du cadre. Nous pouvons vérifier en accédant à nos paramètres Cypress. Il est passé d'une valeur par défaut de 4000 à 8000

Remplacement des valeurs par défaut via le script de test

Nous pouvons également manipuler les valeurs par défaut via notre script de test. Au lieu de passer dans le cypress.json fichier, nous le passerons dans notre fichier de test.

//Changing the timeout from 4 seconds to 8 seconds
Cypress.config('defaultCommandTimeout',8000)

// Test code
cy.get('#username').type(users.email)
cy.get('#pswd').type(users.password)
cy.get('#login_btn').click()

De cette façon, nous pouvons remplacer les valeurs par défaut dans notre fichier de test. Cependant, cela n'a aucun impact sur les modifications de configuration au niveau du framework. Cypress privilégie les valeurs en cypress.json. Enfin, il reprend les configurations globales.

Tableau JSON Cypress Fixture

Cyprès cy.fixture() est une fonction qui charge un ensemble fixe de données dans un fichier. Nous pouvons utiliser l'appareil en tant que JSON pour charger n'importe quelle valeur ou tableau dans le fichier JSON. Tout d'abord, comprenons comment accéder au fichier JSON dans notre projet.

Mon fichier JSON a deux propriétés : nom d'utilisateur et mot de passe. Mon nom de fichier JSON est examples.json.

{
"email": "[email protected]",
"password" : test123
}

Dans notre fichier spec, nous accéderons à notre fixture avec la commande cy.fixture() et le concept de alias.

 cy.fixture('example.json').as('example')

 //Using the alias name to this keyword, So we can use globally  
        const userObj = this.userData
//looping our .json data with a new variable users
         cy.get(userData).each((users) => 
         {
              //Write the test code.
        cy.get('#username').type(users.email)
        cy.get('#pswd').type(users.password)
          }       

Cyprès env JSON

Les variables d'environnement sont utilisées dans de nombreux projets dans les organisations. Nous utilisons des variables d'environnement

• lorsque les valeurs sont dynamiques sur différentes machines
• lorsque nous voulons tester sous différents environnements tels que la mise en scène, les tests, le développement, la production/live

Ces cas nous obligent à définir des variables d'environnement. Cependant, si nous définissons une variable env dans un fichier de spécification, elle n'est pas reflétée dans les autres fichiers de spécification. C'est parce que Cypress exécute chaque fichier de spécifications indépendamment. De cette façon, nous devrons configurer les variables env séparément.

Nous accédons à nos fichiers d'environnement à partir de notre fichier Cypress JSON, c'est-à-dire, cypress.json fichier. Nous devrons donc attribuer l'option dans notre cypress.json fichier et l'a utilisé dans notre fichier de spécifications. Alors plongeons-nous dans notre exemple.

Nous pouvons définir nos variables d'environnement dans notre fichier de configuration ou cypress.env.json fichier.

Définition de la variable d'environnement dans le fichier cypress.json

Nous définissons la propriété env par une paire clé-valeur. Toutes les valeurs passées sous le mot-clé env relèvent des variables d'environnement, et Cypress prend l'argument de la env mot-clé. La syntaxe ressemble à celle ci-dessous.

{
  "env": {
    "key1": "value1",
    "key2": "value2"
  }
}

Si nous voulons accéder au env variable dans notre fichier de spécifications, nous les attribuons comme mentionné ci-dessous.

Cypress.env() //returns both the key1,value1 and key2, value2

Cypress.env(key1) //returns only the value1

Nous ajouterons le env configuration dans notre projet et y accédera dans notre fichier de spécifications. Dans notre cypress.json fichier, ajoutez la configuration suivante. Nous fixons notre URL propriété et en les affectant à notre URL. Ici, URL est la clé, et https://techiescience.com/technology/ est la valeur.

{
  "env" : {
      "url" : "https://techiescience.com/technology/"
    }
}

Comme nous avons déclaré la configuration, nous y accéderons dans notre fichier de spécifications. Cela ressemble à quelque chose comme ci-dessous. Comme mentionné ci-dessus, nous utiliserons Cypress.env() méthode pour accéder à la variable env.

// type definitions for Cypress object "cy"
// <reference types="cypress" />

describe('Cypress Example ', function () {

    it('accessing the environment variable', function () {

        //Calling URL from cypress.json
        cy.visit(Cypress.env('url'));

    })
})

Définition de la variable d'environnement dans le fichier cypress.env.json

Nous pouvons affecter notre variable d'environnement dans notre fichier JSON cypress env. Pour cela, nous devons créer un nouveau fichier appelé cypress.env.json à la racine du projet. Nous n'exigerons pas le env mot-clé; à la place, nous pouvons y accéder directement en passant la paire clé-valeur.

{
    "key1": "value1",
    "key2": "value2"
}

Voyons comment les affecter dans notre cypress.env.json fichier.

{
    "url" : "https://techiescience.com/",
    "urlTechnology" : "https://techiescience.com/technology/"
}

Comme vous le voyez ci-dessus, nous avons créé un nouveau fichier, cypress.env.json, et a ajouté notre URL Propriétés. La manière d'accéder aux variables d'environnement serait la même que celle mentionnée ci-dessus dans la section précédente.

Cyprès JSON Reporter

Comme nous le savons, Cypress est construit sur Moka; tous les reporters conçus pour Mocha peuvent être utilisés. Nous pouvons configurer le reporter dans notre fichier JSON globalement dans notre cypress.json fichier.

Les options mentionnées ci-dessus sont les configurations définies dans reporter par défaut. De plus, le spec reporter est défini par défaut. Ainsi, dans le reporter, nous pouvons définir n'importe quel reporter compatible avec Mocha. reporterOptions consiste à spécifier les options prises en charge en fonction du rapporteur que nous configurons.

Voyons comment configurer le reporter dans notre cypress.json fichier.

Considérons le multi reporter mochawesome comme notre reporter. Nous allons d'abord installer le reporter et l'ajouter à notre cypress.json fichier.

npm install --save-dev mocha cypress-multi-reporters mochawesome

Installez le reporter en passant la commande ci-dessus dans la ligne de commande. Maintenant, dans notre cypress.json fichier, ajoutez la propriété suivante.

"reporter": "cypress-multi-reporters",
  "reporterOptions": {
      "reportDir": "cypress/reports/multireports",
      "overwrite": false,
      "html": false,
      "json": true
    }

Nous allons comprendre chacune des propriétés en détail.

journaliste: Le nom du rapporteur que nous configurons dans notre projet

rapportDir: Le répertoire dans lequel nous allons sortir nos résultats.

écraser: Ce drapeau demande l'écrasement des rapports précédents.

html: Génère le rapport à la fin du test.

json: s'il faut générer un fichier JSON à la fin du test.

Cypress package-lock.json

La package-lock.json Le fichier est créé automatiquement pour toutes les opérations lorsque npm modifie les modules de nœud ou le fichier package.json. Lorsque nous ajoutons des options ou installer toutes les nouvelles dépendances à notre Cypress package JSON, puis Cypress package-lock.json est mis à jour automatiquement.

Paquet Cypess.lock JSON fichier trace chaque package et sa version afin que les installations soient maintenues et mises à jour à chaque installation npm dans le monde. Ainsi, dans notre fichier JSON de package Cypress, lorsque nous mettons à jour la version ou ajoutons une dépendance, package-lock.json est également mis à jour et nous ne souhaitons y apporter aucune modification.

Aishwarya Lakshmi

Salut… Je m'appelle Aishwarya Lakshmi, j'ai terminé mon B.Tech et j'ai près de 2 ans d'expérience dans le domaine des tests. Je suis un passionné de tests et passionné par les tests et j'aime explorer de nouvelles choses dans mon domaine et les partager avec mes pairs. J'aime écrire des blogs pendant mon temps libre de la manière la plus simple mais efficace. En tant que testeur, j'aime avoir les choses à la perfection, je souhaite donc à mes lecteurs d'avoir une parfaite compréhension de la technologie. Je me tiens au courant des nouvelles technologies liées aux tests et passe du temps à les comprendre. Je suis heureux d'aider les étudiants à comprendre les concepts des tests.