JQuery Selectors no Selenium

Já expliquei aqui no blog quais são as diversas maneiras de selecionar os elementos da página com o Selenium. Mas em alguns casos, as expressões em Xpath ou CSS do Selenium ficam complicadas de serem montadas.

Vou dar um exemplo bom de quando isso acontece.

Temos a seguinte tabela em html:

<table>
	<tr>
		<td>Produto 1</td>
		<td>Produto 2</td>
		<td>Produto 3</td>
	</tr>
	<tr>
		<td>Produto 4</td>
		<td>Produto 5</td>
		<td>Produto 6</td>
	</tr>
</table>

Agora queremos validar o texto da quarta célula que é “Produto 4″.

Em Xpath, a primeira tentativa seria:

assertText | //td[4] | Produto 4

Porém isso não funciona. Como a quarta célula está na segunda linha da tabela, você tem que entrar primeiro na linha correta e usar índice 1 no td . Exemplo:

assertText | //tr[2]/td[1] | Produto 4

O mesmo ocorre com css locator.
Não funciona:

css=td:nth-child(4)

Funciona:

css=tr:nth-child(2) td:nth-child(1)

Não seria mais fácil se não precisasse usar o índice da linha?
Para isso, você terá que extender o Selenium com Jquery/Sizzle.

Por baixo dos panos o JQuery usa o Sizzle, que é uma implementação em Javascript de seletores CSS. Antigamente essa engine de css ficava dentro do próprio JQuery, mas ela foi separada para que evoluisse de forma independente.

Vou exemplificar passo a passo como configurar o Selenium IDE para usar o Sizzle:

1. Acesse http://sizzlejs.com e faça o download do arquivo zip.
2. Extraia o arquivo sizzle.js para algum diretório de sua preferência.
3. Renomeie o arquivo sizzle.js para user-extensions.js
4. Edite o final do arquivo acrescentando:

function eval_css(locator, inDocument) {
    var results = [];
    window.Sizzle(locator, inDocument, results);
    return results;
}

5. Abra a IDE e acesse Option -> Option e em Selenium Core extensions, coloque o path do arquivo editado.
6. Feche a IDE e abre-a de novo.
7. Pronto, os locators em css serão interpretados pelo Sizzle!!!

Para quem usa o Selenium RC, é só subir o selenium-server com o parâmetro “-userExtensions user-extensions.js”.

Voltando ao nosso exemplo, o comando abaixo funcionaria perfeitamente, usando apenas um índice:

assertText | css=td:eq(3) | Produto 4

Usamos o selector “eq” que faz exatamente o que precisamos. Note que o índice no Sizzle começa em 0 enquanto que no Selenium começa em 1.

Há outras funções que podem ser usadas. Dê uma olhada na documentação do Sizzle.

A boa notícia é que o Selenium irá trocar a api atual (cssQuery) que interpreta CSS locators para usar o Sizzle. Então na próxima versão, você não precisará mais alterar o user-extensions.js para sobrescrever o comportamento dos locators css.