Como fazer upload de arquivos com Cypress

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.

Atualização: na versão 9.3.0 do Cypress foi introduzida a funcionalidade .selectFile, a qual substitui a necessidade da biblioteca cypress-file-upload.

Fiz um vídeo apresentando a nova funcionalidade, o qual pode ser encontrado neste link.

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.

Ficou curioso(a) e quer aprender mais sobre automação de testes com Cypress? Conheça os cursos da Escola TAT.

• Cypress, do Zero à Nuvem
• Cypress intermediário
• Cypress avançado
• Boas práticas em automação de testes com Cypress
• Testes end-to-end com Cypress

👋 Até a próxima e bons testes!