5

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>

2 Respostas 2

7

Você está pegando as propriedades de estilo do elemento com element.style e não os estilos da classe dele.

var element = document.querySelector('[data-testid="price"]'),
    style = window.getComputedStyle(element);

console.log(style.color);

// para propriedades com hífen no nome, pode-se usar das duas
// opções abaixo

console.log(style.fontSize); 
console.log(style["font-size"]);
.minha-classe {
    color: limegreen;
    font-size: 32px;
}
<span data-testid="price" class="minha-classe">R$ 0,00</span>

A função window.getComputedStyle() obtém os estilos computados no elemento, ou seja, aqueles que as classes também aplicam. A propriedade element.style funciona apenas para os estilos aplicados inline no elemento com style="color: #000".


3

Você pode usar a função getComputedStyle, ficaria mais ou menos assim:

const el = document.querySelector('[data-testid="price"]')
const style = getComputedStyle(el)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .