matheuscarvv / localizadores-css-e-xpath

Localizadores CSS & Xpath

o que você vai aprender?

• Saber diferenciar entre expressões CSS e Xpath;
• Conhecer maneiras para testar localizadores;
• Identificar elementos HTML, atributos e seus valores;
• Conseguir montar seu seletor CSS e Xpath;
• Quando usar cada um.

DOCUMENT OBJECT MODEL

Ainda sobre HTML:

• Qual é o tipo do elemento? O elemento é o que vem depois do sinal de maior >, nesse exemplo seria o “select”.
• Quais são seus atributos? São todos os itens que estão antes do sinal de “=”.
• Quais são os valores de seus atributos? Nesse exemplo são: países, left-align, Seleção de países.

Guardem esses conceitos:

Qual é o tipo do elemento?

Quais são seu atributos?

Quais são os # valores de seus atributos?

Tipos de localizadores

• Xpath
• Atribute
• Name
• ID
• CSS Selector
• Class name
• Link text
• Tag name

Um pouco de cada um

Xpath:

• XML Path Language (Linguagem de XML);
• Se parecem com caminhos de diretórios.

Exemplo:

• /html/head/title

CSS Seletor

• Seletores CSS são expressões para locaiizar um elemento;

Exemplo:

• div p

Principais maneiras de testar localizadores JQuery

Sintaxe JQuery

Site com localizadores CSS & Xpath Cheatsheet

Hand´s on!

CSS: $('.search_query').val()

Retorna o valor do filtro de busca, 't-shirts'

$('.homefeatured').text()

Retorna o texto

$('.blockbestsellers:first-child')

Retorna somente a primeira ocorrência daquele seletor CSS.

$('.blockbestsellers:first-child').click

Testa se o seletor funciona com .click()

$('.search_query').val('T-SHIRTS')

Exemplo com Xpath:

//div

Principais maneiras de testar localizadores DOCUMENT

Query Seletor:

document.querySelectorAll('cssSelector');

Com uso de classe:

Com uso de ID:

Get element:

document.getElementsByClassName(‘nomeClasse’);

Xpaths

document.evaluate('XPATH HERE', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

Principais maneiras de testar localizadores CTRL + F

Testando seletor CSS:

Testando ID:

Comandos mais utilizados:

Seleção de todos os conteúdos, todos os elementos:

Comando:

$('*')

Caso queira fazer o mesmo com Xpath: Comando:

//*

Selecionando um elemento:

Comando: $('a')

Nesse exemplo buscamos todos os elemento’a’.

Mesma consulta com Xpath:

Comando: $x('//a')

Consultando desde raiz com css: buscando elemento de uma determinada estrutura.

Comando:

html > head > title

Mesma consulta com Xpath:

/ html / head / title

Fazendo consultas usando filtro:

Vamos fazer uma consulta como se fosse um select em um banco de dados.

Comando:

$(‘input[name=”search_query”]’)

O que o comando faz: busca um input na tela, onde o name é igual a "search_query".

Agora vamos fazer o mesmo com Xpath:

Comando:

$x('//input[@name="search_query"]')

Comando:

$('input[placeholder*="Sea"]')

Usando * ele pesquisa todos os atributos que tenha "placeholder" e o valor desse atributo contenha o "Sea".

Vamos fazer a mesma consulta com Xpath:

Usando "contains":

Comando:

$x('//input[contains(@placeholder,"Sea")]')

Quando não temos nenhum tipo de atributo:

Comando:

$('form input:nth-child(4)')

Explicando o comando:

Nesse exemplo criamos um seletor sem usar id, class, name, placeholder. Somente utilizando elementos HTML.

Agora vamos fazer o mesmo com Xpath:

Comando:

$x('//form//input[4]')

Pesquisando o primeiro elemento:

Comando:

$x('//form//input[1]')

Buscando o last:

Comando:

$x('//form//input[last()]')

Obs: nesse exemplo podemos ver que ele trouxe dois resultados, então não seria confiável, sempre busque por um elemento único.

Selecionando elemento pelo texto:

Comando:

$x(‘//*[text()=”Lorem Ipsum”]’)

Usando "contains" junto com "text":

Comando:

$x(‘//*[contains(text(), “textoexemplo”]’)

Tabela de localizadores

Nome	CSS	XPATH
Todos os elementos	*	//*
Um elemento	p	//p
Caminho absoluto	html > body > title	/html/body/title
Query com atributo	Input[placeholder=”Search”]	//input[@placeholder, “Search”]
Query com parte de atributo	Input[placeholder*=”Sea”]	//input[contains(@placeholder, “Sear”)]
Filhos do elemento	Form input:first-child	//form/input[1]
	Form input:nth-child(4)	//form/input[4]
	Form input:first-child	//form/input[1]
Classe e id	.sear_query	//*[@class=”search_query form-control ac_input”]
	#search_query_top	//*[@id=”search_query_top”]
		//*[contains(@class, “search_query”)]
Elemento pelo seu texto		//*[text()=”Come Visit Us”]
		//*[contains(text(), “Nort Carolina”)]

Fonte: Iterasys Live com: Danilo Arantes Freitas

Agradecimentos:

Gostaria de agradecer ao meu amigo Sandro Augusto por me ajudar nesse projeto Linkedin