Como criar CSS Selector com facilidade

Quem sabe meu problema também é o seu?

Aparecido Ferreira
Jun 23 · 4 min read
Image for post
Image for post

Depois de ter passado por uma situação complicada em um projeto, decidi escrever esse post. Porque vai que, assim como eu, você esteja passando passando pela mesma situação?

Bom, trabalho em um projeto que está em uma situação “caótica”. Não é possível colocar um ID em um botão, campo de texto, comboBox ou checkBox. A partir dessa situação, passamos a utilizar no projeto de automação o xpath e o CSS Selector, o famoso “inspecionar elemento”, que nada mais é que procurar e copiar um elemento com o qual você queira fazer uma ação (mais pra frente vamos explicar melhor).

Recentemente eu criei um cenário novo para automação, no qual eu precisava clicar em um botão que estava na tela. Ao copiar o XPATH ou CSS Selector e colar no código para automação, ele simplesmente não conseguia localizar o elemento copiado. E foi aí que começou a minha saga de como fazer o código reconhecer o elemento.

O stress foi aumentando…

Image for post
Image for post

…e nada do projeto funcionar.

Image for post
Image for post

Então, comecei uma análise mais profunda no projeto para verificar o que estava ocorrendo e percebi que dentro de uma classe era criada outra classe dentro de outra classe, ou seja, tinha uma classe pai, dentro da classe pai tinha uma filha e dentro dela tinha outra filha, como no exemplo abaixo:

Image for post
Image for post
Image for post
Image for post

Comecei a pesquisar uma forma simples e fácil de fazer, porém não obtive sucesso. Durante a pesquisa encontrei dois posts, este do Danilo Feijó e esse outro do Bruno Batista, em que eles demonstravam uma maneira de fazer o XPATH e CSS Selector. Mas como o meu conhecimento é mais voltado para mobile, senti mais dificuldades na migração para web.

Então, a partir da leitura dos posts, comecei a fazer o meu próprio CSS Selector. Para os experientes no assunto recomendo a leitura dos posts do Danilo e do Bruno, mas para os iniciantes vou exemplificar aqui como montar o seu CSS Selector.

Primeiro, como copiar o CSS Selector no método tradicional

Passo 1

Image for post
Image for post

Passo 2

Image for post
Image for post

Passo 3

Image for post
Image for post

Passo 4

https://youtu.be/O3EGTxbnRPo

Pois é, meus amigos, esse é um CSS Selector tradicional. Reparem no tamanho dele. Agora vamos criar o nosso CSS Selector para o projeto.

Primeiro, repita os passos 1 e 2 e depois:

Passo 5

Image for post
Image for post

Passo 6

div[class =”nome da classe”] > div[class=”nome da outra classe”] > button

Abaixo, o exemplo que eu usei para chegar na imagem:

div[class=”metabar-block u-flex0 u-flexCenter”] > div[class= “u-flexCenter u-height65 u-xs-height56 u-paddingLeft8 u-paddingRight8”] > button

Image for post
Image for post

Pronto!
Nosso CSS Selector está pronto e assim o seu teste vai ser mais assertivo. Copie o que acabamos de criar e cole abaixo do modo tradicional (aquele primeiro que fizemos), e vamos comparar a diferença entre os dois modos.

Podemos usar esse modelo de CSS Selector para qualquer elemento dentro da tela, tais como: Button, comboBox, checkBox e InputText. Tomara que este post te ajude a não passar pelo mesmo problema que eu. Ficou alguma dúvida ou tem algo a acrescentar? Deixe um comentário.

Se você quiser fazer parte de um time que compartilha conhecimento o tempo todo, dê uma olhada aqui e venha ser parte. Vamos aprender juntos.

Concrete

Nós desenvolvemos produtos digitais com inovação, agilidade…

Aparecido Ferreira

Written by

Analista Quality Assurance (QA). Concrete (Part of Accenture) Formado em Engenharia da Computação

Concrete

Concrete

Nós desenvolvemos produtos digitais com inovação, agilidade e excelentes práticas, para que o mercado brasileiro e latino-americano acompanhe a velocidade do mercado digital mundial.

Aparecido Ferreira

Written by

Analista Quality Assurance (QA). Concrete (Part of Accenture) Formado em Engenharia da Computação

Concrete

Concrete

Nós desenvolvemos produtos digitais com inovação, agilidade e excelentes práticas, para que o mercado brasileiro e latino-americano acompanhe a velocidade do mercado digital mundial.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store