protractor with typescript

1. files

• package.json (npm specific, same as pom.xml in maven)
• tsconfig.json (typescript specific, typescript project file)
• vscode cucumber plugin and cucumber-mapper plugin

2. setup

• npm install -g protractor (global install, can use in command line without specify path)
• npm install protractor (local install, used by require(), can also use in command line if specify path)

• npm list <package_name> (list local packages)
• npm list -g <package_name>  (list globally packages)
• npm list -g --depth=0 (list globally user installed top level package)

• npm install <package_name> --save (used for production)
• npm install <package_name> --save-dev (used for development)
• both write to package.json -> dependencies

• npm install (install dependencies in ./package.json)
• npm run update (install update)

3.tsconfig.json

• it lists the files belonging to the project as well as compiler options
• outFile (.ts files are converted to .js and output here, help sourceMap to find)
• @types, typeRoots and types
• by default all visible “@types” packages are included in your compilation
• if typeRoots is specified, only packages under typeRoots will be included
• if types is specified, only packages listed will be included

4. config.js

• browser.ignoreSynchronization = true      //this is used for non-angular app, now become selemium js and should use explicit wait
• browser.ignoreSynchronization = false     //this is used for angular app, and no wait is needed for angular element
• browser.ignoreSynchronization is depreciated, now should use browser.waitForAngularEnabled

• SELENIUM_PROMISE_MANAGER: false     //disable control flow
• when control flow is disabled, can use async/await or promise chain (i.e. .then()) to synchronise command
• when control flow is enabled, use async/await has conflict with control flow, so need to use promise chain

5. promise & control flow

• all webdriver js (i.e. protractor) functions are async and return promises
• webdriver js maintain a queue of pending promises called control flow 

5. debug typescript in vscode

• "sourceMap": true in tsconfig.json so that you can debug .ts
• configure 'launch.json' file correctly, it can contain multiple configurations (choose one when debugging)

5. shortcut

• ctrl+shift+f (search all)
• f5 (debug)
• ctrl+f5 (run)
• ctrl+p (open recent files)

6. await/async

• async function return a promise
• await can only be used in async function
• await make javascript wait until promise resolve

7. webdriver js

• when promise manager is disabled (SELENIUM_PROMISE_MANAGER=0), each command will execute as soon as it's scheduled
• when promise manager is enabled, each command will block until the previous command complete
• turn off control flow (SELENIUM_PROMISE_MANAGER: false) when using async/await
• setDefaultTimeout(60 * 1000); to change default timeout

8.  npm run or npm test or npm start

• your current package directory's bin directory is placed at the front of your path

9. npm ls selenium-webdriver

10. node js

• single threaded
• concurrency model based on event loop and registered callback

11. style guide

• make test independent at least at file level

12. debug protractor in vscode

• .vscode/launch.json

"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
"stopOnEntry": false,
"args": ["${workspaceRoot}/protractor.conf.js"],

reference

1. tsconfig-json
2. file scope vs explicit project for typescript
3. how to debug typescript in vs code?
4. vs code debugging
5. nodejs debugging in vs code
6. protractor cucumber using typescript
7. protractor-cucumber-typescript repo
8. default timeout in webdriver js
9. node-js-tutorial
10. how protractor works
11. debug protractor using vscode

12. where can I put the browser.ignoreSynchronization in my config file of protractor?

13. does cucumber with protractor need the callback?

14. how to use protractor on non angularjs website?

15. when should we use .then with protractor promise?