Relatório TD Versão Final - Luana Schelb Teixeira 1 (1)

Desenvolvimento de aplicação web para gerenciamento de
testes
Luana Schelb Teixeira1, Luiz Alberto Ferreira Gomes 2
1Aluna de Graduação do Curso de Ciência da Computação da PUC Minas Campus de
Poços de Caldas – MG, Brasil
2Orientador e Docente do Departamento de Ciência da Computação da PUC Minas
Campus de Poços de Caldas – MG, Brasil
lua.schelb@gmail.com, luizgomes@pucpcaldas.br
Abstract. This work describes the development of a web-based application to

facilitate test management in software projects. The application allows the
project team to manage all the process of testing and have access to reports and
statistics.
Resumo. Este trabalho descreve o desenvolvimento de uma aplicação web para

facilitar o gerenciamento de testes em projetos de software. A aplicação permite
a equipe do projeto gerenciar todo o processo de testagem e ter acesso a
relatórios e estatísticas.
1. Introdução e contextualização
As aplicações de computador também conhecidas como programas ou softwares se
tornaram parte fundamental do mundo contemporâneo, sendo usadas para os fins mais
diversos como transações bancárias, compartilhamento de vídeos ou comunicação. Neste
contexto a testagem dessas aplicações se tornou essencial e parte do processo de
desenvolvimento.
A proposta deste artigo é construir uma aplicação para testagem de software que seja de
código livre, com poucas dependências, moderna e capaz de ajudar times pequenos a
gerenciar seus testes de maneira mais eficiente do que planilhas ou documento em texto.
A aplicação permitirá equipes documentar seus casos de teste, criar planos de teste para
cada versão de seus projetos e após a execução do plano é gerado um relatório com o
resultado final da testagem que pode ser baixado e compartilhado com o restante da
equipe. A instalação da aplicação deverá ser feita em um servidor proprietário e a
utilização da aplicação deve ser feita pelo navegador a partir de um endereço definido na
configuração do projeto.
O projeto finalizado satisfaz as funcionalidades e demandas esperadas. O código fonte é
distribuído publicamente no endereço https://github.com/luaschelb/testfree com a licença
GPL 3.0 que permite o código ser utilizado e modificado livremente.
2. Tecnologias e conceito utilizados

