Tips en tricks voor Protractor

Vanuit PerformanceArchitecten doen we graag aan kennisdeling. Van tool reviews tot aan complete best practices maar ook van een aantal simpele tips en tricks die je kan gebruiken in je dagelijkse werk. Vandaag in die laatste categorie voor gebruikers van Protractor:

(Javascript) timing issues en het managen van de volgorde van uitvoeren van actions.

Inleiding

Je kent het waarschijnlijk wel. Foutmeldingen omdat velden niet gevonden worden of tests die slagen terwijl deze niet zouden moeten slagen omdat de timing van je testscripts niet klopt. De volgende tips helpen om je tests meer stabiel en minder risicovol te maken.

ExpectedConditions

Voorbeeld: Wanneer een pagina af en toe te laat gerenderd wordt en daardoor bepaalde velden nog niet in beeld zijn dan kan het gebeuren dat je test faalt als je op die velden een actie uitvoert. Een browser.sleep (x_seconden) ertussen is een oplossing maar brengt ook een aantal risico’s met zich mee. De test kan ernstig worden vertraagd wanneer de sleep vaak gebruikt wordt. En wie garandeert dat die x_seconden genoeg is?

Een alternatief is de ‘Expected Conditions’ library (protractor API). De library bevat onder andere de ‘elementToBeClickable’ functionaliteit waarin je een element en een maximum aantal tijd tot aan de timeout kunt meegeven.

Voorbeeld:

const { browser, ExpectedConditions: EC } = require('protractor');

await browser.wait(EC.elementToBeClickable(sharedSelectors.buttonSend), 5000); 

Er zal gewacht worden tot de ‘buttonSend’ aanwezig is en je er op kunt klikken waarna de test verder loopt. Mocht de ‘buttonSend’ niet binnen de 5 seconden aanwezig zijn, dan zal er een timeout melding worden getoond. Zet de timeout dan ook ruim genoeg?

API: https://www.protractortest.org/#/api?view=ProtractorExpectedConditions

Async/await

In protractor test-scripts (asynchroon) kunnen teststappen door elkaar heen gaan lopen qua volgorde. Een manier om de volgorde te managen is de promise manager dat de webdriver (hetgeen waar Protractor bovenop draait) voorbrengt. Omdat de promise manager niet soepel werkt en langzamerhand verouderd raakt, is de ‘async await’ toepassing een ideaal alternatief.

Voorbeeld:

const putValueInAmountFieldAndClickSend = async amount => {
        await browser.wait(EC.elementToBeClickable(sharedSelectors.buttonSend), 5000);
        await pageBonds.amountNominalInput.clear();
        await pageBonds.amountNominalInput.sendKeys(amount);
        await helper.clickSendButton();
    } 

Wat gebeurd hier?

In de functie roepen we de ‘async’ functionaliteit aan. Vervolgens kunnen/moeten we voor elke actie een ‘await’ plaatsen. Tijdens het draaien van het script zal protractor wachten tot de actie geslaagd is en doorstromen naar de volgende actie. Wanneer er meerdere actie’s onder elkaar in de functie voorkomen, dan moet overal een ‘await’ geplaatst worden om geen problemen te veroorzaken. Wanneer niet overal een ‘await’ wordt geplaatst kan protractor de weg kwijtraken maar de testrun wel als ‘geslaagd’ bestempelen terwijl er bepaalde stappen niet zijn uitgevoerd.

Denk erom dat bij het toepassen van ‘async await’ de node.js versie groter of gelijk is dan versie 8.0 en de Jasmine versie groter of gelijk dan 2.7. Zet daarnaast de volgende regel in je protractor config file: SELENIUM_PROMISE_MANAGER: false . De ‘async await’ functionaliteit werkt namelijk niet goed wanneer de control flow aanstaat.

Ben jij hier ook weleens tegen aan gelopen, of heb jij wellicht een alternatieve oplossing gevonden? Heb je er wat aan gehad? We horen graag je commentaar!