added code for testing on emulator

[criesbeck]

A partial attempt to address Issue #52. Connection is made and some tests run, but other tests fail with errors such as

Element is not clickable at point (32, 28). Other element would receive the click: <div class="toolbar-title toolbar-title-md" ng-reflect-klass="toolbar-title" ng-reflect-ng-class="toolbar-title-md">...</div>

[lathonez]

Hi Chris,

Thanks a lot for this. I have been meaning to get to it for ages but things have been a little crazy.

Unfortunately I can't merge this in. The boilerplate and config will confuse the vast majority of our users here. Aside from installing Android, there are manual steps required to get the emulation going (e.g. users need to change the protractor conf, the script in package.json wont work on windows and some linux installs).

I think it's best to keep your repo separate as the android emulation example - your instructions in the README are excellent and will be a great help to anyone who is trying to get the emulation running locally.

The idea behind #52 was to farm the emulation off to some kind of cloud service - think getting emulation running locally as you have done will be too complex / time consuming for most users.

Thanks again for your time on this, I hope you don't mind if I reference your repo for emulation.

Stephen

[criesbeck]

Whether merged or not is fine by me. I was wondering if you had any insight into the tests that fail, since it seems like that might happen in the cloud as well. They seem to be issues with what's clickable, e.g.,

1) ClickerApp the left menu has a link with title Clickers
  - Failed: unknown error: Element is not clickable at point (32, 28). Other element would receive the click: <div class="toolbar-title toolbar-title-md" ng-reflect-klass="toolbar-title" ng-reflect-ng-class="toolbar-title-md">...</div>

Are the tests written incorrectly or is this there some fundamental conflict components going on?

[lathonez]

You can just pick up the other element it highlights instead?

[criesbeck]

Clearly I didn't communicate. Take this test in your code:

  it('the left menu has a link with title Clickers', () => {
    element(by.css('.bar-button-menutoggle')).click()
      .then(() => {
        browser.driver.sleep(2000); // wait for the animation
        expect(element.all(by.css('ion-label')).first().getText()).toEqual('Clickers');
      });
  });

This passes when run on the web page with

npm run e2e

but fails when run on the emulator with

npm run e2e-android

The error is Element is not clickable at point (32, 28). Other element would receive the click: <div class="toolbar-title toolbar-title-md" ng-reflect-klass="toolbar-title" ng-reflect-ng-class="toolbar-title-md">...</div>.

It seems like the toolbar-title div is obscuring the bar-button-menutoggle, but why? Some difference in layout on an emulated device vs webpage? Some missing step in the test code? Is there another way to specify what to click on?

Whatever it is, it seems like this would be a problem no matter where the emulator is running.

[lathonez]

You can use any html selector to specify what to click on, but it doesn't look like changing it will help you here.

Can you get access on the emulator to debug via the chrome inspector?

Try to execute the same code in the console $('.bar-button-menutoggle').click()