Dúvida na busca de elementos que não possuem ID!

Oi pessoal, boa tarde!

Mais uma vez venho parabenizar ao Agile Testers pela iniciativa e agradecer aos retornos num outro tópico que abri com duvida. Estamos iniciando a implantação da automação de testes na empresa onde trabalho, inicialmente utilizaremos o Protractor com Selenium e o Jasmine.

Eu sou leigo no assunto, estudei um pouco de protractor mas iniciei a prática apesar de não ter progredido com algo que eu mesmo fiz, com isso queria a ajuda de voces para tirar algumas dúvidas

Vou fazer o acesso a um menu de cadastro como o de Conclusão abaixo, em seguida fazer a inserção de um dado no campo de descrição para fazer uma pesquisa que irá me retornar um registro, porem me deparei com a seguinte situação, no sistema da empresa os componentes da tela não possuem ID como numa página do google por exemplo, sendo assim eu ogostaria de saber como eu posso fazer a identificação deles para que eu possa declará-los no arquivo po.js e realizar a ação no spec.
abaixo a tela em que quero fazer o teste descrito:
0_1509311157617_7f9c2fbc-d65e-42f0-b9c7-28a32b78574c-image.png
o desenvolvedor me indicou a fazer um get element pelo href do componente, porem pelo que vi não é o recomendado, mas se caso puder fazer, também fiquei em dúvida de como declará-lo no arquivo po.js (alguém me explica?).
abaixo a inspeção do elemento:
0_1509311607416_18c5106b-eb14-468c-a9c9-1118981dbb02-image.png
outro detalhe é que a classe do componente é utilizada por outros mais, e isso tornaria inviável eu buscar pela classe, ou seria a unica forma?

Se o href do elemento for único na página, sem problemas. Só não entendi por que o dev te indicou a fazer isso em vez de gastar uns minutos e colocar ids nos elementos. Veja com algum dev de colocar ids nos elementos, não tem nenhum segredo, isso é o mínimo que qualquer aplicação web deve ter pra ser automatizada. Inclusive, seria bom vc aprender a fazer isso, pra não depender de outras pessoas. Procure um dev que seja mais próximo e pareie com ele pra resolver isso, faça com que ele entenda a necessidade e aprenda como fazer isso no futuro.

Recomendo ler o livro de Protractor do @Walmyr https://www.casadocodigo.com.br/products/livro-protractor , além dos posts dele sobre o assunto: https://talkingabouttesting.com/tag/protractor/ . Os posts e o livro vão te dar base suficiente pra prosseguir com o seu trabalho.

Beleza Stefan, o livro já temos aqui e iniciei a leitura dele (Foi comprado inclusive :D). Sobre os IDS to conversando com o desenv responsável, até queria que nós do teste fizéssemos as inserções mas o código do sistema não esta disponível pra nós, como voce mesmo disse isso é básico e essencial, agiliza e muito pelo que to vendo aqui e ajuda demais, porque estamos quebrando a cabeça atoa com a falta deles. Sobre o código ser fechado… nem comento!

Agradeço imensamente pela ajuda

Ah sim, sem ter acesso ao código fica difícil mesmo, é triste ainda ver isso acontecendo nos dias de hoje. O jeito é pedir pro dev mesmo, senão vcs vão perder muito tempo com coisa simples.

Bom dia.

Utilizar ID é apenas uma técnica para localizar e referenciar objetos da página, existem outras alternativas.
A mais simples e confiável é utilizar o xpath do elemento utilizando a ferramenta de desenvolvedor do Chrome (como você fez na imagem) :)
Qualquer dúvida dá um toque.
Abraço

@genunasumus XPath é a forma mais lenta de identificar elementos e, apesar de ser poderosa, não deve ser encorajada pra todos os casos, deve ser usada apenas quando não há outra alternativa (id, name, css, etc). Usar o XPath gerado pelo Chrome dev tools é pior ainda, ele vai te cuspir o XPath começando no body da página e se vc usar essa “tripa” gerada no seu código, já era a manutenção.

XPath é muito útil, devemos usar sim quando não há outra alternativa, mas devemos usar corretamente, tirando vantagem das funções que ele oferece (contains, por exemplo) e gerando sempre o menor xpath possível, pra facilitar na manutenção.

