Como criar CSS Selector com facilidade
Quem sabe meu problema também é o seu?
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…
…e nada do projeto funcionar.
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:
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
Se você clicar agora o botão direito do mouse, um mini pop-up vai ser aberto. Clique em Inspecionar. Neste exemplo, eu cliquei no botão “Publish”do Medium.
Passo 2
Clique na seta que aponta para um quadrado. Com ele, você pode selecionar o elemento que deseja localizar apenas com um clique.
Passo 3
Clique com o botão direito do mouse, onde está o “buttom”, e ele vai abrir um pop-up. Selecione “copy” e em seguida “copy selector”
Passo 4
Abra sua IDE e cole, deixando para comparar no final com o que vamos criar.
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
Use o comando => Mac: COMMAND + F / Windows: CTRL + F. Como mostra a figura abaixo, um campo de texto para digitação foi aberto.
Passo 6
Vamos usar esse exemplo da base do CSS Selector para ser usada conforme seu projeto:
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
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.
