CodeceptJS Presentatie

Transcript

1. CodeceptJS Selenium framework voor NodeJS Jeroen Huisjes
2. Wat gaan we doen NodeJS, Yarn en VS Code installeren Uitleg NodeJS en Yarn CodeceptJS project starten Werken met CodeceptJS Hoe om te gaan met PageObjects Als er tijd over is GitHub en Sourcetree behandelen
3. NodeJS installeren Download NodeJS nodejs.org Alles aangevinkt houden in de installatie
4. Yarn installeren Download Yarn yarnpkg.com
5. VS Code installeren Download VS Code code.visualstudio.com
6. Uitleg NodeJS 1 Oude Situatie
7. Nieuwe Situatie
8. Uitleg Yarn Yarn is een dependency manager voor het beheer van JavaScript projecten. Yarn doet dit sneller dan NodeJS en is beter in het bijhouden van versies. Ook zijn de commands in de command line beter te begrijpen. Hier meer uitleg: https://shift.infinite.red/npm‐vs‐yarn‐cheat‐sheet‐8755b092e5cc
9. Wat is CodeceptJS? CodeceptJS is een test framework dat functioneert als schil om andere test frameworks met als voordeel dat je maar 1 syntax hoeft te leren. CodeceptJS is dus eigenlijk een vertaler waardoor je dus met 1 syntax meerdere frameworks aan kunt sturen.
10. CodeceptJS kan de onderstaande frameworks aansturen. Je kunt zelf andere frameworks toevoegen.
11. De syntax van CodeceptJS Feature('CodeceptJS Demonstration'); Scenario('submit form successfully', (I) => I.amOnPage('www.google.nl') I.fillField('Email', 'hello@world.com') I.fillField('Password', '123456') I.checkOption('Active') I.checkOption('Male'); I.click('Create User') I.see('User is valid') I.dontSeeInCurrentUrl('/documentation') });
12. Een CodeceptJS project starten Maak een map aan met de naam: ordinatest Shift + rechtermuisknop op die map "Open command window here﴾of Nederlandse variant﴿" type: npm init
13. Open de map: ordinatest in Visual studio code Klik op package.json en pas het bestand aan zoals het plaatje hieronder Open de commandline op de map: ordinatest Type: Yarn add codeceptjs Type: npm start In de commandline type: yarn add protractor
14. Selenium server installeren Open de commandline Type: npm ‐g install selenium‐standalone Type: selenium‐standalone install Type: selenium‐standalone start De selenium server is nu klaar voor gebruik https://www.java.com/nl/download/
15. Je eerste test schrijven Maak in VS Code een nieuw bestand aan in de root folder van ordinatest voorbeeld_test.js Feature('google'); Scenario('test something', (I) => { }); Ga naar: codecept.io/helpers/Protractor/ om de syntax van Codecept te bekijken.
16. Voorbeeld test Feature('Movie Finder'); Scenario('Zoek film', (I) => { I.amOnPage('https://movies‐finder.firebaseapp.com/'); I.click('a[ng‐reflect‐router‐link*="Action"]'); I.wait(5); });
17. Test uitvoeren Ga naar je commandline met als rootfolder ordinatest type npm test om de test die je net hebt aangemaakt te draaien in chrome. Als alles goed is gegaan krijg dit te zien:
18. Test case Ga naar de film Deadpool Controleer de titel Controleer dat Ryan Renolds in de film speelt Klik op Ryan Renolds Klik op Green Lantern Controleer dat de film een 5.1 scoort De onderstaande website geeft een uitleg over hoe je CSS selectors gebruikt. http://www.seleniumeasy.com/selenium‐tutorials/css‐selectors‐ tutorial‐for‐selenium‐with‐examples
19. Probeer wat dingen uit met CodeceptJS De onderstaande website is een leuke website om even wat te gaan spelen met CodeceptJS http://www.syntaxsuccess.com/angular‐2‐samples/
20. Page Object Maak een js bestand aan in een nieuw map genaamd pages 'use strict'; let I; module.exports = { _init() { I = actor(); }, // setting locators form: { klantnummer: "input[name=klantnummer]", }, knoppen: { verzenden: "//*[contains(@ng‐click, 'submit')", }, verify: { klantnummer: "//*[contains(@ng‐show, 'klantnummer')]/div", } }
21. Voeg het volgende stukje code toe aan codecept.json "include": { "voorbeeld": "./pages/voorbeeld.js", }, Voeg je Page Object toe in je test bestand Scenario('voorbeeld', (I, voorbeeld) => { Voeg je Page Object toe als selector I.click(voorbeeld.knoppen.verzenden);