Last edited: 2017-02-28H
How do I do client side js e2e testing locally and on my build/deploy/test server?
First I need to understand the possibilities. Here is how I understand the stuff so far:
- Unit tests are for testing AngularJS code client side. E2e tests are for testing through a browser.
- Jasmine unit or scenario tests are run by Karma inside the browser e.g. headless PhantomJS or a normal browser like Chrome.
Some Karma plugins: karma-phantomjs-launcher
Karma Tutorial 1.
- Karma is still preferred runner for unit tests, but for e2e tests AngularJS recommends Protractor (Selenium). Protractor requires Java (JDK)
It also replaces the Karma plugin karma-ng-scenario and Angular Scenario Runner.
Protractor Tutorial 1.
- For testing REST API it might come in handy to use needle, since you will also be able to test redirects.
Needle for test sample.
- You can Protractor locally by hand (from command line) or with a task runner on a server e.g. Gulp. Gulp tasks are easier to create and faster than its competitor Grunt.
Some Gulp plugins: gulp-karma + sample,
- Travis CI is a tool for doing continues integration (build/deploy/test), which for the e2e tests means it will execute the tests. Perhaps directly calling Protractor or via Gulp. It can be trigged by a commit to a git repository.
Travis Tutorial 1.
- Use Yeoman as template and snippet generator for e.g e2e tests.
I think my need will be fulfilled by letting the CI tool run Protractor from cmd-line.
Fixing problems with Protractor due to too old version of Node
Locally I got problems after Protractor install:
Your environment has been set up for using Node.js 0.12.2 (ia32) and npm. Y:\>protractor --version C:\Users\raasor\AppData\Roaming\npm\node_modules\protractor\built\cli.js:2 const fs = require('fs'); ^^^^^ SyntaxError: Use of const in strict mode.
Various FAQ tell tool “n” is the answer to update node.js, but it does not install on Windows.
Node also has an update. That too did not solve the problem.
powershell Set-ExecutionPolicy Unrestricted Powershell -c "iwr https://chocolatey.org/install.ps1 -UseBasicParsing | iex" powershell Set-ExecutionPolicy restricted
Getting latest version of the Chocolatey package for download. Getting Chocolatey from https://chocolatey.org/api/v2/package/chocolatey/0.10.3. Downloading 7-Zip commandline tool prior to extraction. Extracting C:\Users\raasor\AppData\Local\Temp\chocolatey\chocInstall\chocolatey. zip to C:\Users\raasor\AppData\Local\Temp\chocolatey\chocInstall... Installing chocolatey on this machine Creating ChocolateyInstall as an environment variable (targeting 'Machine') Setting ChocolateyInstall to 'C:\ProgramData\chocolatey' WARNING: It's very likely you will need to close and reopen your shell before you can use choco. Restricting write permissions to Administrators We are setting up the Chocolatey package repository. The packages themselves go to 'C:\ProgramData\chocolatey\lib' (i.e. C:\ProgramData\chocolatey\lib\yourPackageName). A shim file for the command line goes to 'C:\ProgramData\chocolatey\bin' and points to an executable in 'C:\ProgramData\chocolatey\lib\yourPackageName'. Creating Chocolatey folders if they do not already exist. WARNING: You can safely ignore errors related to missing log files when upgrading from a version of Chocolatey less than 0.9.9. 'Batch file could not be found' is also safe to ignore. 'The system cannot find the file specified' - also safe. PATH environment variable does not have C:\ProgramData\chocolatey\bin in it. Add ing... WARNING: Not setting tab completion: Profile file does not exist at 'C:\Users\raasor\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1'. Chocolatey (choco.exe) is now ready. You can call choco from anywhere, command line or powershell by typing choco. Run choco /? for a list of functions. You may need to shut down and restart powershell and/or consoles first prior to using choco. Ensuring chocolatey commands are on the path Ensuring chocolatey.nupkg is in the lib folder
Continue run-as-admin to update Chocolatey:
>choco upgrade chocolatey
Next update node:
>#choco list nodejs >choco install nodejs #reinstall node >refreshenv #re-read envir >protractor --version #does protractor still fail? Version 5.1.1 #nope all is :-) >node -v v7.6.0 #before 0.12.2 >npm -v 4.3.0
Yes – got it!
Find a great E2E template with Yeoman
First install Yeoman
npm install -g yo yo -v #now you got option to install a generator...find one here http://yeoman.io/generators/
So what template to choose?
- I could be tempted to user an ASP.NET Core template like this SPA: https://github.com/kriasoft/aspnet-starter-kit#readme
It contains a nice Visual Studio folder structure for npm tools, so I could copy-paste E2E tests from another generator into this.
- A more Microsoft-like Core generator is https://github.com/omnisharp/generator-aspnet#readme (I won’t use that one)
- One good E2E example is https://github.com/joepurdy/generator-nightwatchjs, which is build on top of the Protractor WebDriver API.
- Perhaps just put it into the VS2015 template TypeScriptHTMLApp, which is an almost empt web?
Ongoing… might probably add samples here.