Configuração gráfica do Allure Report

Após instalado e por padrão, o allure define uma configuração de sua barra lateral e organização dos cards da tela inicial, mas isso não é uma regra, este artigo visa ensinar a você que acabou de conhecer o allure, a configurar o mesmo até que fique a sua cara. O allure vem configurado da seguinte forma:

Página padrão do allure

Mas é totalmente possivel configurar o allure para que ele fique com a sua cara, e o meu objetivo aqui é te ajudar a fazer essa configuração, então vamos começar!

Nota: é necessário um pouco de conhecimento em CSS para que possa ser feita essa configuração.

O allure define sua configuração gráfica, fontes e barra lateral em sua pasta de instalação, que por padrão fica localizada em:

C:\Users\SeuUsuario\scoop\apps\allure\VersaoDoAllureInstalada

Ao entrar nessa pasta vamos seguir para pasta de plugins > custom-logo-plugin, é nesse diretório que podemos alterar toda a configuração gráfica, e quando você gerar seu relatório, como eu explico no meu outro artigo, o report do allure vai sair a sua cara.

Imagem do allure após a configuração gráfica ter sido feita por mim

Mas como eu faço essa configuração?

Bem, na verdade é simples, na pasta “custom logo” encontramos normalmente 2 arquivos e uma pasta:

Dentro da pasta static encontramos 3 arquivos, custom-logo.svg, image.png e um arquivo styles.css, é nele que vamos alterar para que fique com a pesonalização própria.

A minha configuração, mostrada acima, está da seguinte forma dentro do arquivo:

.side-nav__brand {
background: url('image.png') no-repeat left center !important;
margin-left: 10px;
}
.side-nav{
background-color: #21483F;
border-right: 4px solid #DEA400;
font-family:'Segoe UI';
}
.side-nav__link_active{
border-right-color: rgba(0, 0, 0, 0);
}
.side-nav__text{
color: white;
}
.widget__title{
font-family:'Segoe UI';
text-transform: none;
font-weight: 500;
}
.button_inverse{
color: white;
border-color: white;
}

Como é possivel notar eu defino no inicio do arquivo css, que minha logo seja a image.png, e é isso que define a logo mostrada antes do nome allure, consigo também definir a fonte, o tamanho e os espaçamentos entre cada um, também defini uma barra lateral para seguir as cores de minha preferência. Seguindo daqui é seu playground, renomeie a sua logo pessoal ou de sua organização para image.png ou defina outra logo no css, coloque suas cores e gere o report, o allure será totalmente personalizado graficamente a partir de sua geração.

Agradecimentos:

Esse texto só foi possível graças a equipe em que faço parte, Rebecca como minha lider me apresentou ao mundo de QA e me encorajou a escrever esse texto, jeckson me ajudou na definição de como funcionava o allure e nas pesquisas incessantes na internet sobre seu funcionamento tão como ajudou no incentivo para que isso fosse escrito, karol foi a descobridora de como a automação do próprio allure, e gabriel com apoio e explicações. Sem essa equipe esse texto não existiria nem eu saberia nada sobre esse assunto, obrigado!