11

Egal was ich mache Ich kann den Hover-Status nicht funktional mit Winkelmesser Tests bekommen. Der folgende Code ist halbFunktions ..Test-Schwebezustand ändert sich mit Winkelmesser

  • Funktioniert gut in Firefox
  • Dies funktioniert nur, wenn ich den Bereich in den Blick mit Chrome blättern.
  • schlägt in Phantom JS

obj 
    .getCssValue('color') 
    .then(function (color1) { 
    browser 
     .actions() 
     .mouseMove(obj) 
     .perform() 
     .then(function() { 
     obj 
      .getCssValue('color') 
      .then(function (color2) { 
      expect(color1) 
       .not 
       .toEqual(color2); 
      }); 
     }); 

Antwort

1

Lösung 1:

nur eine einfache Hover-Funktion für Ihr Objekt verwenden

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p onmouseover="colorin(this)" onmouseout="colorout(this)"> 
 
Testing colorin and colorout function for mouse hover 
 
</p> 
 

 

 
<script> 
 
function colorout(x) { 
 
    x.style.color = "#000000"; 
 
} 
 

 
function colorin(x) { 
 
    x.style.color = "#7FAF00"; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

Mögliche Lösung 2:

Versuchen Sie, diese Version mit waitForAngular();

obj 
    .getCssValue('color') 
    .then(function (color1) { 
    browser.waitForAngular(); 
    browser 
     .actions() 
     .mouseMove(obj) 
     .perform() 
     .then(function() { 
     obj 
      .getCssValue('color') 
      .then(function (color2) { 
      expect(color1) 
       .not 
       .toEqual(color2); 
      }); 
     }); 

Mögliche Lösung: 3:

ersetzen .mouseMove(obj) mit .mouseMove(browser.findElement(protractor.B.id('foo'))) und passen Sie es Ihren Code

+0

Diese Seite verwendet keine Angular –

+0

Ok ... Sie könnten dann einfach die erste Lösung verwenden oder '.onmouseover' und' .onmouseout' in Ihre aktuelle Funktion anstelle von '.mouseMove' integrieren Dieses Problem scheint für Winkelmesser bekannt zu sein https://github.com/angular/protractor/issues/159 – intika

+0

Richtig, aber das würde erfordern JS, alles zu tun, was CSS tut, das ist ein Nicht-Starter –

3

Wir haben festgestellt etwas ähnliches vor kurzem Sie können für Winkel warten müssen. im Grunde warten bis zu 5 Sekunden

browser.wait(waitForCssValue(obj, 'color', color2), 5000); 

Hier sind wir:

Was mir war für ein Element zu Warte half einen bestimmten CSS-Wert zu haben, mit browser.wait():

function waitForCssValue (elementFinder, cssProperty, cssValue) { 
    return function() { 
     return elementFinder.getCssValue(cssProperty).then(function (actualValue) { 
      return actualValue === cssValue; 
     }); 
    }; 
}; 

Nutzungs für einen CSS color Wert gleich color2 sein. Wenden Sie den Wait-Call direkt an, nachdem Sie das Element angezeigt haben.


Auch ich erinnere mich, dass in den Blick Scrollen half auf SO ähnliche Probleme zu lösen:

browser.executeScript("arguments[0].scrollIntoView();", obj); 

Maximieren Browser-Fenster auch helfen können, tun wir es in der Regel in onPrepare():


Zusätzliche Anmerkung über PhantomJS:

Zu allererst Winkelmesser Entwickler empfehlen gegen Lauf protrator End-to-End-Tests mit PhantomJS:

Hinweis: Wir empfehlen gegen PhantomJS für Tests mit Winkelmesser verwenden. Es gibt viele gemeldete Probleme mit PhantomJS Abstürzen und Verhalten anders als echte Browser.

von Abgesehen davon finden Sie unter:

Hier Ich versuche, auf den Punkt zu kommen, dass Sie das "Computer kann nicht in Phantom JS" Argument opfern sollte.

+0

Ich habe 'Browser versucht .executeScript', aber es funktioniert nicht; Irgendwelche Tricks darüber? –

+0

@KirkStrobeck danke fürs ausprobieren! Was sind die Symptome, siehst du, dass das Element im Browser fokussiert und schwebt? Irgendwelche Fehler? Hast du den "Warte" -Ansatz versucht? – alecxe