ProtractorJS for automated testing of Angular 1.x/2.x applications
Download as PPTX, PDF5 likes530 views
The document discusses ProtractorJS, a framework designed for automated testing of Angular applications using Selenium WebDriver. It highlights the advantages of using JavaScript and TypeScript for testing, including community support, simpler asynchronous handling, and compatibility with various test runners. ProtractorJS facilitates end-to-end testing by leveraging the same JSON WebDriver wire protocol as other bindings, allowing efficient synchronization with Angular applications.
ProtractorJS for automated testing of Angular 1.x/2.x applications
- 1. Selenium WebDriverJS based framework for automated testing of Angular 1.x/2.x applications OLEKSANDR KHOTEMSKYI https://xotabu4.github.io/website
- 2. Julie Ralph(Google) is one of the main contributors, made first commits in January 2013 Created as an answer to question: ”How to make end to end tests for AngularJS applications easier?” Now ProtractorJS reached version 4.x, with over 1300 commits, 5700 GitHub stars, 200 contributors
- 4. Easier than Java Thousands of libraries already exist for JS/NodeJS. Friendly community, tons of open source code. Package manager already included in NodeJS Much easier common code like JSON parsing, sending HTTP requests, and others Duck-typing, monkey-patching Tools are smaller, and project start is faster Newest versions of TypeScript or ECMAScript 6 makes code much easier to write and understand Same language for front-end, back-end and tests means that same code execution environment
- 5. JS is one of the most popular languages today, and TypeScript is as primary in Angular 2.0 https://dou.ua/lenta/articles/language-rating-jan-2016/ JAVA C# JavaScript PHP PythonC++ Ruby
- 6. Developed by Microsoft team Superset of JavaScript (includes JavaScript) Compiles to JavaScript (ECMAScript 3, 5 or 6) Optional types! This allows to have autocomplete in IDE Easier refactoring of code Has features that not yet in JavaScript specification (@Annotations, async/await) Compilation errors, instead of runtime errors in JavaScript
- 7. ProtractorJS Java Selenium WebDriver High-level framework Low-level automation library (not framework) Uses script languages: TypeScript or JavaScript or both same time Uses Java JasimineJS (test runner and assertions), SauceLabs/BrowserStack integration, basic reporting, interactive debugger, command line parameters, configuration files Node Package Manager shows ~628 results for ‘protractor’ Maven shows ~422 results for ‘selenium webdriver’ Asynchronous, uses own control-flow, and Promises objects Synchronous, traditional approach Ability to run tests in parallel Parallel running should be done with additional libraries/frameworks PageObjects are just objects with attributes and functions PageObjects require @FindBy annotations and PageObjectFactory usage. Plugins. Extra element locators. Mobile browsers support (with Appium). Mobile browsers support.
- 8. Test Runner (JasmineJS, Cucumber …) ProtractorJS Selenium JavaScript official bindings NodeJS environment Test Runner extensions Selenium Standalone Server (JAVA) Other JS modules HTTP JSON ChromeDriver GeckoDriver EdgeDriver SafariDriver Other drivers
- 9. • Runs on NodeJS 4.x, 5.x, 6.x • Can be used with different Test Runners (JasmineJS, CucumberJS, Mocha, others) • Can connect to browser using WebDriver server or directly (Chrome and Firefox only) • Supports all browsers that WebDriver does: Chrome, Firefox, Edge, Safari, Opera, PhantomJS and mobile • Angular 1.x and Angular 2.x ready!
- 10. One of the key features of ProtractorJS that it is uses same JSON WebDriver Wire protocol as other language bindings. This code will be executed as 3 separate JSON WebDriver Wire Protocol commands: Synchronizing with AngularJS application Locating element on the page Sending ‘click’ action for element
- 11. • Protractor uses ‘Wrapper’ pattern to add own features to standard WebDriver, WebElement, Locators objects Browser(WebDriver instance) + Inherited from WebDriver • getProcessedConfig • forkNewDriverInstance • restart • useAllAngular2AppRoots • waitForAngular • findElement • findElements • isElementPresent • addMockModule • clearMockModules • removeMockModule • getRegisteredMockModules • get • refresh • navigate • setLocation • getLocationAbsUrl • debugger • enterRepl • pause • wrapDriver actions touchActions executeScript executeAsyncScri pt call wait sleep getPageSource close getCurrentUrl getTitle takeScreenshot switchTo
- 12. ElementFinder + Inherited from WebElement• then • clone • locator • getWebElement • all • element • $$ • $ • isPresent • isElementPresent • evaluate • allowAnimations • equals • getDriver • getId • getRawId • serialize • findElement • click • sendKeys • getTagName • getCssValue • getAttribute • getText • getSize • getLocation • isEnabled • isSelected • submit • clear • isDisplayed • takeScreenshot
- 13. Protractor Locators + Inherited from WebDriver Locators• addLocator • binding • exactBinding • model • buttonText • partialButtonText • repeater • exactRepeater • cssContainingText • options • deepCss • className • css • id • linkText • js • name • partialLinkText • tagName • xpath
- 15. JavaScript is single threaded (mostly) To have possibility to do multiple tasks at once – JavaScript run them all in single thread, and quickly switch between them Async tasks are running in isolation. To make execution step by step – callbacks are used Callbacks are just functions, that will be called when async function is finished. It is like – “call this when you are done”. You can pass any arguments to them
- 18. Pattern to avoid callback hell, extension of callbacks Almost every function from API returns special object – Promise Promise is a object, that will be resolved to a value (any), or rejected if value can’t be returned
- 20. Do not try to write in synchronous manner! You should think differently when writing async code When you asserting results – promises automatically resolved. Do not worry to resolve promise before assertion To wait something on the page – use browser.wait() or browser.sleep() ES7 features are on their way! async/await will make our life much easier Be brave and good luck
- 22. https://gist.github.com/Xotabu4/f26afb9e24397c9d059bb984d30a6b0a Example of simple test case JAVA + Pure Selenium JAVA + JUNIT TypeScript + ProtractorJS + JasmineJS https://gist.github.com/Xotabu4/dcfe83bc98ad304f58f3b05de9cd6c69
- 23. https://gist.github.com/Xotabu4/79ece1d104f2557a70cd079b62f46f45 Example of simple pageObject pattern usage JAVA + Selenium PageObjectFactory (@FindBy) TypeScript + ProtractorJS https://gist.github.com/Xotabu4/a9334f22933d1d6a16c820ccb4bd6635
- 25. And useful links: Protractor site: http://www.protractortest.org Promises, WebDriver Control Flow documentation: http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium- webdriver/lib/promise.html Gitter chat: https://gitter.im/angular/protractor StackOverflow(top questions): http://stackoverflow.com/questions/tagged/protractor?sort=votes&pageSize=20 GitHub: https://github.com/angular/protractor TypeScript documentation: https://www.typescriptlang.org/docs/tutorial.html ES6 features: http://es6-features.org/ Protractor TypeScript example: https://github.com/angular/protractor/tree/master/exampleTypescript OLEKSANDR KHOTEMSKYI https://xotabu4.github.io/website 2016
Editor's Notes
- #3: Последняя 4.4
- #7: Мое мнение – для новых проектов использовать уже TypeScript, старые можно частично мигрировать на TypeScript, или оставить как есть. ПОКАЖИ ВИДЕО!!!
- #9: Здесь важно сказать что протрактор работает по точно такому же протоколу как и Java bindings. То есть в браузере разницы видно не будет. + javascript бингинги официальные, и поддерживаются практически наравне с джавашными и остальными. WebDriver wire protocol
- #10: Protractor element EXTENDS WebDriverJS element, so all functions are accessible.
- #11: Here is exampe of simple Protractor interaction with the page: First, Protractor tells the browser to run a snippet of JavaScript. This is a custom command which asks Angular to respond when the application is done with all timeouts and asynchronous requests, and ready for the test to resume. Then, the command to find the element is sent. Finally the command to perform a click action is sent. Summary: Protractor uses the same API to manipulate browser as any other language bindings, so browser won’t notice any difference here
- #12: Protractor element EXTENDS WebDriverJS element, so all functions are accessible.
- #13: Protractor element EXTENDS WebDriverJS element, so all functions are accessible.
- #14: ProtractorBy.prototype.deepCss - Find an element by css selector within the Shadow DOM. ProtractorBy.prototype.options - Find an element by ng-options expression.
- #15: Тут рассказать про асинхронность и контрол флоу Больше всего у людей которые начинают переходить в мир JS взрывает мозг именно асинхронность. Попытаемся рассказать основные моменты
- #19: Это вернет Promise, который станет или текущим именем пользователя, или пустой строкой, в случае если такого элемента не существует.
- #23: Explicit creating and closing of browser is needed
- #24: Explicit creating and closing of browser is needed