Posted by Clayton Casteli On July - 26 - 2015 0 Comment

O HtmlUnit é um framework de tests em java. Com o HtmlUnit é possivél chamar páginas web, validar formulários webs, executar clicks em botões, ou seja, ações convencionais que fazemos em um browser web.

Além do HtmlUnit possibilitar execuções de testes em páginas web, ele ainda tem suporte para javascript e possibilita execuções de testes em browsers específicos Chrome, Firefox or Internet Explorer.

Nesse post vamos mostrar alguns exemplos de teste em um formulário web com HtmlUnit. Para isso construimos um pequeno formulário usando AngularJS, o qual iremos realizar nossos testes.

Inicialmente apresentaremos o formulário construido e em seguida alguns testes para fazer a validação do formulário.

HtmlUnit Site

  1. Configuração;
  2. Formulário Web;
  3. Validação de labels da página;
  4. Validação dos Campos do formulário;

Configuração

Configuração de um projeto usando maven é necessário o HtmlUnit juntamente com a utilização do Junit ou TestNG para execução dos testes.
Segue abaixo dependencias que foram usadas na contrução desse post.


<dependency>
  <groupId>net.sourceforge.htmlunit</groupId>
  <artifactId>htmlunit</artifactId>
  <version>2.17</version>
</dependency>

<dependency>
	<groupId>junit</groupId>
	<artifactId>junit</artifactId>
	<version>4.11</version>
</dependency>

Formulário Web

Vamos mostrar o formulário web utilizado para os teste com HtmlUnit, bem como alguns arquivos da aplicação em AngularJS.

Abaixo seguem os arquivos .js usados para construir uma pequena aplicação AngularJS e em seguida uma formulário simples html para executarmos nossos testes.

Basicamente o controller.js e constituido de dois arrays para mostrarmos os dados e duas funções, calculo de idade e inclusão de pessoas na tabela do formulário.

//app.js
var pessoasFormValidation = angular.module("appForm", []);

//controller.js
pessoasFormValidation.controller("ctrlPpessoasFormValidation", function($scope, serviceForm) {

	$scope.listaPessoas = [ {
		nome : 'Clayton',
		email : 'email@gmail.com',
		nascimento : new Date(1988, 04, 03, 0, 0, 0, 0),
		dataCorrente : new Date(),
		idade : 0,
		sexo : 'masculino',
	}, {
		nome : 'Christiane',
		email : 'email@gmail.com',
		nascimento : new Date(1990, 04, 03, 0, 0, 0, 0),
		dataCorrente : new Date(),
		idade : 0,
		sexo : 'feminino',
	}, {
		nome : 'Wilson',
		email : 'email@gmail.com',
		nascimento : new Date(2000, 04, 03, 0, 0, 0, 0),
		dataCorrente : new Date(),
		idade : 0,
		sexo : 'masculino',
	} ];
	
	
	$scope.listaSexo = [{
		tipo : 'masculino',
		}, {
		tipo :'feminino',
		},{
		tipo :'outros',
		}];
	
	$scope.addPessoas = function(pessoa) {
		
		//$scope.listaPessoas.push(people);
		$scope.listaPessoas.push(pessoa);
		delete $scope.pessoa;
	};
	
	
	$scope.calcular = function (pessoa) {
		
		//$scope.age = 19;
		
		$scope.idadePessoa = serviceForm.calculate(pessoa);
		$scope.pessoa.idade = $scope.idadePessoa.age;
		
		//$scope.idadePessoa = 19;
		//$scope.pessoa.idade = 19;
	};
	
	
	

});


//services.js
pessoasFormValidation.factory("serviceForm", function(config) {
	var _calculate = function(people) {
		
		var _nascimento = people.nascimento;
		var _dataCorrente = people.dataCorrente;		
		
		var _age = new Date(_dataCorrente).getFullYear() - new Date(_nascimento).getFullYear();
		
		return {
			age : _age,
		};
	};
	return {
		calculate : _calculate
	};
});

Abaixo nosso formulário web, o que foi usado nos testes. Veja que o formulário tem na sequência uma tabela, um input text de nome, um select para tipo de sexo, um input de email, dois campos de data, um input para a idade calculada e dois botões um de cálculo de idade e o outro para inserir linhas do formulário na tabela.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="appForm">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script
	src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>


