Discutiremos a estrutura JSON, exemplos e experiência prática detalhada para escrever JSON em nosso código. Mas, primeiro, vamos mergulhar em nosso artigo!

O que é Cypress Json: exemplo, esquema, análise prática detalhada

No nosso anterior artigo, discutimos variáveis ​​e aliases e como escrever nosso primeiro caso de teste. Agora, discutiremos o Cypress JSON e como incorporá-lo em nosso código.

Conteúdo

• Arquivo Cypress JSON
• Opções JSON padrão
• Opções Globais
• Tempo limite do Cypress JSON
• Cypress Ler arquivo JSON
• Captura de tela e opções de vídeo
• Janela de visualização e capacidade de ação
• Exemplo de Cypress JSON
• Matriz JSON de fixação Cypress
• Cypress ambiente JSON
• Repórter Cypress JSON
• Pacote Cypress-lock.json

Arquivo Cypress JSON

Como vimos anteriormente, a primeira vez que abrimos nosso Cypress Test Runner, ele cria um cipreste.json Arquivo. Este arquivo é usado para passar quaisquer valores de configuração de que necessitamos. Primeiro, veremos as opções que podemos passar em nosso cypress.json arquivo.

Opções JSON padrão

Certas opções são definidas por padrão no Cypress. Porém, podemos customizá-los de acordo com nosso projeto. Para identificar os valores padrão definidos pelo Cypress, navegue até o Configurações pasta em nosso Cypress Test Runner. A partir daí, expanda a opção Configuração para visualizar as opções padrão definidas pelo Cypress.

As opções são as configurações padrão fornecidas pelo 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
}

Opções

Podemos alterar as opções padrão do Cypress passando quaisquer argumentos que sejam compatíveis com nosso projeto. Como o nome sugere, cypress.json é um arquivo JSON, então temos que passar nossos argumentos no formato JSON. Em nosso código VS, você pode ver que o cypress.json está vazio, sem argumentos passados ​​para ele. Agora vamos ver as diferentes opções que podemos passar em nosso arquivo JSON.

Opções Globais

Podemos passar as opções globais para argumentos que precisam ser acessados ​​globalmente. Por exemplo, na tabela abaixo, a coluna Opções representa a palavra-chave que passaremos em nosso arquivo JSON; Padrão indica o valor padrão da opção específica definida pelo Cypress e Descrição indica o significado da opção.

Tempo limite do Cypress JSON

O tempo limite é um dos conceitos mais importantes em qualquer estrutura de automação. Cypress oferece uma variedade de opções que ajudam a lidar com tempos limite em nossos scripts. Primeiro, veremos as opções que podemos configurar.

Cypress Ler arquivo JSON

Às vezes, precisaremos interagir com as pastas ou arquivos em nosso projeto. Para interagir, temos que definir certas opções em nosso cypress.json arquivo para manipular os arquivos. Então, primeiro, vamos dar uma olhada nas opções disponíveis em nossa configuração de pastas / arquivos.

Capturas de tela e opções de vídeo

Podemos configurar nossos instantâneos e vídeos em nosso arquivo cypress.json (), e o Cypress nos fornece algumas opções para personalizar nossa configuração.

Janela de visualização e capacidade de ação

Você pode configurar e passar valores para alterar a altura e largura da janela de visualização com as opções fornecidas pelo Cypress. As opções de acionamento também podem ser configuradas.

Exemplo de Cypress JSON

Anteriormente, vimos as diferentes configurações que podemos passar em nosso cypress.json Arquivo. Agora, veremos um exemplo de como usá-los em nosso projeto.

Substituindo valores padrão no arquivo cypress.json

Em nosso código VS, abra o cypress.json Arquivo. Iremos substituir o defaultCommandTimeout comando para 8000.

{
    "defaultCommandTimeout" : 8000
}

É assim que parece em nosso projeto de código VS.

Mudando o cypress.json arquivo, ele se aplica a toda a estrutura. Podemos verificar navegando até as configurações do Cypress. Foi alterado de um valor padrão de 4000 para 8000

Substituindo valores padrão por meio do script de teste

Podemos manipular os valores padrão por meio de nosso script de teste também. Em vez de passar no cypress.json arquivo, vamos passá-lo em nosso arquivo de teste.

//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()

Dessa forma, podemos substituir os valores padrão em nosso arquivo de teste. No entanto, isso não afeta as alterações de configuração no nível da estrutura. Cypress dá prioridade aos valores em cypress.json. Por último, ele assume as configurações globais.

Matriz JSON de fixação Cypress

Cipreste cy.fixture() é uma função que carrega um conjunto fixo de dados em um arquivo. Podemos usar o fixture como um JSON para carregar quaisquer valores ou array no arquivo JSON. Primeiro, vamos entender como acessar o arquivo JSON em nosso projeto.

Meu arquivo JSON tem duas propriedades: nome de usuário e senha. Meu nome de arquivo JSON é examples.json.

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

Em nosso arquivo de especificações, acessaremos nosso fixture com o comando cy.fixture () e o conceito de aliases.

 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)
          }       

Cypress ambiente JSON

Variáveis ​​de ambiente são usadas em muitos projetos em organizações. Usamos variáveis ​​de ambiente

