Aprenda como anexar arquivos em seus testes automatizados

É isso mesmo, as pitadas de Cypress estão de volta. 😄

Bora aprender?

Um requisito comum no mundo dos testes automatizados de interface gráfica de usuário é a necessidade de testar a submissão de formulários nos quais é possível anexar um arquivo.

E aí você deve estar se perguntando. E como faço isso com Cypress?

🤔

A biblioteca cypress-file-upload está aí pra nos ajudar!

Tá bom, tá bom, você quer um exemplo com código né?

Aqui vai ele.

Neste exemplo, testo a criação de uma anotação com o anexo de um arquivo, sua edição para substituir o arquivo anexado por outro e por fim, sua deleção. Como pré-requisito para o teste, o usuário deve estar logado.

// cypress/integration/sample.spec.js

describe('CRUD', () => {
beforeEach(() => {
cy.intercept(
'GET',
'**/notes'
).as('getNotes')

cy.login()
cy.wait('@getNotes')
})

it('CRUD a note attaching files', () => {
const faker = require('faker')
const randomWord =faker.random.word()

// Create a note attaching a square.png file
cy.get('[href="/notes/new"]').click()
cy.get('#content').type(randomWord)
cy.get('input[type="file"]')
.as('fileInput')
.attachFile('square.png')
cy.get('button[type="submit"]').click()
cy.wait('@getNotes')

// Read
cy.get('.list-group-item')
.contains(randomWord)
.as('randomNote')
.should('be.visible')
.click()

// Confirm file was correctly uploaded
cy.get('.form-control-static a')
.as('fileLink')
.should('be.visible')
.and('have.text', 'square.png')

// Update a note attaching a squre2.png file
cy.get('@fileInput')
.attachFile('square2.png')
cy.get('button[type="submit"]').click()
cy.wait('@getNotes')

// Confirm new file was correctly uploaded
cy.get('@randomNote').click()
cy.get('@fileLink')
.should('be.visible')
.and('have.text', 'square2.png')

// Delete
cy.get('.btn-danger').click()
cy.wait('@getNotes')

// Confirm deletion
cy.get('@randomNote').should('not.exist')
})
})

Destaquei no código acima os trechos relacionados ao upload de arquivos e suas verificações.

Obs.: Os arquivos square.png e squre2.png são armazenados no diretório cypress/fixtures/.

Obs. 2: Para utilizar o comando .attachFile(), tive que instalar a biblioteca cypress-file-upload como dependência de desenvolvimento e importá-la no arquivo cypress/support/commands.js, conforme demonstrado abaixo.

// cypress/support/commands.js

import 'cypress-file-upload'

E é isso aí.

Agora tenho um teste que faz o login, cria uma nova anotação anexando o arquivo square.png, verifica que a anotação foi criada com sucesso, edita tal anotação anexando o arquivo square2.png, verifica que o arquivo anterior foi substituído pelo novo, e por fim, deleta a anotação e verifica que a mesma não existe mais.


Para mais detalhes sobre upload de arquivos com Cypress, recomendo a leitura da documentação oficial.


Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.


E aí, o que mais você gostaria de aprender na série “pitadas de Cypress“?

Deixa um comentário.


Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing e no Udemy.


👋 Até a próxima e bons testes!

Assista ao vídeo do teste rodando.

Um comentário em “Como fazer upload de arquivos com Cypress

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s