• In this blog post I will show how to add Cypress E2E tests instead with minimum effort (and TypeScript support)!
• Recently, our team at Cypress has added TypeScript support to our Test Runner via plugins and preprocessors.
• When running Cypress for the very first time, it scaffolds e2e tests in a folder.
• Open Cypress again, click on in the list of tests and let it watch the tests in the spec file.
• The Protractor tests use a page object to abstract the implementation (like the exact page selectors) from the test.

@techjunkiejh: An Alternative to Protractor for Angular Projects #javascript #Angular

Fans of Angular CLI get Protractor end-to-end tests generated with each scaffolded project. In this blog post I will show how to add Cypress E2E tests instead with minimum effort (and TypeScript support)!

ng new

is a huge time saver. Just 4 commands give you a complete “Hello Angular” application with all recommended practices. Let us make an app – you can find the results in bahmutov/ng-cli-hello repository.

npm install -g @angular/cli ng new ng-cli-hello cd ng-cli-hello ng serve

in the browser to see the running application – it even supports hot module reload!

Our application has a greeting, Angular logo image and a few links.

End-to-end tests are automatically scaffolded using Protractor. When we execute

ng e2e

command, Angular CLI takes care of all installation details, then runs the tests in the real browser (Chrome).

The single test in the file e2e/app.e2e-spec.ts confirms the greeting text.

import { AppPage } from ‘./app.po’ ; describe ( ‘ng-cli-hello App’ , ( ) = > { let page: AppPage; beforeEach ( ( ) = > { page = new AppPage ( ) ; } ) ; it ( ‘should display welcome message’ , ( ) = > { page. navigateTo ( ) ; expect (page. getParagraphText ( ) ) . toEqual ( ‘Welcome to app!’ ) ; } ) ; } ) ;

Note the use…