Make it works with new autoplay policy

4 files changed, 67 insertions, 52 deletions

diff --git a/client/e2e/protractor.conf.js b/client/e2e/protractor.conf.js
index a4fd12473..5dcd77284 100644
--- a/client/e2e/protractor.conf.js
+++ b/client/e2e/protractor.conf.js
@@ -5,16 +5,14 @@ const {SpecReporter} = require('jasmine-spec-reporter')
 
 exports.config = {
   allScriptsTimeout: 25000,
-  specs: [
-    './src/**/*.e2e-spec.ts'
-  ],
+  specs: ['./src/**/*.e2e-spec.ts'],
 
   seleniumAddress: 'http://hub-cloud.browserstack.com/wd/hub',
   commonCapabilities: {
     'browserstack.user': process.env.BROWSERSTACK_USER,
     'browserstack.key': process.env.BROWSERSTACK_KEY,
     'browserstack.local': true,
-    'project': 'PeerTube'
+    projec: 'PeerTube'
   },
 
   multiCapabilities: [
@@ -24,7 +22,8 @@ exports.config = {
     },
     {
       browserName: 'Safari',
-      version: '11.1'
+      version: '11.1',
+      resolution: '1920x1080'
     },
     {
       browserName: 'Firefox',
@@ -44,35 +43,29 @@ exports.config = {
       realMobile: 'true',
       os_version: '5.0'
     },
-    // {
-    //   browserName: 'Safari',
-    //   device: 'iPhone 6s',
-    //   realMobile: 'true',
-    //   os_version: '9.0'
-    // },
-    // {
-    //   browserName: 'Safari',
-    //   device: 'iPhone SE',
-    //   realMobile: 'true',
-    //   os_version: '11.2'
-    // }
+    {
+      browserName: 'Safari',
+      device: 'iPhone SE',
+      realMobile: 'true',
+      os_version: '11.2'
+    }
   ],
 
-  maxSessions: 1,
+  // maxSessions: 1,
   // BrowserStack compatible ports: https://www.browserstack.com/question/664
   baseUrl: 'http://localhost:3333/',
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 45000,
-    print: function () {}
+    print: function() {}
   },
 
-  onPrepare () {
+  onPrepare() {
     require('ts-node').register({
       project: require('path').join(__dirname, './tsconfig.e2e.json')
     })
-    jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}))
+    jasmine.getEnv().addReporter(new SpecReporter({   spec:  {  displayStacktrace: true    }  }))
   }
 }
 
