Merge pull request #33648 from albertopq/1219627-video-test

Bug 1219627 - Implement test_browser_play_video as a Gij test r=mwargers

apps/system/test/marionette/browser_video_test.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var Server = require('../../../../shared/test/integration/server');
+var Rocketbar = require('../../../system/test/marionette/lib/rocketbar');
+var VideoPlayer = require('../../../system/test/marionette/lib/video_player');
+var assert = require('assert');
+
+marionette('Video', function() {
+  var system, actions, rocketbar, client, server, player;
+
+  var ACCEPTABLE_DELAY = 0.2;
+
+  client = marionette.client({
+    desiredCapabilities: { raisesAccessibilityExceptions: false }
+  });
+
+  suiteSetup(function(done) {
+    Server.create(__dirname + '/fixtures/', function(err, _server) {
+      server = _server;
+      done();
+    });
+  });
+
+  suiteTeardown(function() {
+    server.stop();
+  });
+
+  setup(function() {
+    system = client.loader.getAppClass('system');
+    player = new VideoPlayer(client);
+    rocketbar = new Rocketbar(client);
+    actions = client.loader.getActions();
+    system.waitForFullyLoaded();
+  });
+
+  // https://moztrap.mozilla.org/manage/case/6073/
+  test('Confirm video playback', function() {
+    var videoUrl = server.url('VID_0001.mp4');
+    rocketbar.homescreenFocus();
+    rocketbar.enterText(videoUrl, true);
+    var browserFrame = system.waitForUrlLoaded(videoUrl);
+    client.switchToFrame(browserFrame);
+
+    player.waitForVideoLoaded();
+    assert(player.isPlaying());
+
+    player.invokeControls();
+
+    var stoppedAt = player.currentTimestamp;
+    player.tapPause();
+    assert(!player.isPlaying());
+
+    var resumedAt = player.currentTimestamp;
+    player.tapPlay();
+    player.waitForVideoLoaded();
+    assert(player.isPlaying());
+
+    assert(stoppedAt - resumedAt < ACCEPTABLE_DELAY);
+
+    player.invokeControls();
+    player.tapMute();
+    player.tapUnmute();
+
+    player.invokeControls();
+    player.tapFullscreen();
+
+    client.switchToFrame();
+    client.waitFor(function() {
+      return system.permissionDialog.displayed();
+    });
+
+    system.permissionYes.tap();
+    system.gotoBrowser(videoUrl);
+
+    client.waitFor(function() {
+      return player.isFullScreen();
+    });
+
+    player.invokeControls();
+    player.tapFullscreen();
+
+    client.waitFor(function() {
+      return !player.isFullScreen() && !player.visibleControls();
+    });
+  });
+});

apps/system/test/marionette/lib/system.js

