Upload de arquivos no cypress: como fazer upload sem pegar o arquivo da máquina
Falar em upload de arquivos é sempre um terror.
Pois nós QA's sempre conseguimos irritar o desenvolvedor durante os testes, só pelo fato de subirmos arquivos que não foram mapeados na regra de negócio e nem na hora do desenvolvimento.
Se no teste manual já é assim, imagina no automatizado?!
No momento que estava em minha frente uma tarefa para automatizar essa parte, já me bateu uma gastrite e pensei "puts, agora vai ser o caos", mas na realidade, não foi tudo isso não.
Comecei a mapear o que eu queria com relação a essa tarefa, fiz um mapa mental para me organizar e estando alinhada com o objetivo final, comecei a estudar mais sobre esse tópico e a ler a própria documentação do cypress para ter uma luz com relação ao que eu queria automatizar.
Depois de meio dia de serviço dedicado a isso, consegui finalmente automatizar um cenário que havia mapeado e com isso já se serviu de base para aplicar nos demais cenários.
Com esse aprendizado, quis criar este artigo para te ajudar, pelo menos dar uma luz no teu caminho para realizar esse tipo de tarefa. Assim, gastará menos tempo com o aprendizado sobre upload de arquivos.
Utilizando attachFile
Se você tem a versão mais antiga do cypress, você irá utilizar mais o .attachFile para a submissão(upload) de arquivos.
O .attachFile aceita tanto diversas extensões de arquivos quanto encode. Na extenção, você pode estar utilizando o ,json, .pdf, .docs, e por ai vai. Já no encode, você pode estar passando "utf-8", por exemplo.
Para utilizar o .attachFile é necessário que você baixo em sua máquina um plugin chamado: cypress-file-upload.
Com o plugin instalado, é necessário fazer algumas configurações:
No arquivo commands.ts, irá adicionar:
import 'cypress-file-upload';No arquivo tsconfig.json, irá dicionar:
"types": [
"cypress",
"cypress-file-upload", //adicionar essa linha
"node"
],Bora para o código em si, para entender como implementar.
Para que não "puxemos" um arquivo da nossa máquina e isso causar problemas futuras, iremos adicionar o arquivo que queremos na pasta /fixtures.
Após isso, você irá criar um novo arquivo na pasta e2e, dando o nome que preferir, no formato <nomedoarquivo>.cy.ts. No meu caso, vou colocar uploadarquivo.cy.ts
describe('File Upload', () => {
it('One file', () => {
const fixtureFile = 'exemplo.pdf';
const fileInputElement = '#fileInput';
cy.get(fileInputElement).attachFile(fixtureFile);
});
});
//or
describe('File Upload', () => {
it('One file', () => {
cy.get('fileInput').attachFile(exemplo.pdf);
});
});Explicação do código acima:
- Criei uma variável com o nome fixtureFile, nela vou sempre passar o nome do arquivo que quero que o cypress pegue lá de dentro da pasta que criamos;
- Criei uma variável fileInputElement, onde passo o id do meu elemento do html para que o cypress pegue o coloque ali o meu arquivo;
- Por fim, passo na linha do cy.get o nome da variável do id e utilizando o .attachFile, passo a variável do arquivo.
Simples!
Aqui eu utilizei variáveis mas tu pode fazer da maneira que quiser quanto a essa parte. Importante é respeitar a sintaxe da linha cy.get.
Utilizando selectFile
Nas versões mais atuais, você poderá utilizando o selectFile, para te ajudar o upload de arquivos.
Não precisará configurar e nem baixar nenhum plugin.
Única coisa que irá seguir o que foi escrito no tópico anterior é, criar um arquivo na pasta /fixtures e um novo arquivo no cypress ou ate mesmo reutilizar o mesmo, só comentando o código acima. Como é um arquivo de aprendizado você pode manter até o mesmo.
Bora para o código em si, para entender como implementar.
describe('File Upload', () => {
it('One file', () => {
const fixtureFile = 'exemplo.pdf';
const fileInputElement = '#fileInput';
cy.get(fileInputElement).selectFile(fixtureFile);
});
});
//or
describe('File Upload', () => {
it('One file', () => {
cy.get('fileInput').selectFile(exemplo.pdf);
});
});Veja que eu alterei apenas o de attachFile para selectFile mas a estrutura é a mesma, então seguiremos com a explicação da estrutura do tópico anterior.
Para saber mais sobre como implementar e evoluir com esses comandos, irei deixar nas referências alguns materiais que peguei como base para os meus estudos e implementação na prática.
