+MattGaunt

@gauntface

Setup

Caveats

Emulator vs Simulator vs Device

Android SDK - developer.android.com/sdk/

On the Right $PATH

Add platform-tools and tools directories to your PATH.

Play with adb and monitor.

* Use host GPU only works on Android 4.0.3 (API Level 15)

iOS Devices

If you want to use simulators to cover iOS devices you'll need XCode.

Development

Where's my localhost?

10.0.2.2

Localhost on your phone?

Device Labs

Responsive Inspector

Test

Weinre

MIHTool

Cloud Based Testing

Let's Talk Automated Testing

  • Unit Tests
    • Run them locally
    • ... or in the cloud (grunt-saucelabs, grunt-browserstack)
  • Test Scripts
    • WebDriver

Let's Talk Automated Testing

Select a browser:

var browserConfig = {
  browserName: 'android',
  version: '4',
  platform: 'Linux',
  deviceType: 'tablet',
  name: "Android-Tablet"
};

Let's Talk Automated Testing

Set-Up Saucelabs & Start

var remoteWebDriver = webdriver.remote(
  "ondemand.saucelabs.com",
  80,
  "<Username>",
  "<API Key>"
);

remoteWebDriver.chain()
  .init(browserConfig)
  .get('http://localhost:9001/', function() {
    takeScreenshot(config, screenshotConfig, function() {
      checkNavigation(function() {
        remoteWebDriver.quit(cb);
      });
    });
  });

Let's Talk Automated Testing

Take a Screenshot

remoteWebDriver.takeScreenshot(
  function(err, screenshot) {
    if(!screenshot) {
      cb(); return;
    }
    
    fs.writeFile(directory, 
      new Buffer(screenshot, "base64"),
      function(err) {
        if(err) {
          console.log("ERROR: screenshot couldn't be saved: "+err);
        }
        cb();
    });
  });

Let's Talk Automated Testing

Check Links

function checkNavigation(cb) {
  remoteWebDriver.elementByCssSelector('#blog > a', function(err, el) {
    assert.ok(el, "There is no #blog > a element");
    
    remoteWebDriver.clickElement(el, function() {
      remoteWebDriver.eval("window.location.href", function(err, href) {
        assert.ok(~href.indexOf('blog.gauntface.co.uk')
          , 'Wrong URL for blog link');
        cb();
      })
    })     
  })
}

Let's Talk Automated Testing

Full Example: http://goo.gl/5WsMy

  • Change orientation
  • Multiple configurations
  • Full demo you can play with :)

Faraday Cage

Live

Google Analytics - BreakPoints

Audience > Mobile > Devices
Primary Dimensions > Other > Screen Resolution

Google Analytics - Page Speed

Content > Site Speed > Overview
Advanced Segments > Mobile Traffic + Tablet Traffic

<Thank You!>