@@ -55,6 +55,8 @@ System.Selector = Object.freeze({
   downloadDialog: '#downloadConfirmUI',
   imeMenu: '.ime-menu',
   inlineActivity: '.appWindow.inline-activity',
+  permissionDialog: '#permission-dialog',
+  permissionYes: '#permission-yes',
   pinDialog: '.appWindow.active .chrome .pin-dialog',
   pinButton: '.appWindow.active .chrome .pin-button',
   sleepMenuContainer: '#sleep-menu-container',
@@ -243,6 +245,14 @@ System.prototype = {
     return this.client.helper.waitForElement(System.Selector.inlineActivity);
   },
 
+  get permissionDialog() {
+    return this.client.helper.waitForElement(System.Selector.permissionDialog);
+  },
+
+  get permissionYes() {
+    return this.client.helper.waitForElement(System.Selector.permissionYes);
+  },
+
   get pinDialog() {
     return this.client.findElement(System.Selector.pinDialog);
   },

apps/system/test/marionette/lib/video_player.js

@@ -0,0 +1,130 @@
+'use strict';
+
+function VideoPlayer(client) {
+  this.client = client.scope({
+    searchTimeout: 20000
+  });
+  this.chromeClient = client.scope({
+    searchTimeout: 20000,
+    context: 'chrome'
+  });
+}
+
+module.exports = VideoPlayer;
+
+VideoPlayer.prototype = {
+  client: null,
+
+  Selectors: Object.freeze({
+    root: 'video',
+    playButton: 'playButton',
+    muteButton: 'muteButton',
+    fullscreenButton: 'fullscreenButton'
+  }),
+
+  get rootElement() {
+    return this.client.helper.waitForElement(this.Selectors.root);
+  },
+
+  get currentTimestamp() {
+    return parseFloat(this.rootElement.getAttribute('currentTime'));
+  },
+
+  isPlaying: function() {
+    return this.rootElement.getAttribute('paused') !== 'true';
+  },
+
+  isMuted: function() {
+    return this.rootElement.getAttribute('muted') === 'true';
+  },
+
+  isFullScreen: function() {
+    return this.client.executeScript(function() {
+      var fullScreenElement = document.mozFullScreenElement;
+      var videoElement = document.querySelector('video');
+      return fullScreenElement === videoElement;
+    });
+  },
+
+  waitForVideoLoaded: function() {
+    this.client.waitFor(function() {
+      return this.rootElement.getAttribute('readyState') === '4';
+    }.bind(this));
+  },
+
+  visibleControls: function() {
+    var location = this._getLocation(this.Selectors.playButton);
+    return location.x > 0;
+  },
+
+  invokeControls: function() {
+    this.client.waitFor(function() {
+      return !this.visibleControls();
+    }.bind(this));
+
+    this.rootElement.tap();
+
+    this.client.waitFor(function() {
+      return this.visibleControls();
+    }.bind(this));
+  },
+
+  _tapVideoControl: function(name) {
+    var location = this._getLocation(name);
+    this.rootElement.tap(location.x, location.y);
+  },
+
+  _getLocation: function(name) {
+    var url = this.client.getUrl();
+    return this.chromeClient.executeScript(function(url, name) {
+      var Components = window.Components;
+      var systemFrame = document.getElementsByTagName('iframe')[0];
+      var systemDoc = systemFrame.contentWindow.document;
+      var frame = systemDoc.querySelector('iframe[src="' + url + '"');
+      var video = frame.contentWindow.document.getElementsByTagName('video')[0];
+      var a = Components.classes['@mozilla.org/inspector/dom-utils;1']
+        .getService(Components.interfaces.inIDOMUtils)
+        .getChildrenForNode(video, true);
+
+      var element = a[1].ownerDocument
+        .getAnonymousElementByAttribute(a[1], 'class', name);
+      var videoPosition = video.getBoundingClientRect();
+      var elementPosition = element.getBoundingClientRect();
+      var x = elementPosition.x - videoPosition.x;
+      var y = elementPosition.y - videoPosition.y;
+      return {x: x, y: y};
+    }, [url, name]);
+  },
+
+  tapPlay: function() {
+    this._tapVideoControl(this.Selectors.playButton);
+    this.client.waitFor(function() {
+      return this.isPlaying();
+    }.bind(this));
+  },
+
+  tapPause: function() {
+    this._tapVideoControl(this.Selectors.playButton);
+    this.client.waitFor(function() {
+      return !this.isPlaying();
+    }.bind(this));
+  },
+
+  tapMute: function() {
+    this._tapVideoControl(this.Selectors.muteButton);
+    this.client.waitFor(function() {
+      return this.isMuted();
+    }.bind(this));
+  },
+
+  tapUnmute: function() {
+    this._tapVideoControl(this.Selectors.muteButton);
+    this.client.waitFor(function() {
+      return !this.isMuted();
+    }.bind(this));
+  },
+
+  tapFullscreen: function() {
+    this._tapVideoControl(this.Selectors.fullscreenButton);
+  }
+};