lathonez / clicker

Ionic 2 + @angular/cli Seed Project : Angular2 + Typescript + Karma + Protractor + Travis
http://lathonez.com/2018/ionic-2-unit-testing/
MIT License
430 stars 137 forks source link

Cloud emulation provider #52

Open lathonez opened 8 years ago

lathonez commented 8 years ago

As suggested by @mebibou, the following quotes from #42 directly -

Also, I don't know if you know ripple-emulator, but it allows you to run your app like an Android or iPhone app with some Cordova features (or writing your own bridges if you need more). Here's my full protractor.conf.js to give you an idea:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  seleniumPort: 4444,
  chromeDriver: '../node_modules/protractor/selenium/chromedriver',
  directConnect: true,
  framework: 'jasmine2',
  baseUrl: 'http://localhost:8100',
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--disable-web-security']
    }
  },
  specs: [
    'protractor/**/*.js'
  ],
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30 * 1000,
    isVerbose: true
  },
  onPrepare: function() {
    // Use ripple emulator to run the tests
    var url = 'http://localhost:4400/?enableripple=cordova-3.0.0-' + browser.params.device;
    browser.driver.manage().window().maximize();
    browser.ignoreSynchronization = true;
    browser.driver.get(url);
    // Allow ripple to load
    browser.driver.wait(function() {
      return browser.driver.getCurrentUrl().then(function(actualUrl) {
        return url == actualUrl;
      });
    }, 10000, 'url hasnt changed');
    browser.driver.wait(function() {
      return element(by.id('document')).isPresent();
    }, 10000, 'ripple not loaded');
    browser.driver.switchTo().frame(0);
  }
};

Although this used to be working before, since I updated to ionic2-beta.3 it doesn't work anymore :disappointed: (ripple doesn't want to load anymore I don't know why)

lathonez commented 8 years ago

I think SauceLabs is probably a better approach re emulation, if it is required.

mebibou commented 8 years ago

but not a solution for everyone, it is not free

lathonez commented 8 years ago

Seems to be free for OSS, same as travis, coveralls and codecov which I'm also using here?

https://saucelabs.com/beta/signup/OSS/None

Looking at their actual pricing page, I'm not sure whether or not this is only a beta thing, which would make it a non runner for me too.

captaincole commented 7 years ago

Updates from my research. I have been looking into ways to automate locally first, and then integrate into a cloud platform (like sauce labs). First I want to say that there was no immediate easy use case here. But I successfully ran a protractor test against an iOS simulator via Appium as a bridge. There is so much more testing that is needed (like verifying that I can test cordova features), but I will update as it seems fit. Here is the configuration file, I need to add multiple capabilities for local browser tests and emulators.

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/docs/referenceConf.js

/*global jasmine */
var SpecReporter = require('jasmine-spec-reporter');

exports.config = {
  seleniumAddress: 'http://localhost:4723/wd/hub',
  allScriptsTimeout: 150000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    browserName: "",
    'appium-version': '1.6',
    platformName: 'iOS',
    platformVersion: '10.1',
    autoWebview: true,
    deviceName: 'iPhone 7',
    app: '/Library/WebServer/Documents/plank38/platforms/ios/build/emulator/38Plank.app'
  },

  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  },

  baseUrl: 'http://localhost:8000',

  useAllAngular2AppRoots: true,
  beforeLaunch: function() {
    require('ts-node').register({
      project: 'e2e'
    });
  },

  onPrepare: function() {
   //  jasmine.getEnv().addReporter(new SpecReporter());
    var wd = require('wd'),
      protractor = require('protractor'),
      wdBridge = require('wd-bridge')(protractor, wd);
      wdBridge.initFromProtractor(exports.config);
  }
};

Also, there was a significant amount of command line configuration and settings needed to run these tests.

I needed to run appium-doctor to see what my computer needed and then upgrade and install everything.

Looking at a SauceLabs configuration, it seems that you can integrate your Appium tests to automatically upload to saucelabs and run against a variety of devices. My next step is to test cordova features locally, and then integrate with saucelabs.

TL;DR - This is not straightforward and there is literally no documentation online about this. Hopefully we can come up with some.

lathonez commented 7 years ago

This is fantastic. Definitely seems to be something worth documenting and implementing some boilerplate for.

Looking forward to further updates.

captaincole commented 7 years ago

@lathonez Yes, I would like to document it. I got stuck because the app I am testing on has a facebook login portion and my protractor skills are not solid enough yet to handle that new screen popup. Plus I havent tested a native function yet.

lathonez commented 7 years ago

my protractor skills are not solid enough yet

They're almost certainly better than mine. Something i need to work on. Presumably someone out there has tested an fbook login with protractor

mebibou commented 7 years ago

FYI, I am using this piece of code for google login, which you can easily adapt for facebook:

function _checkPresenceOf(selector) {
  return browser.wait(function() {
    return browser.isElementPresent($(selector));
  }, 5000, selector + ' not present');
}

var handles = null;
browser.getAllWindowHandles()
  .then(function(_handles_) {
    handles = _handles_;
  })
  .then(function() {
    return browser.switchTo().window(handles[1]);
  })
  .then(function() {
    return _checkPresenceOf('#Email');
  })
  .then(function() {
    $('#Email').sendKeys('test@gmail.com');
    return $('#next').click();
  })
  .then(function() {
    return browser.driver.sleep(500);
  })
  .then(function() {
    return _checkPresenceOf('#Passwd');
  })
  .then(function() {
    $('#Passwd').sendKeys('test');
    return $('#signIn').click();
  })
  .then(function() {
    return browser.switchTo().window(handles[0]);
  });
lathonez commented 7 years ago

Keeping this open as I think it's ionic (mobile) specific.

murraybauer commented 7 years ago

@lathonez I thought ripple was dead? Only emulates very few native plugins e.g. geo location.

Microsoft announced their own open source cordova simulator 6-9 months ago to replace it: https://github.com/Microsoft/cordova-simulate

lathonez commented 7 years ago

Thanks for the link.