diff --git a/client/e2e/src/po/video-upload.po.ts b/client/e2e/src/po/video-upload.po.ts
index 1ac696107..1978707e3 100644
--- a/client/e2e/src/po/video-upload.po.ts
+++ b/client/e2e/src/po/video-upload.po.ts
@@ -3,16 +3,26 @@ import { FileDetector } from 'selenium-webdriver/remote'
 import { join } from 'path'
 
 export class VideoUploadPage {
-  navigateTo () {
-    return browser.get('/videos/upload')
+  async navigateTo () {
+    await element(by.css('.header .upload-button')).click()
+
+    return browser.wait(browser.ExpectedConditions.visibilityOf(element(by.css('.upload-video-container'))))
   }
 
   async uploadVideo () {
     browser.setFileDetector(new FileDetector())
 
     const fileToUpload = join(__dirname, '../../fixtures/video.mp4')
+    const fileInputSelector = '.upload-video-container input[type=file]'
+    const parentFileInput = '.upload-video .button-file'
+
+    // Avoid sending keys on non visible element
+    await browser.executeScript(`document.querySelector('${fileInputSelector}').style.opacity = 1`)
+    // await browser.executeScript(`document.querySelector('${fileInputSelector}').style.opacity = 1`)
+    await browser.executeScript(`document.querySelector('${parentFileInput}').style.overflow = 'initial'`)
 
-    await element(by.css('.upload-video-container input[type=file]')).sendKeys(fileToUpload)
+    const elem = element(by.css(fileInputSelector))
+    await elem.sendKeys(fileToUpload)
 
     // Wait for the upload to finish
     await browser.wait(browser.ExpectedConditions.elementToBeClickable(this.getSecondStepSubmitButton()))
diff --git a/client/e2e/src/po/video-watch.po.ts b/client/e2e/src/po/video-watch.po.ts
index 0f37e3e33..19d02ff51 100644
--- a/client/e2e/src/po/video-watch.po.ts
+++ b/client/e2e/src/po/video-watch.po.ts
@@ -1,7 +1,7 @@
 import { by, element, browser } from 'protractor'
 
 export class VideoWatchPage {
-  async goOnVideosList (isIphoneDevice: boolean) {
+  async goOnVideosList (isIphoneDevice: boolean, isSafari: boolean) {
     let url: string
 
     if (isIphoneDevice === true) {
@@ -12,11 +12,16 @@ export class VideoWatchPage {
     }
 
     await browser.get(url)
-    return browser.wait(browser.ExpectedConditions.elementToBeClickable(element(this.getFirstVideoListSelector())))
+
+    // Waiting the following element does not work on Safari...
+    if (isSafari === true) return browser.sleep(3000)
+
+    const elem = element.all(by.css('.videos .video-miniature .video-miniature-name')).first()
+    return browser.wait(browser.ExpectedConditions.visibilityOf(elem))
   }
 
   getVideosListName () {
-    return element.all(this.getFirstVideoListSelector())
+    return element.all(by.css('.videos .video-miniature .video-miniature-name'))
                   .getText()
                   .then((texts: any) => texts.map(t => t.trim()))
   }
@@ -33,19 +38,19 @@ export class VideoWatchPage {
       .then(seconds => parseInt(seconds, 10))
   }
 
-  async pauseVideo (pauseAfterMs: number, isMobileDevice: boolean, isIphoneDevice: boolean) {
-    if (isMobileDevice === true) {
-      if (isIphoneDevice === false) {
-        const playButton = element(by.css('.vjs-big-play-button'))
-        await browser.wait(browser.ExpectedConditions.elementToBeClickable(playButton))
-        await playButton.click()
-      } else {
-        const playButton = element(by.css('video'))
-        await browser.wait(browser.ExpectedConditions.elementToBeClickable(playButton))
-        await playButton.click()
-      }
+  async pauseVideo (pauseAfterMs: number, isAutoplay: boolean, isSafari: boolean) {
+    if (isAutoplay === false) {
+      const playButton = element(by.css('.vjs-big-play-button'))
+      await browser.wait(browser.ExpectedConditions.elementToBeClickable(playButton))
+      await playButton.click()
+    }
+
+    if (isSafari === true) {
+      await browser.sleep(1000)
+      await element(by.css('.vjs-play-control')).click()
     }
 
+    await browser.sleep(1000)
     await browser.wait(browser.ExpectedConditions.invisibilityOf(element(by.css('.vjs-loading-spinner'))))
 
     const el = element(by.css('div.video-js'))
@@ -53,11 +58,7 @@ export class VideoWatchPage {
 
     await browser.sleep(pauseAfterMs)
 
-    if (isIphoneDevice === true) {
-      // document.webkitCancelFullScreen()
-    } else {
-      return el.click()
-    }
+    return el.click()
   }
 
   async clickOnVideo (videoName: string) {
@@ -69,7 +70,7 @@ export class VideoWatchPage {
   }
 
   async clickOnFirstVideo () {
-    const video = element(by.css('.videos .video-miniature:first-child .video-miniature-name'))
+    const video = element.all(by.css('.videos .video-miniature .video-miniature-name')).first()
     await browser.wait(browser.ExpectedConditions.elementToBeClickable(video))
     const textToReturn = video.getText()
 
@@ -79,7 +80,11 @@ export class VideoWatchPage {
     return textToReturn
   }
 
-  private getFirstVideoListSelector () {
-    return by.css('.videos .video-miniature-name')
+  async goOnAssociatedEmbed () {
+    let url = await browser.getCurrentUrl()
+    url = url.replace('/watch/', '/embed/')
+    url = url.replace(':3333', ':9001')
+
+    return browser.get(url)
   }
 }
diff --git a/client/e2e/src/videos.e2e-spec.ts b/client/e2e/src/videos.e2e-spec.ts
index c21bc163e..f216f8dd1 100644
--- a/client/e2e/src/videos.e2e-spec.ts
+++ b/client/e2e/src/videos.e2e-spec.ts
@@ -10,6 +10,7 @@ describe('Videos workflow', () => {
   const videoName = new Date().getTime() + ' video'
   let isMobileDevice = false
   let isIphoneDevice = false
+  let isSafari = false
 
   beforeEach(async () => {
     browser.waitForAngularEnabled(false)
@@ -21,6 +22,7 @@ describe('Videos workflow', () => {
     const caps = await browser.getCapabilities()
     isMobileDevice = caps.get('realMobile') === 'true' || caps.get('realMobile') === true
     isIphoneDevice = caps.get('device') === 'iphone'
+    isSafari = caps.get('browserName') && caps.get('browserName').toLowerCase() === 'safari'
   })
 
   it('Should log in', () => {
@@ -38,14 +40,14 @@ describe('Videos workflow', () => {
       return
     }
 
-    pageUploadPage.navigateTo()
+    await pageUploadPage.navigateTo()
 
     await pageUploadPage.uploadVideo()
     return pageUploadPage.validSecondUploadStep(videoName)
   })
 
   it('Should list the video', async () => {
-    await videoWatchPage.goOnVideosList(isIphoneDevice)
+    await videoWatchPage.goOnVideosList(isIphoneDevice, isSafari)
 
     if (isMobileDevice) {
       console.log('Skipping because we are on a real device and BrowserStack does not support file upload.')
@@ -59,16 +61,21 @@ describe('Videos workflow', () => {
   it('Should go on video watch page', async () => {
     let videoNameToExcept = videoName
 
-    if (isMobileDevice && isIphoneDevice) videoNameToExcept = 'PeerTube_Mobile.v.1'
-
-    if (isMobileDevice && isIphoneDevice === false) videoNameToExcept = await videoWatchPage.clickOnFirstVideo()
+    if (isMobileDevice) videoNameToExcept = await videoWatchPage.clickOnFirstVideo()
     else await videoWatchPage.clickOnVideo(videoName)
 
     return videoWatchPage.waitWatchVideoName(videoNameToExcept)
   })
 
   it('Should play the video', async () => {
-    await videoWatchPage.pauseVideo(7000, isMobileDevice, isIphoneDevice)
+    await videoWatchPage.pauseVideo(7000, !isMobileDevice, isSafari)
+    expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
+  })
+
+  it('Should watch the associated embed video', async () => {
+    await videoWatchPage.goOnAssociatedEmbed()
+
+    await videoWatchPage.pauseVideo(7000, false, isSafari)
     expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
   })
 })