<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/constants.js"></script>

<title>Teste com HtmlUnit</title>
</head>
<body ng-controller="ctrlPpessoasFormValidation">

	<form name="form">	
	
	 	<table id="idTabela">
		<thead>
			<tr>
				<th>Nome</th>
				<th>Email</th>
				<th>Data</th>
				<th>Data</th>
				<th>Idade</th>	
				<th>Sexo</th>					
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="pes in listaPessoas">
				<td>{{pes.nome}}</td>
				<td>{{pes.email}}</td>				
				<td>{{pes.nascimento}}</td>
				<td>{{pes.dataCorrente}}</td>
				<td>{{pes.idade}}</td>
				<td>{{pes.sexo}}</td>					
			</tr>
		</tbody>
	</table>	
	

		<p>
			<label id="lNome">Nome</label> <input type="text" name="nome" ng-model="pessoa.nome"	placeholder="Nome" ng-required="true" />
			<div ng-show="form.nome.$invalid">
				<span ng-show="form.nome.$error.required">Identificar Nome.</span>
				<span ng-show="form.nome.$error.text">Erro preenchimento Nome.</span>
			</div>
		</p>
		
		<p>		
			<select name="lSexo" id="lSexo"  ng-model="pessoa.sexo" ng-options="sexo.tipo for sexo in listaSexo" placeholder="Sexo" ng-required="true">
			tipo
			</select>		
			<div ng-show="form.nome.$invalid">
				<span ng-show="form.sexo.$error.required">Identificar Sexo.</span>
				<span ng-show="form.sexo.$error.text">Erro preenchimento Sexo.</span>
			</div>
		</p>	
		
		<p>
			<label id="lEmail">Email</label><input type="email" name="uEmail" ng-model="pessoa.email" placeholder="E-mail" ng-required="true" />
			<div ng-show="form.uEmail.$invalid">
				<span ng-show="form.uEmail.$error.required">Identificar Email.</span>
				 <span ng-show="form.uEmail.$error.email">Erro preenchimento Email.</span>
			</div>
		</p>	
			
		<!-- type text -->
		
			<p>
			<label id="lNascimento">Nascimento</label><input type="txt" name="dataNasc" ng-model="pessoa.nascimento" placehoder="mm/dd/yyyy" ng-required="true" />
			<div ng-show="form.dataNasc.$invalid">
				<span ng-show="form.dataNasc.$error.required">Preencha a data nascimento.</span>
				 <span ng-show="form.dataNasc.$error.date">Data inválida.</span>
			</div>
		</p>
		
			<p>
			<label id="lDCorrente">Data Corrente</label><input type="text" name="dataCorrente" ng-model="pessoa.dataCorrente" placehoder="mm/dd/yyyy" ng-required="true" />
			<div ng-show="form.dataCorrente.$invalid">
				<span ng-show="form.dataCorrente.$error.required">Preencher data corrente.</span>
					 <span ng-show="form.dataCorrente.$error.date">Erro no preenchimento da data corrente.</span>
			</div>
		</p>
		 
				

		<p>
			<label id="lCalcIdade">Calculo de Idade</label>
			<h3 id="" name="ageP" ng-bind='pessoa.idade' ng-required="false"></h3>
			<input id="idade" type="text" name="idade" ng-model='pessoa.idade' placehoder="idade" ng-required="false" disabled="disabled" />
			<div ng-show="form.idade.$invalid">
				<span ng-show="form.idade.$error.required">Data.</span>
					 <span ng-show="form.idade.$error">Invalida idade.</span>
			</div>
		</p>


<p>form.$valid = {{form.$valid}}</p><br/>

<button id="btnCalcular" name="btnCalcular" ng-click="calcular(pessoa)" ng-disabled="form.$invalid">Calcular</button>
<button id="btnAddPessoa" name="btnAddPessoa"  ng-click="addPessoas(pessoa)" ng-disabled="form.$invalid">Inserir</button><br/>

	</form>


</body>
</html>

Validação de labels da página

Nesse item vamos colocar dois testes, um para fazer a validação do título da pagina web e um outro teste para executar a validação dos labels da tela. Há comentários no codigo para explicar o que cada linha faz.