Lembrando que frameworks como o Capybara diminuem consideravelmente a necessidade de usar XPaths, porque oferecem formas de identificar elementos pelo texto (o que é impossível com um seletor CSS).
Frameworks como o Protractor, quando usados em aplicações Angular.js, oferece mais formas de identificar os elementos, reduzindo também a necessidade de XPath.

Resumo: conheça bem seu framework :)

@stefanteixeira

1- A diferença de ID e XPATH vem diminuindo gradativamente, hoje é bem pouco significativa.
2- Resolve o problema em questão.
3- Esperar ter ‘tempo’ e colocarem os IDs normalmente não é uma alternativa viável.
4- Desculpe a demora.
5- Poderia por gentileza apresentar uma solução mais ‘efetiva’ (com todo respeito e admiração [sinceramente, sem ironia])
6- http://elementalselenium.com/tips/32-xpath-vs-css (link com um pouco da nossa ‘Discussão’)

Abraço :)

css X xpath é polemico, Dan North falou sobre isso aqui e no final das contas ele fala pra evitar e usar quando não tem alternativa.

@lruggiero

Boa tarde.

Sim, não é a prática ideal, mas não é ‘criminosa’ como foi apontada…
A questão é:- Resolve o problema do nosso amigo com os objetos sem ID com facilidade, pelo menos permitindo a elaboração dos testes até que os IDs sejam criados (prática ideal).
Pelo que ele demonstrou no tópico, não possui um conhecimento avançado das técnicas de identificação e duvido muito que a empresa tenha interesse em dar o tempo necessário para aprendê-las.
No mais, tenho certeza que podemos aproveitar este momento para trocar conhecimentos e aprender mais :)

Resolver resolve, XPath é muito poderoso, como falei anteriormente. Agora, sugerir de usar o XPath que o Chrome DevTools gera é muito irresponsável, é terrível pra manutenção e legibilidade, ainda mais pra quem tá começando. Nem todo mundo sabe o suficiente de XPath pra conseguir escrever um seletor legível e fácil de manter, então definitivamente não é algo pra se recomendar pra todos os casos, tem que ter precaução E também aprender sobre XPath antes, no mínimo saber algumas funções (principalmente contains), saber navegar na árvore do DOM, etc.

Sobre a questão de performance:
1 - esse post tá bem antigo pra ter uma conclusão (em se tratando de web), Chrome está na versão 61 ou superior e o post compara a versão 31
2 - mesmo que seja pouco significativa (em web), multiplica pelo número de vezes que vc vai buscar um elemento dentro da execução de uma suite inteira de testes, é a mesma lógica de colocar sleep no código, tipo “ah, mas é só 1 segundo”, mas quando percebe o número de vezes que esse sleep será chamado…
3 - em Mobile a diferença de performance é absurda, é muito lento (iOS principalmente, pelo menos nas apps que já trabalhei)

Sobre solução mais efetiva já falei na resposta seguinte, conheça seu framework e veja o que ele pode te oferecer pra facilitar as coisas. Caso esteja usando Selenium WebDriver puro, tentar antes as outras formas possíveis, até chegar no CSS e, caso não seja possível escrever um CSS selector, usar XPath (mas direito, sem pegar uma “tripa” do DevTools tipo “/html/body/div/div/div[2]/div/span”). Entenda que estou sendo “chato” com isso porque já sofri muito com código porco e difícil de manter, já fui iniciante, já tive essa mentalidade de “ah, isso resolve, dps a gente melhora” (e acaba não melhorando nunca). Lá em 2013/2014, quando comecei a estudar Clean Code e a vivenciar na pele o quanto que qualidade de código (de teste mesmo) é essencial e a diferença que faz, a mentalidade foi mudando… legibilidade e manutenibilidade devem ser sempre prioridade.

-1

@stefanteixeira

Volto a afirmar, não está focando na necessidade que foi relatada…
A resposta " conheça seu framework" não ajuda muito, já que nada mais é do que um ‘vai estudar’, ou mais ou menos o que o programador falou…
A pergunta dele é:- "outro detalhe é que a classe do componente é utilizada por outros mais, e isso tornaria inviável eu buscar pela classe, ou seria a unica forma?"
Ficaria mais satisfeito se você tivesse apontado por exemplo o uso do Selenium plugin ou ideex pra ver todos os locators básicos e testar os tempos de resposta.

