End to End Testing

By definition, unit-tests don't test interactions between modules and some side-effects.

The whole application must also be tested automatically.

Protractor

Protractor is an e2e (end-to-end) testing framework developed by the AngularJS team.

It can test AngularJS or Angular web applications but also non-AngularJS web applications.

Protractor uses the Selenium webdriver to communicate with browsers and control them.

Protractor tests are written in JavaScript (or TypeScript) with Jasmine.

describe('angularjs homepage todo list', () => {

    it('should add a todo', () => {
    
        browser.get('https://angularjs.org');

        /* Add an element. */
        element(by.model('todoList.todoText')).sendKeys('write first protractor test');
        element(by.css('[value="add"]')).click();

        /* Check todo list content. */
        const todoList = element.all(by.repeater('todo in todoList.todos'));
        expect(todoList.count()).toEqual(1);
        expect(todoList.get(0).getText()).toEqual('write first protractor test');

    });

});

Page objects:

Factorize each view's (or page) logic in a dedicated and reusable class (separation of concerns).

import { PageTodo } from './pages/page-todo';

describe('angularjs homepage todo list', () => {

    it('should add a todo', () => {

        const pageTodo = new PageTodo();
    
        browser.get(pageTodo.pageUrl());

        /* Add an element. */
        pageTodo.addTodo({title: 'write first protractor test'});

        /* Check todo list content. */
        const todoElementList = pageTodo.todoElementList();

        expect(todoElementList.count()).toEqual(1);
        expect(todoElementList.get(0).getText()).toEqual('write first protractor test');

    });

});

Cross-Browser & Cross-Device Test Automation with Browserstack

Browserstack is a cloud service with a large set of remotely controllable devices and browsers.

With Browserstack, you can run your Protractor tests on mobile and desktop.

https://www.browserstack.com

Most Reliable App & Cross Browser Testing PlatformBrowserStack

Browserstack records logs, captures screenshots and records testing videos.

Apps can also be tested manually on Browserstack.

You can open a tunnel with Browserstack to test locally hosted applications.

Cypress

Cypress is another JavaScript End to End Testing Framework.

It doesn't use Selenium so it's not cross-browser.

With Cypress, it is easier to have a Test-Driven Development approach as tests can be re-run automatically on every change without having to respawn a browser.

https://www.cypress.io/

JavaScript End to End Testing FrameworkJavaScript End to End Testing Framework | cypress.io testing tools

Takeaways

Cross-Browser & Cross-Device E2E Testing Automation Blog Post

https://blog.wishtack.com/2015/05/07/cross-browser-testing-test-automation-with-protractor-and-browserstack/

Cross Browser Testing & Test Automation with Protractor and BrowserstackWishtack

Boilerplate to run your first protractor tests

https://github.com/wishtack/wt-protractor-boilerplate

GitHub - wishtack/wt-protractor-boilerplate: 👴🏻 A boilerplate to run e2e tests using gulp, protractor and browserstack on AngularJS and non-AngularJS web apps.GitHub

Useful modules

https://github.com/wishtack/wt-protractor-runner

GitHub - wishtack/wt-protractor-runner: ⛔️ Gulp task to run multiple protractor configurations sequentially, useful for cross-browser testingGitHub

https://github.com/wishtack/wt-protractor-utils

GitHub - wishtack/wt-protractor-utils: 👴🏻 Protractor utils to help you generate capabilities configuration for platforms like browserstack.GitHub