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.

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!