Setting-up Moodle Mobile End To End Testing Environment

Protractor

Protractor is an end-to-end test framework for AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would. Protractor also speeds up your testing as it avoids the need for a lot of “sleeps” and “waits” in your tests, as it optimizes sleep and wait times. And also allows to find elements based on things like the input’s ng-model or by {{bindings}} on the page or by an ng-repeat element so that you can easily and quickly find the elements that you want to test. Attached the architecture diagram of Protractor below and can easily take some idea.

Setting-up Testing Environment

This currently only covers testing on Android 4.4 onward and Chrome. iOS testing is a work in progress.  I tried with both Windows and Linux OS for setting the environment and both working very perfectly without any errors.

1. Install a browser for development

I recommend Chromium browser (Google Chrome open source version) for development. Please, read Moodle_Mobile_development_using_Chrome_or_Chromium for more information.

2. Install Node.js

IMPORTANT: Don’t use node 4.0 or higher, there are incompatibilities with some of the packages we use. Please use v0.12.7 instead.

Linux users: Before you install node just type node -v in terminal and check whether node already installed or not. If you don’t install node in your Linux machine you can easily install node v0.12.7 following this article. Please don’t use sudo apt-get install nodejs for install nodejs because by default install the latest version. If you already installed nodejs in you machine you can use Node Version Manager(NVM) easily.

Windows users: You have to uninstall your current nodejs version and can download Node v0.12.7(Stable).

3. Install ionic

npm cache clean 
npm install -g cordova ionic

 4. Clone the code base into a local directory in your computer           

git clone https://github.com/moodlehq/moodlemobile2.git moodlemobiledirectory 
cd moodlemobiledirectory 
git pull                                                                                                                                    

 5. Install the npm plugins dependencies             

npm install -> (This will install all the dependencies listed in package.json) 
npm install -g bower -> (This will install bower in a folder that should be in the PATH) 
npm install -g gulp -> (This will install gulp in a folder that should be in the PATH)

  After installing dependencies please check whether all the dependencies files like Protractor,Appium have been installed.      

6. Add the iOS and Android platforms and install the required Cordova plugins 

Install the platforms. It’s important to use these versions because newer versions are going to cause some problems with the plugins installed.

ionic platform add android@4.1.1 
ionic platform add ios@3.9.1

  Run the following command to install the platforms and all the required Cordova plugins

ionic state restore    

 Please, note that if you are creating a custom app with a custom URL scheme, you should edit the /package.json file and specify there your custom URL_SCHEME (replacing the existing value) and your GCMPN SENDER_ID.        

7. Install bower globally and the required javascript files

bower install -> (this will install all the libraries listed in bower.json)

8. Run gulp’s default tasks (in order to create the build files)

gulp

9. Open the app in the browser

First start chromium via the command line using the custom parameters as is mentioned here: Moodle Mobile development using Chrome or Chromium and then, start the Ionic server:

ionic serve --browser chromium

Generating Protractor config file

After successfully installed all the dependencies next have to create Protractor config file. It contains all the information for running the tests, as well as to provide the tests with information about the site being tested.  For instance the site URL, version, use of local mobile etc. We use gulp as a convenience tool to generate a configuration file.

For Android

gulp e2e-build --target android --device <UUID from adb devices -l> --version <version>

Example:
gulp e2e-build --target android --device abcdefg --version 4.4

Optional arguments:
--apk <Relative path to Android APK>
--webdriver <URL to the driver>

For Chrome

gulp e2e-build --chrome
 
Optional arguments:
--url <The URL at which the app is served (from ionic serve for instance)>
--webdriver <URL to the driver>

By default the configuration file is saved at e2e/build/protractor.conf.js  should you wish to save the configuration file to re-use it later, you can use the argument –output <filename>. Other arguments are available, you can find more about them using:

  • gulp e2e-build -h
  • gulp e2e-build –target android -h
  • gulp e2e-build –target browser -h

Running the suite

1. Run the ionic first 

ionic serve -b -a

PS: If you can’t run ionic in localhost, then you must configure protractor to run in a different domain. But first try to do it using above command.

gulp e2e-build --target browser -u http://192.168.x.x:8100
Please note that “-u”  is only necessary if your ionic is serving files using a different host that localhost. And also http://192.168.x.x:8100 is an example so you have to use the host and port where ionic is launched.

2. Start the web driver   

For Android: ./node_modules/appium/bin/appium.js
For Chrome : ./node_modules/protractor/bin/webdriver-manager start

3.  Wait for the driver to be fully started

4. Run Protractor 

You have to be in the project root and run that command

This is a binary file -> node_modules/protractor/bin/protractor 
Parameter passed to that binary file -> e2e/build/protractor.conf.js

so run below command:

node_modules/protractor/bin/protractor ../../../e2e/build/protractor.conf.js

IMPORTANT :  Problems during the setting-up 

Basically I have been got two errors during this setting-up time and could be able to find out the solutions as well.

1. SyntaxError: Unexpected token 

As I mentioned earlier we have to work with nodejs v0.12.7. But when you are trying to run protractor sometimes this BUG might be occurred.

error1

When you are running “npm install” command, it has installed the latest version of protractor. But in here we are using nodejs  v0.12.7, so as a solution have to install previous release of protractor (2.5.1) and I used below command and the issue was resolved.

npm install -g protractor@2.5.1

2. Run the correct ionic command 

For run this protractor test first of all you should run the ionic, then web driver and finally run protractor. And also close the browser instance opened. Sometimes we use “ionic serve ” , “ionic serve -a” and  “ionic serve -w chrome” command for run the ionic. But in here don’t use those commands for run the ionic. Reason for below error is these ionic commands.

error2

So you have to use this ioinc command for run the ionic and get rid of the problem.

ionic serve -b -a

Conclusion

If you followed above steps correctly you can easily setting-up Moodle mobile testing environment.

E4

 

 

 

                          

Leave a Reply

Your email address will not be published.