CSS Locator Game – Aprenda a localizar elementos através de CSS Selector

O problema

Você costuma automatizar aplicações web que não tenham id ou name nos elementos?
Provavelmente você usa seletores css (css selectors) para testar localiza-los, certo?

O problema é que existem diversos seletores e é difícil saber qual utilizar.

 

A possível solução

Como solução você precisa conhecer os principais seletores css para utilizar na localização de elementos dentro de uma página web, independente da API ou ferramenta que você esteja utilizando.

O CSS Locator Game é um jogo simples e didático que vai te ajudar a aprender a aplicar os principais seletores css na automação de teste para uma página web.

Você pode acessá-lo pelo link abaixo ou através do menu Desafios do blog.

https://eliasnogueira.github.io/css-locator-game/

 

Como saber quais os seletores css mais usados para automação de teste?

Este game é dividido em 4 seletores básicos e 8 seletores avançados, onde você vai aprender a utilizar os seletores:

  • pelo nome da tag
  • por id
  • por classe
  • pelo valor de um atributo
  • pelos elementos descendentes
  • pelos elementos filhos
  • pelo primeiro elemento de uma lista de elementos semelhantes
  • pelo último elemento de uma lista de elementos semelhantes
  • por um elemento específico de uma lista de elementos semelhantes
  • pelo valor de atributo, onde está contém um certo valor
  • pelo valor de atributo, onde está inicia um certo valor
  • pelo valor de atributo, onde está termina um certo valor

 

Quer contribuir?

Se você tiver alguma dúvida, sugestão, alteração use o GitHub do projeto.
Ele ainda está em desenvolvimento, logo toda sugestão é muito bem vinda!

https://github.com/eliasnogueira/css-locator-game

 

 

4 comentários em “CSS Locator Game – Aprenda a localizar elementos através de CSS Selector

  1. Ola Elias,

    Boa iniciativa 🙂

    Já fiz o jogo todo.

    Encontrei alguns bugs nos textos:
    Nos “Locatores” dos exemplos, tens o sinal trocado com o igual.
    No desafio “valor de atributo – termina” tens os sinais errados na explicação.

    Cumprimentos

  2. Boa tarde Elias, muito legal essa iniciativa do jogo! A didática é sensacional!

    Apenas duas dúvidas..
    – Para radio button, tratamos ele como um elemento normal?
    – Em questão de hierarquia, precisamos obter o path inteiro até o elemento desejado? Ou podemos partir de um id mais “abaixo” na hierarquia e ir percorrendo a estrutura até o elemento desejado?

    Muito obrigado, abraços!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *