Validação dos campos | Cypress: automação de testes E2E

Acabei encontrando um erro na mensagem do campo senha, durante os testes que fiz. Vou deixar aqui que talvez ajude mais alguém, e pra receber melhorias também.

describe('Login e registro de usuarios alura pic', () => {

    beforeEach(() => {
        cy.visit('https://alura-fotos.herokuapp.com');
    })

    it('verifica mensagens validacao', () => {
        cy.contains('a', 'Register now').click();
        cy.contains('button', 'Register').click();
        cy.contains('ap-vmessage', 'Email is required!').should('be.visible');
        cy.contains('button', 'Register').click();
        cy.contains('ap-vmessage', 'Full name is required!').should('be.visible');
        cy.contains('ap-vmessage', 'User name is required!').should('be.visible');
        cy.contains('ap-vmessage', 'Password is required!').should('be.visible');
    })

    it('verifica mensagem de e-mail invalido', () => {
        cy.contains('a', 'Register now').click();
        cy.get('input[formcontrolname="email"]').type('samircd9').blur();
        cy.contains('ap-vmessage', 'Invalid e-mail').should('be.visible');
    })

    it('verifica mensagem de campo nome limite maximo 40 caracteres', () => {
        cy.contains('a', 'Register now').click();
        cy.get('input[formcontrolname="fullName"]').type('samirsamirsamirsamirsamirsamirsamirsamir1').blur();
        cy.contains('ap-vmessage', 'Maximun length is 40').should('be.visible');
    })

    it('verifica mensagem de campo nome nao pode ser vazio', () => {
        cy.contains('a', 'Register now').click();
        cy.get('input[formcontrolname="fullName"]').click().blur();
        cy.contains('ap-vmessage', 'Full name is required!').should('be.visible');
    })

    it('verifica mensagem de campo nome deve ter no minimo 2 caracteres', () => {
        cy.contains('a', 'Register now').click();
        cy.get('input[formcontrolname="fullName"]').type('h').blur();
        cy.contains('ap-vmessage', 'Mininum length is 2').should('be.visible');
    })

    it('verifica mensagem de campo user name limite maximo 30 caracteres', () => {
        cy.contains('a', 'Register now').click();
        cy.get('input[formcontrolname="userName"]').type('samirsamirsamirsamirsamirsamir1').blur();
        cy.contains('ap-vmessage', 'Maximun length is 30').should('be.visible');
    })

    it('verifica mensagem de campo user name deve ter no minimo 2 caracteres', () => {
        cy.contains('a', 'Register now').click();
        cy.get('input[formcontrolname="userName"]').type('h').blur();
        cy.contains('ap-vmessage', 'Mininum length is 2').should('be.visible');
    })

    it('verifica mensagem de campo user name deve ser em minusculo', () => {
        cy.contains('a', 'Register now').click();
        cy.get('input[formcontrolname="userName"]').type('Hamade').blur();
        cy.contains('ap-vmessage', 'Must be lower case').should('be.visible');
    })

    it('verifica mensagem de campo user name nao pode ser vazio', () => {
        cy.contains('a', 'Register now').click();
        cy.get('input[formcontrolname="userName"]').click().blur();
        cy.contains('ap-vmessage', 'User name is required!').should('be.visible');
    })

    it('verifica mensagem de campo password nao pode ser vazio', () => {
        cy.contains('a', 'Register now').click();
        cy.get('input[formcontrolname="password"]').click().blur();
        cy.contains('ap-vmessage', 'Password is required!').should('be.visible');
    })

    it('verifica mensagem de campo password minimo 8 caracteres', () => {
        cy.contains('a', 'Register now').click();
        cy.get('input[formcontrolname="password"]').type('1234567').blur();
        cy.contains('ap-vmessage', 'Mininum length is 8').should('be.visible');
    })

    it('verifica mensagem de campo password maximo de 18 caracteres', () => {
        cy.contains('a', 'Register now').click();
        cy.get('input[formcontrolname="password"]').type('123456789123456789').blur();
        cy.contains('ap-vmessage', 'Maximun length is 18').should('be.visible');
    })

    // a mensagem 'Maximun length is 18' já aparece mesmo se digitar apenas 15 caracteres
    // esse teste vai falhar, pois o tamanho máximo na verdade é 14
    it.only('verifica mensagem de campo password com 15 caracteres', () => {
        cy.contains('a', 'Register now').click();
        cy.get('input[formcontrolname="password"]').type('123456789123456').blur();
        cy.contains('ap-vmessage', 'Maximun length is 18').should('not.be.visible');
    })


})

Oii Samir, como você está?

Peço desculpas pela demora em obter um retorno.

Obrigada por compartilhar sua forma de resolução conosco, com certeza ajudará diversos alunos e alunas da comunidade Alura que passem pela mesma atividade. Saliento também, que na área da programação, sempre existirá diversos caminhos para se chegar a um resultado, alguns mais onerosos, outros nem tanto e através da prática, assim como você tem feito, vamos aprimorando e criando códigos cada vez mais performáticos.

Acrescento que em alguns momentos da aplicação Alura Pic, como por exemplo ao digitar 15 caracteres e ser apresentado a mensagem Maximun length is 18, isso não é um "bug" (falha), é algo esperado. Essa aplicação possui alguns "bugs" escondidos de forma proposital para exemplificarmos a importância de testar todos os cenários e além disso, mostrar um código real, que terá falhas, afinal, as pessoas que programam o software são humanos e humanos, são propícios a falha. Porém, o desejável é que o software vá com o mínimo de falhas para o cliente, visando garantir não só a qualidade do software, mas evitar também, o retrabalho da pessoa programadora e até mesmo a reputação da empresa.

Se me permite, a título de curiosidade, um modo mais prático de testar o caso de teste relacionado ao tamanho limite de 30 caracteres, é utilizando a função repeat(), dessa forma, não será necessário escrever manualmente inúmeras vezes o nome, basta escrevê-lo uma única vez e colocar como parâmetro da função repeat() o número de vezes que será necessário repeti-lo, dessa forma, caso tivéssemos um tamanho máximo de 500 caracteres, não teríamos onerosidade na escrita. Veja como fica em código para 30 caracteres:

const nome30Caracteres = 'samir'.repeat(7)
cy.get('input[formcontrolname="userName"]').type(nome30Caracteres).blur();

Resultado:

samirsamirsamirsamirsamirsamirsamir

Novamente, parabéns pela exploração e percepção dos casos de testes que foram dispostos no curso.

Conte sempre com a Alura para evoluir seus estudos.

Em caso de dúvidas fico à disposição.

Grande abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

PRORROGAMOS O DESCONTO!