2.1. Javascript
Javascript, comumente abreviado como JS, é uma linguagem interpretada que está entre
as três linguagens mais populares da web e sua utilidade está em criar páginas dinâmicas
onde o conteúdo da página pode ser alterado durante sua execução seja por eventos
externos como uma notificação ou pela interação com o usuário entre outros. Dado que
99% dos sites utilizam Javascript a maioria dos navegadores modernos são compatíveis
com a linguagem [1].
2.2. Node.JS
É um interpretador para Javascript baseado no interpretador V8 da Google e capaz de ser
executado em máquinas Windows, Linux, Mac entre outras. O Node.JS permite que a
linguagem Javascript seja utilizada em mais contextos fora do browser. Como parte de
seu ecossistema é fornecido o gerenciador de pacotes NPM que usamos em nosso projeto
para gerenciar as dependências de cada parte da aplicação [2].
2.3. Typescript
É uma linguagem de alto nível que estende as capacidades do Javascript adicionando
tipagem estática à linguagem tornando o Typescript mais próximo de linguagens antigas
bem estabelecidas como Java, ao mesmo tempo permitindo um código mais limpo e, em
alguns cenários, mais rápido [3].
2.4. Front-end e Back-end
São termos na ciência da computação que se referem a separação de responsabilidades
entre a parte de apresentação de dados chamada de front-end e a parte de acesso aos dados
chamada de back-end. Esta separação também é conhecida como modelo cliente-servidor
em que uma aplicação fornecedora de um serviço é definida como o servidor e uma
aplicação consumidora do serviço é definida por cliente. Nesse modelo o cliente seria
considerado o front-end e o servidor seria o back-end [4].
2.5. API
API, sigla em inglês para “application programming interface”, é uma conexão entre
computadores ou aplicações. Funcionam como interfaces onde um software pode oferecer
serviços e dados para outro software sem a necessidade de quem irá consumir a API de
saber como o serviço foi implementado [5].
2.6. API RESTFul
É uma API que está de acordo com o padrão de desenvolvimento REST, sigla em inglês
para “Representational State Transfer” que em tradução livre para português
“Transferência de Estado Representacional”, um padrão que foi criado para guiar o
desenvolvimento na web e define regras e padrões para a entrega de dados, serviços e
conteúdo em aplicações web [6].
2.7. ExpressJS
ExpressJS, ou apenas Express, é um framework para desenvolvimento de aplicações
back-end com NodeJS o que torna possível unificar a linguagem utilizada no servidor e
cliente facilitando o desenvolvimento [7].
2.9. ReactJS
Desenvolvido pela empresa Meta, anteriormente chamada Facebook, o ReactJS, também
chamado de React ou React.js, é uma biblioteca para facilitar a criação de aplicações de
página única para web em que todo o código necessário para a aplicação é baixado
completamente uma vez e apenas as partes que devem recarregar são novamente
solicitadas ao servidor evitando uma atualização completa da aplicação que pode ser lenta
e, portanto, atrapalhar a experiência do usuário [8].
2.10. React Router
É um pacote disponível no ecossistema NodeJS que fornece ao React a funcionalidade de
gerar aplicações com múltiplas páginas, porém mantendo o recarregamento inteligente
entre elas. A utilização do React Router permite que a aplicação seja compatível com as
funcionalidades de histórico do navegador como histórico de páginas visitadas,
navegação para página anterior entre outras [9].
2.11. Material UI
É uma biblioteca de componentes seguindo o padrão de design Material Design criado
pela Google. Os princípios deste padrão de design é a criação de componentes que
simulem uma sensação de objetos reais possuindo sombra, reagindo ao toque do mouse
trocando de cor ou com animações [10].
2.12. SQLite
É um banco de dados que se diferencia das opções tradicionais podendo ser executada
completamente como dependência de um projeto sem a necessidade de ser instalada
normalmente na máquina do usuário. Utilizamos esse sistema para que reduzíssemos a
complexidade da aplicação diminuindo os passos para instalação da aplicação [11].
3. Aplicação desenvolvida
Foi realizado levantamento de requisitos e casos de uso e com esses artefatos geramos
um diagrama de entidades exibido na figura 1 para representar a estrutura de dados
desejada. A partir desse diagrama foi projetado o Back-end e em sequência o Front-end.
A aplicação fornece ao usuário as funcionalidades:
• Cenários e casos de teste: Uma tela dinâmica que através de um componente de
navegação permite ao usuário o gerenciamento de cenários e casos de teste para
cada projeto
• Builds: Listagem e gerenciamentos dos builds (versões) de cada projeto.
• Execuções: Funcionalidade principal da aplicação, onde é possível criar uma
execução de um plano de teste para uma versão da aplicação. Após criada pode
ser executada. Neste momento o testador deve marcar cada caso de teste como
“pulado”, “executado” ou “falha” e ao marcar todos os casos poderá finalizar a
execução.
• Planos de Teste: Os planos de teste fornecem uma listagem de quais casos de teste
devem ser executados para garantir o funcionamento de uma versão em projeto
específico.
• Projetos: Permite o gerenciamento dos dados dos projetos a serem testados.
3.1. Diagrama de entidades
O diagrama abaixo foi criado visando representar as características desejadas do sistema
no banco de dados relacional.
Figura 1. Diagrama de entidades
3.2. Página inicial
Ao acessar a aplicação o usuário é direcionado para a página inicial que fornece um

resumo da quantidade de total de projetos e a quantidade cenários, builds, execuções e
planos de teste para o projeto selecionado como demonstrado na figura 2.
Figura 2. Página inicial
3.3. Tela de execuções

A funcionalidade de execuções é composta pelas telas de listagem, execução e de
exportação de relatório. Ao acessar a funcionalidade o usuário é direcionado a tela de
listagem que permite o gerenciamento das execuções exibida na Figura 3. Nesta tela o
usuário pode navegar para a tela de execução exibida na Figura 4 ou a tela de exportação
de relatório exibida na Figura 5.
Figura 3. Tela de listagem de execuções
A tela de execução permite ao testador descrever o resultado de cada caso de teste

atribuindo um estado e, opcionalmente, anexando imagens que poderão ser visualizadas
no relatório.
Figura 4. Tela de execução de testes
O arquivo exportado contém todos os casos de teste da execução e exibe também os

anexos vinculados a cada caso permitindo ao testador compartilhar com o restante de sua
equipe.
Figura 5. Exemplo de documento exportado pela aplicação
3.4. Tela de cenários de teste

A tela de execuções permite ao usuário gerenciar criação, edição e deleção dos cenários
de teste e seus casos de teste para cada projeto. A figura 6 demonstra a tela de cenários
de teste, nela existe um componente de navegação à esquerda e dependendo das ações do
usuário o componente da direita é dinamicamente alterado exibindo formulários para
criação e edição de casos e cenários de teste.
Figura 6. Tela de cenários de teste exibindo o modal de edição de caso de teste
3.5. Tela de Planos de teste