• quando os valores são dinâmicos em diferentes máquinas
• quando queremos testar em diferentes ambientes, como preparação, teste, desenvolvimento, produção / ao vivo

Esses casos exigem que definamos as variáveis ​​de ambiente. No entanto, se definirmos uma variável env em um arquivo de especificação, ela não será refletida em outros arquivos de especificação. Isso ocorre porque o Cypress executa cada arquivo de especificação de forma independente. Dessa forma, precisaremos configurar as variáveis ​​env separadamente.

Acessamos nossos arquivos de ambiente a partir de nosso arquivo JSON Cypress, ou seja, cypress.json Arquivo. Portanto, seremos obrigados a atribuir a opção em nosso cypress.json arquivo e usado em nosso arquivo de especificações. Portanto, vamos mergulhar em nosso exemplo.

Podemos definir nossas variáveis ​​de ambiente em nosso arquivo de configuração ou cypress.env.json arquivo.

Configurando a variável de ambiente no arquivo cypress.json

Definimos a propriedade env por um par de valores-chave. Quaisquer valores passados ​​pela palavra-chave env caem em variáveis ​​de ambiente, e Cypress pega o argumento do env palavra-chave. A sintaxe é semelhante à abaixo.

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

Se quisermos acessar o env variável em nosso arquivo de especificações, nós as atribuímos conforme mencionado abaixo.

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

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

Nós vamos adicionar o env configuração em nosso projeto e irá acessá-los em nosso arquivo de especificações. Na nossa cypress.json arquivo, adicione a seguinte configuração. Estamos definindo nosso URL propriedade e atribuindo-os ao nosso URL. Aqui, URL é a chave, e https://techiescience.com/technology/ é o valor.

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

Como declaramos a configuração, iremos acessá-los em nosso arquivo de especificações. Parece algo como abaixo. Conforme mencionado acima, estaremos usando Cypress.env() método para acessar a variável 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'));

    })
})

Configurando a variável de ambiente no arquivo cypress.env.json

Podemos atribuir nossa variável de ambiente em nosso arquivo JSON env cypress. Para isso, devemos criar um novo arquivo chamado cypress.env.json na raiz do projeto. Não vamos exigir o env palavra-chave; em vez disso, podemos acessá-los diretamente, passando o par de valores-chave.

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

Vejamos como atribuí-los em nosso cypress.env.json arquivo.

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

Como você pode ver acima, criamos um novo arquivo, cypress.env.json, e adicionou nosso URL propriedades. A forma de acessar as variáveis ​​de ambiente seria a mesma mencionada na seção anterior.

Repórter Cypress JSON

Como sabemos, o Cypress é construído em cima do Mocha; qualquer repórter criado para o Mocha pode ser usado. Podemos configurar o repórter em nosso arquivo JSON globalmente em nosso cypress.json arquivo.

As opções mencionadas acima são as configurações definidas no reporter por padrão. Além disso, o spec repórter é definido por padrão. Assim, no repórter, podemos definir qualquer repórter que seja compatível com o Mocha. reporterOptions é especificar as opções com suporte dependendo do repórter que estamos configurando.

Vamos ver como configurar o repórter em nosso cypress.json arquivo.

Vamos considerar o multi-repórter mochawesome como nosso repórter. Vamos primeiro instalar o repórter e adicioná-lo ao nosso cypress.json arquivo.

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

Instale o repórter passando o comando acima na linha de comando. Agora, em nosso cypress.json arquivo, adicione a seguinte propriedade.

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

Vamos entender cada uma das propriedades em detalhes.

repórter: O nome do repórter que estamos configurando em nosso projeto

ReportDir: O diretório onde iremos enviar nossos resultados.

substituir: Este sinalizador pede a substituição dos relatórios anteriores.

html: Gera o relatório de conclusão do teste.

json: Se deve gerar um arquivo JSON na conclusão do teste.

Pacote Cypress-lock.json

A Pacote-lock.json O arquivo é criado automaticamente para qualquer operação quando o npm modifica os módulos do nó ou o arquivo package.json. Quando adicionamos qualquer opção ou instale quaisquer novas dependências para o nosso Cypress package JSON, então o Cypress package-lock.json é atualizado automaticamente.

Pacote Cypess.lock JSON O arquivo rastreia cada pacote e sua versão para que as instalações sejam mantidas e atualizadas em cada instalação npm globalmente. Portanto, em nosso arquivo JSON do pacote Cypress, quando atualizamos a versão ou adicionamos qualquer dependência, o package-lock.json também é atualizado e não queremos fazer nenhuma alteração nele.

Aishwarya Lakshmi

Olá… eu sou Aishwarya Lakshmi, concluí meu B.Tech e tenho quase 2+ anos de experiência na área de testes. Sou um entusiasta de testes e apaixonado por testes e adoro explorar coisas novas em minha área e compartilhá-las com meus colegas. Gosto de escrever blogs durante meu tempo livre da maneira mais simples, mas eficaz. Como testador, gosto de ter as coisas perfeitas, por isso desejo que meus leitores tenham um entendimento perfeito da tecnologia. Eu me mantenho atualizado com as novas tecnologias relacionadas a testes e passo tempo entendendo-as. Fico feliz em ajudar os alunos a compreender os conceitos dos testes.