chore(test): add protractor4 #2233

filipesilva · 2016-08-31T16:22:01Z

This PR updates Protractor to from version 3 to 4, which is made inTypescript and includes typings.

Since Protractor4 includes typings, this solves an issue we had with the Upgrade Adapter chapter where Jquery's $ typings conflicted with Protractors $. This issue prevented us from having them in the same node package and was the main motivator for the _protractor folder.

Thus, this PR removes the _protractor folder and adds Protractor configuration and helpers directly to _examples, which solves some editor tooling issues we had because of the indirect path structure for e2e tests.

Boilerplate files were moved from _examples to _examples/_boilerplate as well, so that they are contained there and also to be able to use a tsconfig.json for Protractor in _examples (this was needed for editor tooling purposes). Gulp tasks and plunker generation were adjusted to use this directory.

Some of the custom logic we had in protractor.config.js was moved into protractor-helpers.ts since we were attaching it to the browser variable, which is now typed and thus threw errors when accessing these custom members. Our custom sendKeys was also removed since it's not needed anymore.

End result is that we should have full type safety and editor tooling support in Protractor.

Note: previous tooling added a git ignored tsconfig.json besides each e2e-spec.ts file, which should now be removed otherwise editor tooling will not work properly. Overall, after this PR it is a good to run git clean -fdx to 'reset' the repo and re-setup our infrastructure.

/cc @wardbell @chalin @Foxandxss this PR includes some structural changes that I'd like you to look at and see if you approve.

cnishina · 2016-09-06T20:38:47Z

public/docs/_examples/cb-dynamic-form-deprecated/e2e-spec.ts.disabled

+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor/globals';
+import { sendKeys } from '../protractor-helpers';


sendKeys is not exported on the protractor-helpers file.

filipesilva · 2016-09-12T00:02:53Z

Thanks for the review @cnishina! I added in all your notes.

cnishina · 2016-09-22T17:51:04Z

public/docs/_examples/animations/e2e-spec.ts

