Como inspecionar elementos HTML?

Quando se fala de testes automatizados que simulam a interação real de um usuário navegando pela aplicação, é comum o uso da inspeção de elementos do DOM (document object model). Com isso é possível escolher identificadores únicos, e assim, interagir com os elementos identificados.

O DOM é uma plataforma e uma interface de linguagem neutra, que permite a programas e scripts o acesso e atualização dinâmica ao conteúdo, estrutura e estilo dos documentos.

Com relação a elementos HTML, a ideia é referir-se a elementos tais como: <head></head>, <body></body>, <title></title>, <h1></h1>, <h2></h2>... <h6></h6>, <p></p>, <div></div>, <br>, <input></input>, e outros. A lista completa pode ser vista no site do W3C.

A importância do conhecimento de HTML, CSS e JavaScript é útil para a escrita de testes automatizados end-to-end de forma realmente efetiva e produtiva.

Muitos profissionais de teste de software querem trabalhar com a automação de seus testes manuais, porém, as vezes não sabem nem por onde começar. Devido a isto, neste post sugiro começar inspecionando elementos, tais como campos de texto, botões, listas, tabelas, entre outros, relacionados à aplicação em desenvolvimento, para ir se acostumando com algo que será necessário no próximo passo, a escrita (ou codificação) dos testes.

Quando se olha para uma tela do login, por exemplo, com a perspectiva do usuário final, normalmente o que se vê é uma tela dentro do navegador web, com um campo para o preenchimento do usuário, outro campo para o preenchimento da senha e um botão de login. No entanto, quando se inspeciona estes elementos isoladamente, vemos que eles possuem seus atributos próprios, tais como type, id, text, value, class, size e outros.

É possível iniciar a inspeção de elementos em uma aplicação web, na maioria dos navegadores, posicionando o mouse acima do elemento o qual você quer inspecionar, clicando com o botão direito do mouse, e então selecionando a opção “inspecionar elemento” (ou em Inglês, “inspect element”). Com isto, você terá acesso a ferramentas para desenvolvedores, e ao HTML exato do elemento o qual você quer conhecer, além de acesso a um console para rodar código JS, informações referentes a rede, entre outros. Veja as telas com o passo-a-passo abaixo, realizadas em um navegador Chrome:

Campos de login, botão Entrar e links para criação de nova conta e recuperação de senha:

Inspecionando o botão Entrar:

Ferramenta de desenvolvedor aberta com o elemento inspecionado em destaque (linha azul):

Quando se pensa em testes automatizados de UI (user interface), é necessário ter certeza do elemento com o qual se quer interagir, pois o script vai fazer exatamente o que você o disser para fazer (o que for codificado), e se você não isolar unicamente os elementos, as vezes estará percebendo comportamentos estranhos em seus testes, os quais referem-se ao seu teste interagindo com elementos errados, tais como outro botão com a mesma classe a qual você estava utilizando para identificar unicamente um elemento, por exemplo.

Alguns exemplos de elementos HTML e seus atributos, retirados de uma aplicação de gerenciamento de conteúdo desenvolvida em Drupal podem ser vistos a seguir. Estes são referentes a uma tela de login:

Rótulo do campo Usuário:

<label for="edit-name">
  Usuário <span class="form-required" title="Este campo é obrigatório.">*</span>
</label>

Campo de texto para digitação do Usuário:

<input type="text" id="edit-name" name="name" value="" size="60" maxlength="60" class="form-text required" />

Texto explicativo referente ao campo Usuário:

<div class="description">Digite seu nome de usuário.</div>

Rótulo do campo Senha:

<label for="edit-pass">
  Senha <span class="form-required" title="Este campo é obrigatório.">*</span>
</label>

Campo texto para digitação da Senha:

<input type="password" id="edit-pass" name="pass" size="60" maxlength="128" class="form-text required" />

Texto explicativo referente ao campo Senha:

<div class="description">Digite a senha da sua conta de usuário.</div>

Botão de login (Entrar):

<input type="submit" id="edit-submit--3" name="op" value="Entrar" class="form-submit" />

Com isto, é possível perceber que com menos do que os elementos acima já é possível pensar em quais atributos devem ser usados, e em quais elementos, para a criação de testes de login. Testes de login com sucesso, de login inválido, de tentativa de login sem preenchimento de campo obrigatório, de validação de máximo de caracteres em um campo, etc. Mas aí fica para um próximo post!

Espero que tenham gostado! =)