web-dev-qa-db-fra.com

l'élément mouseover ne fonctionne pas avec un rapporteur

J'ai une directive qui produit la structure html suivante:

<div class="popover ng-isolate-scope" ng-mouseover="toggle(true)" ng-mouseleave="toggle(false)" popover="" label="hover time!" trigger-class="button" content-class="specialContentClass">  
  <span id="thing" class="popover-trigger button">hover time!</span>
  <div ng-transclude="" ng-show="show" class="popover-content ng-hide">
    <div class="ng-scope">Popover content </div>
  </div>
</div>

Le code fonctionne bien et le contenu popover est correctement affiché lorsque vous passez la souris manuellement à l'aide d'un navigateur.

J'essaie de tester la fonctionnalité de survol avec le test de rapporteur suivant:

 it('should display the popover-content on mouseover', function() {
     browser.get('http://localhost:9000/');
     browser.actions()
     .mouseMove(element(by.css('.popover')).find()).perform();
     expect(element(by.css('.popover-content'))
     .isDisplayed().toBeTruthy());
 });

Le test semble fonctionner, le navigateur s'ouvre, mais le contenu contextuel ne s'affiche pas avant la fermeture du navigateur. Je suis donc presque certain que le bit mousemove ne fonctionne pas pour une raison quelconque. Ce qui suit est ensuite émis dans le terminal:

launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 failed 1 test(s)
[launcher] overall: 1 failed spec(s)
[launcher] Process exited with error code 1
ycompu:angular ycompu$

J'ai lu la documentation et utiliser browser est certainement la bonne façon d'aborder ce test. Je suis perdu car la syntaxe me semble correcte.

javascriptangularjstestingprotractorend-to-end
13
Mike Rifgin

Un problème possible est que vous devez le faire attendre que Angular se charge :

it('should display the popover-content on mouseover', function() {
     browser.get('http://localhost:9000/');
     browser.waitForAngular();

     browser.actions().mouseMove(element(by.css('.popover'))).perform();
     expect(element(by.css('.popover-content')).isDisplayed()).toBeTruthy();
 });

J'ai également supprimé l'appel find() (je ne sais pas si vous en avez vraiment besoin ici) et corrigé l'ordre de fermeture des parenthèses à la dernière ligne.

28
alecxe

Utilisez browser.waitForAngular() avant d'appeler browser.actions().mouseMove("mouseoverelement").perform();... car vous devez attendre la charge angulaire. 

it('mouseover test', function() {
     ....
     ....
     browser.waitForAngular();
     browser.actions().mouseMove(element(by.css('#mouseoverelement'))).perform();
     expect(element(by.css('#mouseoverelement')).isDisplayed()).toBeTruthy();
 });
0
Ajitabh Ranjan