@Test
	public void verificaTitulo() throws Exception {
				
		//Pode usar um browser especifico usar a enumeração BrowserVersion.CHROME, etc...
		try (final WebClient webClient = new WebClient()) {
					
			//pode configurar propriedades especificas caso prefira
			webClient.getOptions().setJavaScriptEnabled(true);
			webClient.getOptions().setCssEnabled(false);
			webClient.getOptions().setUseInsecureSSL(true);
			webClient.getOptions().setThrowExceptionOnFailingStatusCode(false);
			webClient.getCookieManager().setCookiesEnabled(true);
			webClient.setAjaxController(new NicelyResynchronizingAjaxController());
			webClient.getOptions().setThrowExceptionOnScriptError(false);
			webClient.getCookieManager().setCookiesEnabled(true);
			
				//acesso a pagina		
			final HtmlPage page = webClient.getPage("http://localhost:8080/htmlunittest/testForm.xhtml");
                        //recuperação do campo title da pagina para validar.
                        // validação em <title>Teste com HtmlUnit</title> na pagina
			Assert.assertEquals("Teste com HtmlUnit", page.getTitleText());

		
		}
	}

O exemplo abaixo valida cada label do formulário apresentado acima.


@Test
	public void verificaLabelTela() throws Exception {		
		
		try (final WebClient webClient = new WebClient(BrowserVersion.CHROME)) {
					
			
			webClient.getOptions().setJavaScriptEnabled(true);
			webClient.getOptions().setCssEnabled(false);
			webClient.getOptions().setUseInsecureSSL(true);
			webClient.getOptions().setThrowExceptionOnFailingStatusCode(false);
			webClient.getCookieManager().setCookiesEnabled(true);
			webClient.setAjaxController(new NicelyResynchronizingAjaxController());
			webClient.getOptions().setThrowExceptionOnScriptError(false);
			webClient.getCookieManager().setCookiesEnabled(true);
			
				//acesso a pagina web		
			final HtmlPage page = webClient.getPage("http://localhost:8080/htmlunittest/testForm.xhtml");
			Assert.assertEquals("Teste com HtmlUnit", page.getTitleText());			
			
			//recuperação do formulário da pagina web
			final HtmlForm form = page.getFormByName("form");
			
                        //recuperação de cada label da pagina e validação Assert.
			final HtmlLabel lNome = page.getHtmlElementById("lNome");
			Assert.assertEquals("Nome", lNome.getTextContent());
			final HtmlLabel lEmail = page.getHtmlElementById("lEmail");
			Assert.assertEquals("Email", lEmail.getTextContent());
			final HtmlLabel lNascimento = page.getHtmlElementById("lNascimento");
			Assert.assertEquals("Nascimento", lNascimento.getTextContent());
			final HtmlLabel lDCorrente = page.getHtmlElementById("lDCorrente");
			Assert.assertEquals("Data Corrente", lDCorrente.getTextContent());
			final HtmlLabel lCalcIdade = page.getHtmlElementById("lCalcIdade");
			Assert.assertEquals("Calculo de Idade", lCalcIdade.getTextContent());
			
			//outra forma de verificacao xpath
			final HtmlLabel xplNome = (HtmlLabel) page.getByXPath("//label[@id='lNome']").get(0);
			Assert.assertEquals("Nome", xplNome.getTextContent());		
		
		}
	}

Validação dos Campos do formulário

Agora vamos um pouco mais a frente para executar ações de clicks, validação em tabelas para o formulário apresentado nesse post. O codigo esta com alguns cometários para explicar cada linha de codigo.


