Enterprise Marketplace
Sign i Sign u
n p
Why GitHub? Explore Pricing
angular / protractor Watch 528 Star 8.5k Fork 2.4k
Code Issues 544 Pull requests 73 Actions Projects 3 Wiki Security Insights
5.4.1 protractor / exampleTypescript / Create new file Find file History
q i y i g g fix﴾doc﴿: update links in debugging docs to make it show correctly in… … Latest commit 3b29ee7 on Dec 7, 2017
..
asyncAwait fix﴾doc﴿: update links in debugging docs to make it show correctly in… 2 years ago
.gitignore docs﴾await﴿: Update example to show debugging with chrome devtools 3 years ago
[Link] chore﴾docs﴿: Document disabling the control flow 3 years ago
[Link] feat﴾typescript﴿: move typescript variable instances from protractor/… ﴾ 4 years ago
[Link] chore﴾types﴿: clean up TypeScript support ﴾#3520﴿ 4 years ago
[Link] docs﴾exampleTypescript﴿: improve comments and readme ﴾#3406﴿ 4 years ago
[Link] fix﴾doc﴿: update doc for testing with node 8 async/await and chrome i… 2 years ago
[Link] fix﴾types﴿: output plugin typings ﴾#3389﴿ 4 years ago
[Link] feat﴾typescript﴿: move typescript variable instances from protractor/… ﴾ 4 years ago
[Link] chore﴾example﴿: add a protractor typescript example ﴾#3323﴿ 4 years ago
[Link] docs﴾await﴿: Update example to show debugging with chrome devtools 3 years ago
[Link]
Protractor with Typescript
Typescript provides code auto completion and helpful hints with a text editor like Microsoft's Visual Studio Code or another text
editor with Typescript support.
Note that this example uses TypeScript 2.0.
Examples
There are two examples in this directory:
Simple Protractor example
Similar to the github protractor example
Files [Link] and [Link]
Page objects example
Follows the [Link] page objects example
Files [Link] , [Link] , and [Link]
File organization
exampleTypescript/
|‐ node_modules/ // downloaded node modules
|‐ tmp/ // compiled javascript output
|
|‐ .gitignore // since typescript produces javascript, we should not
| // commit javascript to the repo
|‐ [Link] // page object example
|‐ [Link] // configuration for the page objects example
|‐ [Link] // node dependencies for the project
|‐ [Link] // this file
|‐ [Link] // spec for the simple protractor example
|‐ [Link] // spec for the page objects example
|‐ [Link] // typescript transpile configuration
Getting started
This [Link] references the local protractor directory with "protractor": "file: ../" . For the type declarations to work,
from the protractor directory run an npm install to generate the declarations file.
Next, install the exampleTypescript node_modules with:
npm install
Protractor typings
To use Protractor types, you'll need to import protractor . After this is imported, you should have autocompletion hints when
typing.
import {browser, element, by, By, $, $$, ExpectedConditions} from 'protractor';
Although the Protractor configuration file can be written in javascript, creating it in typescript will have some hints. These hints and
the reference configuration can be found in lib/[Link] . Below we are importing the Config interface and applying that
interface to the config variable:
import {Config} from 'protractor';
export let config: Config = {
...
}
Ambient typings
Protractor also uses ambient types including jasmine, jasminewd2, and node. These are brought in via the [Link] file,
which uses npm module resolution to get types from node_modules/@types .
If you are using the jasmine framework for your tests, make sure to do:
npm install ‐‐save‐dev @types/jasmine @types/jasminewd2
Compiling your code
To convert your typescript to javascript ﴾transpiling﴿, you'll use the Typescript compiler ﴾tsc﴿. If you install typescript globally, the
command is tsc . If it is not installed globally, the typescript compiler can be executed with npm run tsc .
Running Protractor
After transpiling your code to javascript, you'll run Protractor like before: protractor [Link]
Helpful links
[Link] tutorial
[Link] [Link]
Typescript gitter
Typescript stackoverflow
© 2020 GitHub, Inc. Terms Privacy Security Status Help Contact GitHub Pricing API Training Blog About
