Using Angular 7.x with Protractor 6 (beta)

user_835934 0
Viewed 2453

Was anyone able, yet, to execute Angular CLI 7.x E2E tests using Protractor 6 (beta)? Due to issues described at https://github.com/angular/protractor/issues/4294, I was looking forward to give selenium-webdriver@4.0.0-alpha.1 a try, but it did not seem to be as straightforward and ran into issues that the webdriver-manager could not be found.

A Protractor beta release was cut here:

https://github.com/angular/protractor/commit/205c4d88ace8851b8fa71a75c5d66249c9a63c3b

Update (working now)

I believe I got it. Steps to make it work:

Using Node 10.15.0 LTS on Mac OS X 10.13.6:

$ node -v
v10.15.0

Using Angular CLI 7.2.1.

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.2.1
Node: 10.15.0
OS: darwin x64
Angular: 7.2.0
...

Create a simple app:

$ ng new ng72 --routing=true --style=scss

Update package.json:

  • "jasmine-core": "^3.3.0",
  • "protractor": "6.0.0-beta"

Update the test for await/async:

    import { AppPage } from './app.po';

    describe('workspace-project App', () => {
      let page: AppPage;

      beforeEach(() => {
        page = new AppPage();
      });

      it('should display welcome message', async() => {
        await page.navigateTo();
        await expect(await page.getTitleText()).toEqual('Welcome to ng72!');
      });
    });

Then execute:

  • $ npm install
  • $ ./node_modules/protractor/bin/webdriver-manager update
  • $ npm rebuild node-sass
  • $ ng e2e --no-webdriver-update

Google (Version 72.0.3626.53) will start up and the test is executing successfully.

As a side-note. If you don't do await page.getTitleText(), then the test fails with a rather obscure NoSuchSessionError: invalid session id:

**************************************************
*                    Failures                    *
**************************************************

1) workspace-project App should display welcome message
  - Expected ElementFinder({ browser_: ProtractorBrowser({ execute: Function, setFileDetector: Function, getExecutor: Function, getSession: Function, getCapabilities: Function, quit: Function, actions: Function, executeScript: Function, executeAsyncScript: Function, wait: Function, sleep: Function, getWindowHandle: Function, getAllWindowHandles: Function, getPageSource: Function, close: Function, getCurrentUrl: Function, getTitle: Function, findElementInternal_: Function, findElementsInternal_: Function, takeScreenshot: Function, manage: Function, switchTo: Function, driver: Driver({ session_: [object Promise], executor_: Executor({ w3c: false, customCommands_: Map( [ 'launchApp', Object({ method: 'POST', path: '/session/:sessionId/chromium/launch_app' }) ], [ 'getNetworkConditions', Object({ method: 'GET', path: '/session/:sessionId/chromium/network_conditions' }) ], [ 'setNetworkConditions', Object({ method: 'POST', path: '/session/:sessionId/chromium/network_conditions' }) ], [ 'sendDevTools ... to equal 'Welcome to ng72!'.

Executed 1 of 1 spec (1 FAILED) in 0.484 sec.
Randomized with seed 13684.
/Users/dev/ng72/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:3190
        throw arguments[0];
        ^

NoSuchSessionError: invalid session id
  (Driver info: chromedriver=72.0.3626.7 (efcef9a3ecda02b2132af215116a03852d08b9cb),platform=Mac OS X 10.13.6 x86_64)
protractor angular-cli angular selenium-webdriver
1 Answers

Protractor 6.0.0-beta does not work with angular-cli

Thank you for being on the bleeding edge (and trying out my release)! Hopefully it is mostly working other than this issue. Unfortunately, the angular-cli and the new version (6.0.0-beta) of Protractor will not work together. The story for this will improve once Protractor is officially released and the angular-cli uses it.

For now the recommended path is if you want to use the 6 beta, to separate it (your tests) from the angular-cli project.

When page.getTitleText() is not awaited

Your error with page.getTitleText() might have something to do with when the promise eventually gets resolved, the browser session was closed by Protractor (this is probably not the best error message). Also you just need to do a expect(await page.getTitleText()).toEqual('Welcome to ng72!');, you do need an await in front of the expect.

user_25712560
Related