cy_estudos.md

Iniciando com cypress

1. Configurar ambinete local instalando node e npm na sua máquina

https://nodejs.org/pt-br/download/

2. Criar pasta para o projeto

mkdir testes-cypress
cd testes-cypress
npm init -y # para criar package.json

3. Instalar cypress como dependência de desenvolvimento

npm install cypress --save-dev

4. Configurando scripts no package.json

Inserir na parte de scripts do arquivo as seguintes linhas:

{
    "scripts": {
        "cypress:run": "cypress run",
        "cypress:open": "cypress open"
    }
}

5. Rodar comando de testes open

Na primeira vez que rodar o comando vai criar pasta cypress no projeto onde deverão ser escritos os testes:

npm run cypress:open

6. Criar testes

Dentro da pasta do cypress crie um arquivo interface.spec.js e cole o código feito na apresentação:

/// <reference types="cypress" />

describe('Forms tests', () => {
    it('Should show all error messages if all form inputs is empty', () => {
        cy.visit('https://guisalmeida-linx.netlify.app/')

        cy.get('#register-form > .button').click()

        cy.get('#register-warnings').should('have.text', 'Preencha todos campos!Preencha email válido!Selecione gênero!')
    })

    it('Should show message success on form submit with all inputs filled', () => {
        cy.visit('https://guisalmeida-linx.netlify.app/')

        cy.get('#name').type('Guilherme')
        cy.get('#email').type('[email protected]')
        cy.get('#cpf').type('123456789')
        cy.get('#male').check()

        cy.get('#register-form > .button').click()

        cy.get('#register-warnings').should('have.text', 'Enviado!')
    })
})

Vai abrir uma interface do cypress onde deve-se clicar no arquivo que criamos:

Ele irá abrir o browser com nossa aplicação e rodar os testes: