2017-07-27 2 views
0

Es sei schriftlich oder einen Test zu überprüfen, ist der Befehlscode:Im Magellan/Nightwatch-Framework, wie wird eine CSS-Gliederung für ein Element festgelegt?

pToggleMyCoolToggle: function() { 
    var selectors = this.elements; 

    return this 
    .getEl(selectors.myCoolCheckbox.selector) 
    .moveToEl(selectors.myCoolCheckbox.selector) 
    .clickEl(selectors.myCoolCheckbox.selector); 
} 

Wie kann dieses Element auf dem Browser mit einem Umriss mit CSS angezeigt werden:

outline: 3px dotted orange 

durch einen Code zur Ergänzung der über Befehl mit den Methoden von Magellan/Nightwatch?

+0

haben Sie versucht .injectScript()? – QualiT

+0

gibt es einen Weg, um nur das HTML-Element zu bekommen, so dass ich einfach nur den Inline-Stil 'el.sytle =" outline: 3px dotted orange "'? Ich nehme an, jQuery ist nicht aktiv, sonst könnte ich '$ (el) .css ({outline:" 3px dotted orange "});' –

+0

Es ist keine allgemeine Erwartung, dass ein automatisierter Test * die HTML-Elemente/Attribute * modifizieren würde direkt. Aber, antwortete. – QualiT

Antwort

0

Verwenden Sie einfach .execute

client.execute(function(){ 
    document.getElementById('idYouWantToTarget').style.border="3px dotted orange"; 
}) 
+0

Ich musste 'this.client' verwenden oder sonst ist es nicht definiert ... aber dann gab es auch' ✖ TypeError: this.client.execute ist keine Funktion' –

+0

eigentlich ideal, könnte es durch etwas wie gemacht werden 'this.getDOMEL (selectors.myCoolCheckbox.selector) .style.outline =" 3px dotted orange ";' Es ist auch ein bisschen komisch, dass es wie OOP aussieht, aber für 'this.getEl (selectors.myCoolCheckbox.selector)' klingt als würdest du ein Element bekommen und es zurückgeben, und dann im Code wird 'moveToEl (selectors.myCoolCheckbox.selector)' auf diesem Element aufgerufen ... aber warum musst du den Selektor erneut spezifizieren? Ich dachte, der übliche OOP-Weg wäre so etwas wie 'farm.getCow(). Essen()' - normalerweise würde man nicht sagen 'farm.getCow (cowSelector) .eat (cowSelector) ' –

+0

Für Ihre erste Frage zu' this.client ', wenn Sie es im Kontext von etwas anderem als einem Testobjekt verwenden ~ module.exports = new Test ({ }) ~, sagen wir, ein pageObject, yeah, es ist anders gemacht. Ich bin ein Fan von Testobjekten, und die Seite obj funktioniert einfach nicht für die Arten von Apps, die ich teste. In Bezug auf Selektoren weiß ich nicht, worüber du mit getEl sprichst. – QualiT

0

Ich fand nur, dass der Name selectors.myCoolCheckbox.selector von einigen Amateur geschrieben. Es sollte wirklich paymentPage.useCreditCardRadio.selector sein. So gibt das letzte selector an, was der CSS-Selektor ist.

Die Linie selectors = this.elements ist auch sehr irreführend. selectors ist nicht die "Elemente". Es könnte sein paymentPage = this.elements und paymentPage hat viele Eigenschaften, einschließlich einer useCreditCardRadio. Oder es könnte paymentPageElements = this.elements sein, was bedeutet, dass paymentPageElements ein Objekt ist, das alle Elemente enthält. Dieses Beispiel zeigt also, wie sich die Benennung auf die Programmierung auswirkt, für alle Personen, die den Code in Zukunft bearbeiten oder bearbeiten müssen.

Als Ergebnis sollten Sie in der Lage sein

var el = document.querySelector(paymentPage.useCreditCardRadio.selector); 

zu verwenden, und wenn Sie das Element haben, können Sie den Umriss, um es hinzuzufügen.

Verwandte Themen