Dúvida - Interação com AngularJS

Galera tudo bem?

Estou usando Capybara e site_prism.

Estou passando por um problema que acredito que muitos já passaram. A aplicação na qual estou testando utiliza angularJS, o cenário é o seguinte:

1 - Clico na input text - > que abre uma lista com os resultados mais utilizados(também é possível pesquisar por esse campo)
2 - Os resultados aparecem em uma lista criada abaixo do campo
1 - Preciso clicar no primeiro elemento dessa lista.

alt text

Todas as vezes que eu clico no nessa input text, o ID do primeiro resultado muda. no Chrome consigo executar o teste mas no PhantonJs .

Fiz da da seguinte forma:

  name_field.set 'Cadastro de prazo de teste'
  dateField.set '03/11/2016'
  lawsuitCaso.click
  wait_until_optionLawsuitTerm_visible
  optionLawsuitTerm.click
  observation.set 'Observação de teste'

No Phanton Js, reclama na parte do

wait_until_optionLawsuitTerm_visible

alguém já passou por esse problema?

@Leandro-Ferreira , o Phanton “reclama” com qual mensagem?

Se o id sempre muda e é sempre o primeiro elemento, não funcionaria clicar para baixo e Enter?

@Bruno-Fernandes Acabei não especificando, estou utilizando o Capybara e site_prism

Por acaso ao aparecer essa lista, tu consegue pegar o que tem nela e clicar?
Ou tu está clicando “posicionalmente?”

@Ramses-Saccol-de-Almeida

Eu peguei o xPath da DIV da primeira opção e ai executo o click nela, dessa forma funciona no chrome, apenas.

Bom dia Leandro, tudo bem ?

Sugiro não utilizar muito o xPath para pegar os elements de sua aplicação. Isso pq na grande maioria das vezes as aplicações são alteradas (inclusão de novos elements, ou exclusão, etc) e você acaba tendo que refatorar o código dos seus testes. Com relação a sua dificuldade, você poderia nos mostrar o código-fonte desta DIV e os elements que ela possui ? talvez ficasse mais fácil de analisarmos e descobrirmos a solução.

@jonatasat Você indica capturar os campos por css ?

O código é esse:

<div class="field"> 
	<label class="label label-left ng-binding">				
		Processo ou caso <abbr title="Obrigatório">*</abbr>			
	</label>
	<div class="input input-icon one-span {} error" ng-class="getClass()" ng-disabled="getDisabled()" st-suggest-case="" st-validate="deadline.caseId != null"
					st-placeholder="Encontre processo ou caso" st-model="deadline.caseTitle" st-on-select="setCase" st-on-change="setCaseNull" st-span-class="one-span"> 

					<input type="text" placeholder="Encontre processo ou caso" ng-model="model" ng-change="changeIt()" ng-validate="isValid()" ng-disabled="getDisabled()" typeahead-on-select="selectIt($item)" typeahead="case.title for case in service.cases | filter:doFilter($viewValue) | limitTo:50"
						typeahead-template-url="template/casetypeahead.html" ng-focus="onFocus(true)" ng-blur="onFocus(false)" empty-typeahead="" st-typeahead-focus="" class="ng-valid ng-dirty ng-valid-parse ng-touched" aria-autocomplete="list" aria-expanded="true" aria-owns="typeahead-1382-1131"
						aria-activedescendant="typeahead-1382-1131-option-1">
						
		<ul class="suggest-list ng-isolate-scope" ng-class="{'suggest-w-type': matches.length > 0 &amp;&amp; matches[0].model.typeName.length > 0 }" ng-style="{display: isOpen()&amp;&amp;'block' || 'none', top: position.top+'px', left: position.left+'px'}"
						typeahead-popup="" id="typeahead-1382-1131" matches="matches" active="activeIdx" select="select(activeIdx)" query="query" position="position" template-url="template/casetypeahead.html" style="display: block; top: 23px; left: 8px;">


			<!-- ngRepeat: match in matches -->
			<li ng-repeat="match in matches" ng-class="{active: isActive($index)}" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" class="ng-scope">
				<div in-view="mustShow = $inview" ng-show="::mustShow" class="ng-scope">
					<a class="matching ng-binding" tabindex="-1" bind-html-unsafe="::('<div><span> ' + (match.label | typeaheadHighlight:query)+ '</span></div>')">
						<div><span> Processo de teste</span></div>
					</a>
					<a class="matching ng-binding" ng-show="::(match.model.lawsuitNumber != null)" tabindex="-1" bind-html-unsafe="::('<div><span> ' + (match.model.lawsuitNumber | typeaheadHighlight:query)+ '</span></div>')">
						<div><span> 123456789</span></div>
					</a>
					<span ng-show="::(match.model.file != null)" tabindex="-1" bind-html-unsafe="::('<div><span class=\'alt\'> ' + (match.model.file | typeaheadHighlight:query)+ '</span></div>')" class="ng-binding">
					<div><span class="alt"> </span></div>
					</span>
					<span ng-show="::(match.model.customerName != null)" tabindex="-1" bind-html-unsafe="::('<div><span class=\'alt\'> ' + (match.model.customerName | typeaheadHighlight:query)+ '</span></div>')" class="ng-binding">
					<div><span class="alt"> Cliente de teste</span></div>
					</span>
					<span ng-show="::(match.model.firstStakeholderName != null)" tabindex="-1" bind-html-unsafe="::('<div><span class=\'alt\'> ' + (match.model.firstStakeholderName | typeaheadHighlight:query)+ '</span></div>')" class="ng-binding ng-hide">
					<div><span class="alt"> undefined</span></div>
					</span>
					<div></div>
				</div>
			</li>
			<!-- end ngRepeat: match in matches -->
			<li ng-repeat="match in matches" ng-class="{active: isActive($index)}" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" class="ng-scope active">
				<div in-view="mustShow = $inview" ng-show="::mustShow" class="ng-scope">
					<a class="matching ng-binding" tabindex="-1" bind-html-unsafe="::('<div><span> ' + (match.label | typeaheadHighlight:query)+ '</span></div>')">
						<div><span> Astrea Software X Gustavo A</span></div>
					</a>
					<a class="matching ng-binding" ng-show="::(match.model.lawsuitNumber != null)" tabindex="-1" bind-html-unsafe="::('<div><span> ' + (match.model.lawsuitNumber | typeaheadHighlight:query)+ '</span></div>')">
						<div><span> </span></div>
					</a>
					<span ng-show="::(match.model.file != null)" tabindex="-1" bind-html-unsafe="::('<div><span class=\'alt\'> ' + (match.model.file | typeaheadHighlight:query)+ '</span></div>')" class="ng-binding">
					<div><span class="alt"> </span></div>
					</span>
					<span ng-show="::(match.model.customerName != null)" tabindex="-1" bind-html-unsafe="::('<div><span class=\'alt\'> ' + (match.model.customerName | typeaheadHighlight:query)+ '</span></div>')" class="ng-binding">
					<div><span class="alt"> Gustavo A</span></div>
					</span>
					<span ng-show="::(match.model.firstStakeholderName != null)" tabindex="-1" bind-html-unsafe="::('<div><span class=\'alt\'> ' + (match.model.firstStakeholderName | typeaheadHighlight:query)+ '</span></div>')" class="ng-binding ng-hide">
					<div><span class="alt"> undefined</span></div>
					</span>
					<div></div>
				</div>
			</li>
			<!-- end ngRepeat: match in matches -->
			
		</ul> <i class="fa fa-search" ng-click="iconClicked()"></i></div>
	<a ui-sref="main.folders-detail({'id': deadline.caseId})" ng-show="!isAdding &amp;&amp; !isEditing" class="link ng-binding ng-hide" href="#/main/folders/detail/"></a>
</div>

Acredito que dá pra utilizar o element(by.model(‘model’)) para clicar no input “Encontre processo ou caso” e depois o element.all(by.className(‘matching ng-binding’)) para pegar todas as opções existentes. Tendo a lista de opções é só percorrer por for ou utilizar o get(0), get(1) …

Observação: Eu utilizo o Protractor para escrever meus testes, mas acredito que os comandos sejam similares.

@jonatasat Po cara legal, vlw pela ajuda!

Eu não conhecia o Protractor Tests, você tem um projeto de exemplo ?

Leandro, infelizmente ainda não disponibilizei meus projetos na web, pois são códigos de uso restrito na empresa. Mas eu sempre me baseio no próprio site deles http://www.protractortest.org/ e no do Jasmine https://jasmine.github.io/2.0/introduction.html. Além de tirar dúvidas em alguns fóruns como este que estamos nos comunicando.
Outro site que possui um passo a passo bem interessante é http://ramonvictor.github.io/protractor/slides/#/.

Espero que ajude.

@jonatasat Legal! Vou procurar saber mais sobre. Muito obrigado!

Log in to reply

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