A tela de planos de teste permite ao usuário gerenciar criação, edição e deleção dos planos
de teste e vincular os casos de teste relacionados ao plano. A figura 7 exibe a listagem e
a figura 8 exibe a tela de criação em que são preenchidos os dados básicos e são
selecionados os casos de teste.
Figura 7. Tela de listagem de planos de teste
Nas telas de criação e edição de planos de teste é fornecida uma tabela com dois níveis
em que o primeiro exibe os cenários de teste e o segundo nível expansível lista os casos
de teste de cada cenário como demonstrado na figura abaixo.
Figura 8. Tela de criação de planos de teste
4. Considerações finais
Neste trabalho desenvolvemos uma aplicação completamente funcional que satisfaz as
propostas levantadas no início do projeto e será capaz de auxiliar times a realizar seus
processos de testagem com mais eficiência.
Durante o desenvolvimento precisamos tomar algumas escolhas de implementação, a
principal delas foi a decisão de não utilizar nenhuma biblioteca para manutenção de
estado na aplicação Front-end o que gera um código mais ineficiente, porém com menos
dependências.
Trabalhos futuros poderiam focar na adição de usuários ao sistema permitindo
autenticação e registro de usuários com cargos para fornecer acessos e permissões
específicas para cada integrante do time.
Referências
[1] Usage statistics of JavaScript as Client-side programming language on websites,
October 2024. Disponível em: https://w3techs.com/technologies/details/cp-javascript.
Acesso em: 15 out. 2024.
[2] Node.js: definição, características, vantagens e usos possíveis. Disponível em:
https://www.alura.com.br/artigos/node-js-definicao-caracteristicas-vantagens-usos.
[3] Como usar bibliotecas de terceiros com TypeScript?. Disponível em:
https://www.alura.com.br/artigos/usar-bibliotecas-de-terceiros-typescript. Acesso em:
22 out. 2024.
[4] Backend vs Frontend: Como Eles São Diferentes? Disponível em:
https://kinsta.com/pt/blog/backend-vs-frontend/. Acesso em: 22 out. 2024.
[5] O básico de APIs RESTful parte 1 - definições e restrições. Disponível em:
https://dev.to/dev_jessi/o-basico-para-entender-apis-restful-parte-1-1apm. Acesso
em: 22 out. 2024.
[6] RESTful APIs: Fundamentos, Práticas e Implementação. Disponível em:
https://dev.to/thiagohnrt/restful-apis-fundamentos-praticas-e-implementacao-gle.
[7] O Que é Express.js? Tudo o Que Você Precisa Saber. Disponível em:
https://kinsta.com/pt/base-de-conhecimento/o-que-e-express-js/. Acesso em: 22 out.
2024.
[8] React Pro - Referências Para Profissionais. Disponível em:
http://programadorobjetivo.co/react-pro-referencias/. Acesso em: 22 out. 2024.
[9] ReactJs: Manipulando rotas com react-router. Disponível em:
https://blog.ateliware.com/react-router/. Acesso em: 22 out. 2024.
[10] Referências de Design UI para Websites: Inspiração e Recursos para Designers.
Disponível em: https://awari.com.br/referencias-de-design-ui-para-websites-
inspiracao-e-recursos-para-designers/. Acesso em: 22 out. 2024.
[11] SQLite: o que é, como funciona e qual é a diferença entre o MySQL. Disponível em:
https://www.hostgator.com.br/blog/sqlite-o-que-e-como-funciona-e-qual-e-a-
diferenca-entre-o-mysql/. Acesso em: 22 out. 2024.

Relatório TD Versão Final - Luana Schelb Teixeira 1 (1)

Enviado por

Direitos autorais:

Formatos disponíveis

Relatório TD Versão Final - Luana Schelb Teixeira 1 (1)

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Relatório TD Versão Final - Luana Schelb Teixeira 1 (1)

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento de aplicação web para gerenciamento de

Abstract. This work describes the development of a web-based application to

Resumo. Este trabalho descreve o desenvolvimento de uma aplicação web para

2. Tecnologias e conceito utilizados

3.2. Página inicial

Ao acessar a aplicação o usuário é direcionado para a página inicial que fornece um

Figura 2. Página inicial

3.3. Tela de execuções

A tela de execução permite ao testador descrever o resultado de cada caso de teste

Figura 4. Tela de execução de testes

O arquivo exportado contém todos os casos de teste da execução e exibe também os

3.4. Tela de cenários de teste

Figura 6. Tela de cenários de teste exibindo o modal de edição de caso de teste

3.5. Tela de Planos de teste

Figura 8. Tela de criação de planos de teste

Você também pode gostar