Como já disse respondendo in loco a pergunta dele: - "Utilizar ID é apenas uma técnica para localizar e referenciar objetos da página, existem outras alternativas. "

Para completar apontei a solução funcional de menor esforço e maior confiabilidade, ou seja, rápido e funciona!

Se quiser entrar em mérito de performance pense apenas assim: Se não conseguir automatizar não tem tempo pra analisar, se colocar algo mais lento, pode analisar e melhorar.

Abraço

@genunasumus said in Dúvida na busca de elementos que não possuem ID!:

Para completar apontei a solução funcional de menor esforço e maior confiabilidade, ou seja, rápido e funciona!

Bom dia @genunasumus ,

Discordo quanto ao Xpath ser o de menor esforço, e principalmente, maior confiabilidade. Isso devido que:

  • O markup está sujeito a alterações, e qualquer alteração irá quebrar os testes. Algo que não ocorreria se tivesse utilizado ID. Porém contornável apenas se a pessoa tiver um bom conhecimento de Xpath e souber usar contains(), e não um plugin que gera o Xpath.

  • Legibilidade péssima, veja um exemplo de elemento localizado por Xpath abaixo:

var elem = element(by.xpath('/*/p[2]/b[2]/following-sibling::node()'+'[count(.|/*/p[2]/b[2]/following-sibling::br[1]/preceding-sibling::node))'	+'='+'count((/*/p[2]/b[2]/following-sibling::br[1]/preceding-sibling::node()))'+']'));

Perceba a dificuldade para entender qual elemento HTML tal localizador se propõe a identificar. Portanto, não utilize xpath para localizar elementos se não tiver muito conhecimento sobre como utilizar e quando utilizar, pois muitas das vezes quando o elemento não possui ID há saídas contornos que não envolvem Xpath.

@paulo-gonçalves

Bom dia.

Você entendeu o contexto da discussão?

"O markup está sujeito a alterações, e qualquer alteração irá quebrar os testes. Algo que não ocorreria se tivesse utilizado ID. "

O AUTOR DA QUESTÃO RELATA QUE NÃO EXISTEM IDs.

1- Existe alguma maneira mais rápida, simples e confiável que o xpath para este caso (do autor)? Se colocar o CSS como opção vou achar contraditório pois o desempenho é quase o mesmo que o xpath.
Não abstraia para o mundo perfeito, ajude a pessoa que solicita informação. 300k de teoria mas ninguém aponta uma solução prática, sendo que existe.

PS- Esse xpath não parece ser nativo do toools, parece mais algo gerado por ferramenta ou framework.

Abraço;

@genunasumus vc não consegue entender que não tá ajudando o cara dando uma solução que funciona a curto prazo, mas que ferra com ele a médio/longo prazo… E ainda tá sendo desnecessariamente rude com o outro colega que não concorda com sua opinião.

Melhor parar por aqui, deixa o autor do post ler as respostas, pesquisar e decidir o que fazer.

E ae pessoal, desculpem a demora, então conseguimos que o desenv liberasse o código pra nós ( mesmo que alteremos pra testar localmente por enquanto) e irão subir as alterações depois, mas uma parte pelo menos o desenv responsável irá fazer a inserção dos ids. Quanto ao Xpath eu achei interessante mesmo, tanto que até conversei com o desenv sobre isso, mas pra início assim creio que não seja o mais viável, porem gostei da discussão e das idéias e opiniões de todos, só de saber que posso contar com ajuda aqui é animador :D

@stefanteixeira

Onde fui rude?

@bruno-nogueira-andrade

Você talvez enfrente alguma dificuldade com elementos dinâmicos, grids e objetos comprados ou feitos, por isso eu recomendaria algum curso ou livro para entender bem os locators, técnicas e conceitos.
No mais, boa sorte :)

PS- Udemy tem cursos baratos, tenho certeza que irá gostar… a parte de sincronia é bem importante também.

Log in to reply

Looks like your connection to Agile Testers was lost, please wait while we try to reconnect.