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

README.md chore﴾docs﴿: Document disabling the control flow 3 years ago

angularPage.ts feat﴾typescript﴿: move typescript variable instances from protractor/… ﴾ 4 years ago

conf.ts chore﴾types﴿: clean up TypeScript support ﴾#3520﴿ 4 years ago

confPageObjects.ts docs﴾exampleTypescript﴿: improve comments and readme ﴾#3406﴿ 4 years ago

package.json fix﴾doc﴿: update doc for testing with node 8 async/await and chrome i… 2 years ago

plugins.ts fix﴾types﴿: output plugin typings ﴾#3389﴿ 4 years ago

spec.ts feat﴾typescript﴿: move typescript variable instances from protractor/… ﴾ 4 years ago

specPageObjects.ts chore﴾example﴿: add a protractor typescript example ﴾#3323﴿ 4 years ago

tsconfig.json docs﴾await﴿: Update example to show debugging with chrome devtools 3 years ago

README.md

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 conf.ts and spec.ts
Page objects example
Follows the protractortest.org page objects example
Files confPageObjects.ts , specPageObjects.ts , and angularPage.ts

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
|‐ angularPage.ts // page object example
|‐ confPageObjects.ts // configuration for the page objects example
|‐ package.json // node dependencies for the project
|‐ README.md // this file
|‐ spec.ts // spec for the simple protractor example
|‐ specPageObjects.ts // spec for the page objects example
|‐ tsconfig.json // typescript transpile configuration

Getting started
This package.json 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/config.ts . 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 tsconfig.json 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 conf.js

Helpful links
TypescriptLang.org tutorial
TypescriptLang.org tsconfig.json
Typescript gitter
Typescript stackoverflow

© 2020 GitHub, Inc. Terms Privacy Security Status Help Contact GitHub Pricing API Training Blog About