Estou escrevendo testes para um componente web, o mesmo tem um dinâmica de troca de cores e eu gostaria de testar se essa cor foi trocada.
Durante a escrita dos testes, tenho acesso a DOM para capturar os elementos com querySelector
, onde efetuo a query const el = document.querySelector('[data-testid="price"]')
, para selecionar a tag span.
Porem ao testa el.style.color
para saber se a cor é igual a "#000"
, o mesmo me retorna
uma string vazia (""
), aparentemente as regras aplicadas por classe não alimentam a propriedade style do componente no JS. Há alguma forma de validar essa regra da classe ?
Class css
.gCPFyd {
color: #000;
font: 16px Roboto;
font-weight: bold;
}
HTML:
<span data-testid="price" class="sc-hBUSln gCPFyd">R$ 0,00</span>