Automated E2E Test for a Commercial Angular Webapp

E2E testing on Narin web application

About the product

it’s an webapplication for managing and creating secure network

About E2E testing

The application uses angular, and to perform end-to-end tests we’re using protractor as tool which can be found by npm package management.

Full documentation from base and the whole performed procedure to run the test are provided on thisdocumentation. This will help you to install, run and have some optional features on protractor.

Scenarios

Test cases are besed on the scenarios which are available on thisgoogle doc. Details about this scenarios format is provided in./scenarios/scenarios.mdfile. Raw scenarios are also available in docx files in./scenarios/.

Project structure

  • protractor.conf.js

    have the basic configuration to run the test.

  • specs

    directory that have all the specs and needed moudules

    • basic-modules

      Directory that have all the basic module which are needed in different test cases

    • page-object

      directory that have pageObject peer to any page on the website, each pageObject comes with elements and critical function in that page.

  • scenarios

    directory that contain which scenarios are handled, what are the stats and which format do the scenarios follow.

  • out

    directory that holds the documentation of the E2E test project, documentation is accessible from theindex.htmlfile

  • resault

    every test run ended in result which will be kept in a directory by its run time, all of these test result are in this directory.

How these test are written

  • each test suite start withtestname.spec.jssaved under thespecsdirectory.testnameshould indicate which page get tested by for exampleobjects->addressis to test the address page on the webApp.

  • due the page that is being tested, it need the matching page object that have all the page main elements and functions. page object should be import to the test files from thepage-objectdirectory. if the matching page object doesn’t exist, it should be created in the mentioned directory usingpageName.pageObject.jsformat.

  • common elements and some global functions are available inbasic-modulesmodules. feel free to use them by importing to your test suite. some configuration for your test are inenviromentVariablesmodule that you can modify.

  • set the desired protractor configuration inprotractor.conf.jsand then you’re good to go.

Code documentation

A full code documentation is also provided in./Documents/index.htmlwhich is created withJSDOC 3.5.5.

Issue report

  • protractor is suppose to test angular web pages, but due to (maybe zone.js) problem protractor can’t find angular on the Narin webApllication so we turn thewaitForAngularEnabledoff by change its valuefalsewhich basically turn the protractor main feature off, so we’re doing these test in a nonAngular manner and so many difficulty in angular rendering are expected.

  • to see more detail on this problem visit thisstack overflow issue reportorthis link.