@Test
	public void submeterForm() throws Exception {
	    try (final WebClient webClient = new WebClient(BrowserVersion.CHROME)) {
	    	
	    	
	    	webClient.getOptions().setJavaScriptEnabled(true);
			webClient.getOptions().setCssEnabled(false);
			webClient.getOptions().setUseInsecureSSL(true);
			webClient.getOptions().setThrowExceptionOnFailingStatusCode(false);
			webClient.getCookieManager().setCookiesEnabled(true);
			webClient.setAjaxController(new NicelyResynchronizingAjaxController());
			webClient.getOptions().setThrowExceptionOnScriptError(false);
			webClient.getCookieManager().setCookiesEnabled(true);

	        // recupera pagina web
	    	final HtmlPage page = webClient.getPage("http://localhost:8080/htmlunittest/testForm.xhtml");

               //recupera form
	       final HtmlForm form = page.getFormByName("form");

	        
	        //preenchimento dos itens do formulario
	        
	        //recupera input do form
	        final HtmlTextInput textInpNome= form.getInputByName("nome");
	        //preenche valor no input
	        textInpNome.setValueAttribute("Clayton C");
	        //verifica valor preenchido
	        Assert.assertEquals("Clayton C", textInpNome.getText());
	        
	        //preenchimento e validação
	        final HtmlTextInput textInpEmail = form.getInputByName("uEmail");
	        textInpEmail.setValueAttribute("meuemail@gmail.com");
	        Assert.assertEquals("meuemail@gmail.com", textInpEmail.getText());
	        
	        //preenchimento e validação de um elemento <select> pelo HtmlUnit        
	        final HtmlSelect select = form.getSelectByName("lSexo");
	        //HtmlOption option = select.getOptionByValue("1");
	        HtmlOption option = select.getOptionByText("masculino");
	        select.setSelectedAttribute(option, true);
	        Assert.assertEquals("masculino", select.getSelectedOptions().get(0).asText());      
	        
	     	//preenchimento e validação        
	        final HtmlTextInput dataInpNasc = form.getInputByName("dataNasc");
	        dataInpNasc.setValueAttribute("03/04/1990");
	        Assert.assertEquals("03/04/1990", dataInpNasc.getText());
	        
	        //preenchimento e validação
	        final HtmlTextInput dataInpCorrente = form.getInputByName("dataCorrente");
	        dataInpCorrente.setValueAttribute("03/04/2015");
	        Assert.assertEquals("03/04/2015", dataInpCorrente.getText());       
	           
	          
                // Nessa parte vamos recuperar o botão calcular Idade e aciona-lo      
	        //acionar botao calcular e verificar idade
	        final HtmlButton buttonCalcular = form.getButtonByName("btnCalcular");	
                buttonCalcular.click(); 

                //caso a execução resulte em um uma nova pagina, é possivel receber a nova pagina e seguir
                //com as validações
                /*final HtmlPage page2 = buttonCalcular.click();*/       
	        
	      
	        //verifica o retorno do calculo de idade
	        final HtmlTextInput textInpIdade1 = form.getInputByName("idade");	        
	        Assert.assertEquals("25", textInpIdade1.getText());        
	 
	        
	        //acionar botao de adicionar a tabela 
	        final HtmlButton buttonAddPessoa = form.getButtonByName("btnAddPessoa");
	        buttonAddPessoa.click();
	        
	        //Recupera tabela onde foi incluido os dados do formulario
	        final HtmlTable table = (HtmlTable) page.getHtmlElementById("idTabela");
	        System.out.println("Cell (4,0)=" + table.getCellAt(4,0).asText());
                //Acesso a ultima linha inserirda na tabela na primeira coluna para validar se o campo
                //foi inserirdo corretamente
	        Assert.assertEquals("Clayton C", table.getCellAt(4,0).asText());


	        //varrer toda tabela	        
	        //final HtmlTable table = page.getHtmlElementById("idTabela");
	        //for (final HtmlTableRow row : table.getRows()) {
	        //    System.out.println("linha");
	        //    for (final HtmlTableCell cell : row.getCells()) {
	        //        System.out.println("celula: " + cell.asText());
	        //    }
	       //} 



              
       
	    
	    }
	}


Nesse post mostramos alguns exemplos do uso em formulários com HtmlUnit, porém e possível fazer ainda validações de alert, frames.

About the author

Clayton Casteli Atua com desenvolvimento de software, J2EE, C/C++, IBM BPM. É entusiasta de novas tecnologias, principalmente open source. Formado em Engenharia da Computação pela PUCCAMP-SP, Pós-Graduado pela UNICAMP em Engenharia de Software com enfase em SOA e Pós-Graduado em Business Intelligence pelo IBTA.

Be Sociable, Share!

Protected by WP Anti Spam