Angular4 + Protractor. CanActive route with browser.get()

Bug report

• Node Version: 8.0.0
• Protractor Version: 5.1.2
• Angular Version: 4.0.0
• Browser(s): Version 59.0.3071.115 (Official Build) unknown (64-bit)
• Operating System and Version 4.4.0-62-generic / GNU/Linux
• Your protractor configuration file

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 40000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

• A relevant example test

My test:

import { SliderPage } from './app-slider.po';
import { browser, by, element, promise, ElementFinder, ElementArrayFinder } from 'protractor';

describe('angular-app App', () => {
  let page: SliderPage;

  beforeEach((done) => {
    page = new SliderPage();
    page.navigateTo();
  });

  it('should select first image (if it exist)', async () => {
    console.log(element(by.css('.slider')).getText());
    // page.getImages().count().then((count) => {
    //   console.log(count);
    //   done();
    // if (count > 1) {
    //   page.getFirstImage().click().then(() => {
    //     expect(page.getFirstImage().getAttribute('class')).toMatch('selected');
    //   })
    // }
    // });
  });
}

My app-slider.po:

import { browser, by, element, promise, ElementFinder, ElementArrayFinder } from 'protractor';

export class SliderPage {
  navigateTo() {
    return browser.get('/slider');
  }

  getImages() {
    return element(by.css('.slider')).all(by.css('li'));
  }

  getFirstImage(): ElementFinder {
    return this.getImages().first();
  }

  getArrowNext(): ElementFinder {
    return element(by.css('arrow-next'));
  }

  getArrowPrev(): ElementFinder {
    return element(by.css('arrow-prev'));
  }
}

• Output from running the test

Jasmine started
A Jasmine spec timed out. Resetting the WebDriver Control Flow.
A Jasmine spec timed out. Resetting the WebDriver Control Flow.
A Jasmine spec timed out. Resetting the WebDriver Control Flow.

  angular-app App
    ✗ should select first image (if it exist)
      - Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
          at ontimeout (timers.js:488:11)
          at tryOnTimeout (timers.js:323:5)
      - Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
          at ontimeout (timers.js:488:11)
          at tryOnTimeout (timers.js:323:5)
      - Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
          at ontimeout (timers.js:488:11)
          at tryOnTimeout (timers.js:323:5)

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

1) angular-app App should select first image (if it exist)
  - Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
  - Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
  - Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

Executed 1 of 1 spec (1 FAILED) in 2 mins.
[11:17:17] I/launcher - 0 instance(s) of WebDriver still running
[11:17:17] I/launcher - chrome #01 failed 1 test(s)
[11:17:17] I/launcher - overall: 1 failed spec(s)
[11:17:17] E/launcher - Process exited with error code 1

• Steps to reproduce the bug

1. My routes in app.module.ts:

Routes = [
  { path: 'login', component: AuthPageComponent, canActivate: [LoginGuard] },
  { path: 'slider', component: SliderPageComponent, canActivate: [SliderGuard] },
  { path: '', redirectTo: 'slider', pathMatch: 'full' }
];

1. I run command ng e2e
2. Browser don’t open and then I get issues
3. If I change routes:

Routes = [
  { path: 'login', component: AuthPageComponent},
  { path: 'slider', component: SliderPageComponent},
  { path: '', redirectTo: 'slider', pathMatch: 'full' }
];

Browser open and all okay.

Feature Request

• Reasons for adopting new feature
• Is this a breaking change? (How will this affect existing functionality)

[JuliaAlaeva]

I can to solve this problem some way? My canActivate return “true” and don’t protect this page, if my user is logging. But I can’t do this with protractor, because I implement login with Facebook.

[raha1923]

this is my problem in this case, are the protractor able to detect components wrapped by wrappers, in the router-outlet at all?

https://stackoverflow.com/questions/48606150/e2e-protractor-test-cant-detect-angular-component-in-multi-layer-angular-router