Protractor: browser.setLocation does not work in webpack projects

[krotscheck]

Bug report

This is a bug referral from https://github.com/angular/angular-cli/issues/3536, which suggests that an angular2 application, packaged via webpack, encounters the following error when protractor invokes browser.setLocation(). I was able to reproduce this in the default angular-cli application, (created via ng init) as well as an unrelated webpack application used in the example below. Unfortunately I haven't been able to triage more, but it may have to do with webpack's selector munging.

• Node Version: 7.2.1
• Protractor Version: 4.0.13
• Angular Version: ~2.4.1
• Browser(s): Chrome
• Operating System and Version OSX 10.12.2

• Your protractor configuration file: https://github.com/AngularClass/angular2-webpack-starter/blob/master/protractor.conf.js

• Output from running the test

InvalidElementStateError: invalid element state: Failed to execute 'querySelector' on 'Document': The provided selector is empty.
  (Session info: chrome=55.0.2883.95)
  (Driver info: chromedriver=2.25.426935 (820a95b0b81d33e42712f9198c215f703412e1a1),platform=Mac OS X 10.12.2 x86_64)

• Steps to reproduce the bug

git clone [email protected]:AngularClass/angular2-webpack-starter.git
cd angular2-webpack-starter/
yarn install
yarn start

-------
protractor --elementExplorer
browser.setLocation('home');

[krotscheck]

If y'all have an extra ticket for the Angular2 hack day in Seattle, I'd be happy to show up and dig into this a bit more ;).

[sjelin]

This is an A+ bug report. I'll look into it next year

PS. @cnishina is in charge of hack day - but don't tell him I told you!

[krotscheck]

@sjelin Your secret is safe with me :D

[cnishina]

Not Angular 2...it's #JustAngular. The hack day is completely full. No extra tickets... :disappointed:

[karolmie1]

Shame. Maybe the issue would have been solved by now :(

[sjelin]

@krotscheck sadly, I won't be looking into this bug after all. I'm transferring to another team (technically I transferring three days ago) and I was too busy wrapping things up to fix this.

[krotscheck]

@sjelin It happens to all of us. Know if anyone might pick it up?

[sjelin]

@seanmay or @vikerman are probably the most likely to be responsive going forward.

[krotscheck]

I'm closing this bug (as the original author) as it appears that after version 5.0 of protractor, the setLocation method is now ng1 only. Furthermore, our team has come up with a different approach which - though a bit hacky - does offer the speed we're looking for.

/**
 * This function is a terrible, terrible hack, which will dramatically speed up our protractor tests.
 *
 * The thought is this: If we want to navigate to a specific route, we can either reload the whole browser
 * window, or we can try to access the router directly. The former is time consuming, as we have to go through
 * asset loading and initialization again. The latter is not directly accessible, as protractor is divesting itself
 * of controls that reach into angular, and instead simply relies on accessing and manipulating the DOM.
 *
 * The solution is a two-part contract which we inject into all of our angular applications. This is the first part:
 * a method, bound to the window object during app initialization, which reaches into the angular event zone and
 * uses the router directly. The second is a protractor utility, which exposes that to our e2e specs.
 */
export function testingInitializer(injector) {
  return () => {
    const windowService = injector.get(WindowService);
    const router = injector.get(Router);
    const ngZone = injector.get(NgZone);

    const window = windowService.get();
    window.protractorNavigateByUrl = (route) => {
      ngZone.run(() => {
        router.navigateByUrl(route, {skipLocationChange: false, replaceUrl: true});
      });
    };
    // Resolve this initializer.
    return Promise.resolve();
  };
}

@NgModule(
  {
    providers: [
      {
        provide: APP_INITIALIZER,
        useFactory: testingInitializer,
        deps: [Injector],
        multi: true
      }
    ],
    imports: [
      CommonModule
    ]
  })
export class TestingModule {}

And then this utility used by the tests themselves.

export class RouterUtil {
  public static navigateByUrl(url): promise.Promise<any> {
    return browser.executeScript((route) => window.protractorNavigateByUrl(route), url);
  }
}

[rantiev]

You can as well add hidden button or real button when app runs in test environment and click it using protractor element click function. This is weird, but looks simpler and works.