From d1bd87e066633b8a66266b280327ec828980916b Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 22 May 2018 16:02:29 +0200 Subject: Make it works with new autoplay policy --- client/e2e/protractor.conf.js | 35 +++++++++++--------------- client/e2e/src/po/video-upload.po.ts | 16 +++++++++--- client/e2e/src/po/video-watch.po.ts | 49 ++++++++++++++++++++---------------- client/e2e/src/videos.e2e-spec.ts | 19 +++++++++----- 4 files changed, 67 insertions(+), 52 deletions(-) (limited to 'client/e2e') 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) }) }) -- cgit v1.2.3