-  function getBoundingClientWidth(el: protractor.ElementFinder): protractor.promise.Promise<number> {
-    return browser.executeScript(
+  function getBoundingClientWidth(el: ElementFinder): Promise<number> {
+    return browser.driver.executeScript(


browser.executeScript should work now.

cnishina · 2016-09-22T17:51:12Z

public/docs/_examples/animations/e2e-spec.ts

-  function getOffsetWidth(el: protractor.ElementFinder): protractor.promise.Promise<number> {
-    return browser.executeScript(
+  function getOffsetWidth(el: ElementFinder): Promise<number> {
+    return browser.driver.executeScript(


browser.executeScript should work now.

cnishina · 2016-09-22T17:51:34Z

public/docs/_examples/cb-dependency-injection/e2e-spec.ts

@@ -71,7 +74,7 @@ describe('Dependency Injection Cookbook', function () {
      let yellow = 'rgba(255, 255, 0, 1)';

      expect(target.getCssValue('background-color')).not.toEqual(yellow);
-      browser.actions().mouseMove(target as any as webdriver.WebElement).perform();
+      browser.actions().mouseMove(target as any as WebElement).perform();


use target.getWebElement()

cnishina · 2016-09-22T17:51:56Z

public/docs/_examples/cb-ts-to-js/e2e-spec.ts

@@ -54,7 +57,7 @@ describe('TypeScript to Javascript tests', function () {
    expect(h1.getAttribute('class')).toBe('active');

    h1.click();
-    browser.actions().doubleClick(h1 as any as webdriver.WebElement).perform();
+    browser.actions().doubleClick(h1 as any as WebElement).perform();


use h1.getWebElement()

Foxandxss · 2016-10-06T10:58:48Z

I like it but there are some changes:

Do we need a example-config.json? We had that since day 1, but I don't see why we need it, perhaps we can get rid of it.
The karma conf and karma shim are not copied everywhere anymore, so we don't need it inside _boilerplate.
a2docs.css gets autogenerated, so we don't need it inside the repo. Just make it to be generated there.

My concerns:

Now we have a few boilerplate inside a _boilerplate folder and a few of them outside it. I don't like that, because now I have two different places to look for boilerplate and even more confusing, I have two package.json (one full, one with tasks only, and needing to maintain both).

On the other hand, we also have two tsconfig, one for protractor and one for the demos.

Can't we have _boilerplate to have everything and perhaps a inner protractor folder with the protractor ones? Or they need to exist in the root _examples folder?

filipesilva · 2016-10-06T11:36:09Z

Points discussed offline, addressed in commits above.

Foxandxss · 2016-10-06T16:32:23Z

It has a tslint in _examples and _boilerplate. I guess we should get rid of the _examples one.

Also, a2docs.css at _boilerplate needs to be ignored.

filipesilva · 2016-10-06T17:07:50Z

We should keep the tslint in _examples because it'll also affect the e2e specs. The a2docs.css at _boilerplate should be ignored, agree.

Foxandxss · 2016-10-06T19:10:13Z

So to summarize for @wardbell, we are creating a _boilerplate folder where we have everything we share across al the examples.

The important bit in here is that the package.json that we are spreading right now only have the npm scripts (just what we need) and there is a package.json at _examples that is the one with all the dependencies but not script tags.

We now have a less cluttered _examples folder.

wardbell · 2016-10-06T22:23:06Z

LGTM. Assume it works :-) I like the cleanup. I'm not entirely sure yet about the package.json split of scripts from dependencies but if it doesn't work out, we can fix.

googlebot added the CLA: yes label Aug 31, 2016

filipesilva force-pushed the protractor4 branch 9 times, most recently from f534964 to 5542954 Compare September 6, 2016 15:36

filipesilva changed the title ~~[WIP] chore(test): add protractor4~~ chore(test): add protractor4 Sep 6, 2016

filipesilva force-pushed the protractor4 branch 2 times, most recently from a8bb299 to 1e889c8 Compare September 6, 2016 16:56

cnishina reviewed Sep 6, 2016
View reviewed changes

filipesilva force-pushed the protractor4 branch from 1e889c8 to a803c53 Compare September 11, 2016 23:59

filipesilva added the pr_state: needs work label Sep 14, 2016

filipesilva force-pushed the protractor4 branch from 7d3b838 to 11cfbee Compare September 22, 2016 17:51

cnishina reviewed Sep 22, 2016

View reviewed changes

filipesilva force-pushed the protractor4 branch 5 times, most recently from 7bc7b0d to 2bf1b46 Compare September 22, 2016 23:23

filipesilva force-pushed the protractor4 branch 5 times, most recently from f2a18d0 to 134d1d1 Compare October 5, 2016 11:56

filipesilva removed the pr_state: needs work label Oct 5, 2016

filipesilva changed the title ~~[WIP] chore(test): add protractor4~~ chore(test): add protractor4 Oct 5, 2016

filipesilva force-pushed the protractor4 branch from 134d1d1 to b0894d2 Compare October 6, 2016 10:28

chore(test): add protractor4

9b96af7

filipesilva force-pushed the protractor4 branch from b0894d2 to 9b96af7 Compare October 6, 2016 10:28

filipesilva added 2 commits October 6, 2016 12:24

fix lint, remove boilerplate files, fix less gen

fa86a5f

separate scripts between package.json

d48c3f8

filipesilva added 2 commits October 6, 2016 18:10

ignore a2docs.css in boilerplate

306401a

remove tslint in _examples

f269b3b

wardbell merged commit 5042b30 into angular:master Oct 6, 2016

wardbell deleted the protractor4 branch October 6, 2016 22:25

filipesilva mentioned this pull request Oct 7, 2016

docs(toh-6-aot): add aot to toh-6 #2496

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(test): add protractor4 #2233

chore(test): add protractor4 #2233

filipesilva commented Aug 31, 2016 •

edited

Loading

cnishina Sep 6, 2016

filipesilva Sep 11, 2016

filipesilva commented Sep 12, 2016

cnishina Sep 22, 2016

filipesilva Sep 22, 2016

cnishina Sep 22, 2016

filipesilva Sep 22, 2016

cnishina Sep 22, 2016

filipesilva Sep 22, 2016

cnishina Sep 22, 2016

filipesilva Sep 22, 2016

Foxandxss commented Oct 6, 2016

filipesilva commented Oct 6, 2016

Foxandxss commented Oct 6, 2016

filipesilva commented Oct 6, 2016

Foxandxss commented Oct 6, 2016

wardbell commented Oct 6, 2016

chore(test): add protractor4 #2233

chore(test): add protractor4 #2233

Conversation

filipesilva commented Aug 31, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

filipesilva commented Sep 12, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Foxandxss commented Oct 6, 2016

filipesilva commented Oct 6, 2016

Foxandxss commented Oct 6, 2016

filipesilva commented Oct 6, 2016

Foxandxss commented Oct 6, 2016

wardbell commented Oct 6, 2016

filipesilva commented Aug 31, 2016 •

edited

Loading