1 files changed, 83 insertions, 49 deletions

diff --git a/client/e2e/src/po/video-watch.po.ts b/client/e2e/src/po/video-watch.po.ts
index c875d5854..01061d5d4 100644
--- a/client/e2e/src/po/video-watch.po.ts
+++ b/client/e2e/src/po/video-watch.po.ts
@@ -1,5 +1,4 @@
-import { browser, by, element, ElementFinder, ExpectedConditions } from 'protractor'
-import { browserSleep, isMobileDevice } from '../utils'
+import { browserSleep, go } from '../utils'
 
 export class VideoWatchPage {
   async goOnVideosList (isMobileDevice: boolean, isSafari: boolean) {
@@ -12,19 +11,19 @@ export class VideoWatchPage {
       url = '/videos/recently-added'
     }
 
-    await browser.get(url, 20000)
+    await go(url)
 
     // Waiting the following element does not work on Safari...
     if (isSafari) return browserSleep(3000)
 
-    const elem = element.all(by.css('.videos .video-miniature .video-miniature-name')).first()
-    return browser.wait(browser.ExpectedConditions.visibilityOf(elem))
+    await $('.videos .video-miniature .video-miniature-name').waitForDisplayed()
   }
 
-  getVideosListName () {
-    return element.all(by.css('.videos .video-miniature .video-miniature-name'))
-                  .getText()
-                  .then((texts: any) => texts.map((t: any) => t.trim()))
+  async getVideosListName () {
+    const elems = await $$('.videos .video-miniature .video-miniature-name')
+    const texts = await Promise.all(elems.map(e => e.getText()))
+
+    return texts.map(t => t.trim())
   }
 
   waitWatchVideoName (videoName: string, isMobileDevice: boolean, isSafari: boolean) {
@@ -33,99 +32,134 @@ export class VideoWatchPage {
     // On mobile we display the first node, on desktop the second
     const index = isMobileDevice ? 0 : 1
 
-    const elem = element.all(by.css('.video-info .video-info-name')).get(index)
-    return browser.wait(browser.ExpectedConditions.textToBePresentInElement(elem, videoName))
+    return browser.waitUntil(async () => {
+      return (await $$('.video-info .video-info-name')[index].getText()).includes(videoName)
+    })
   }
 
   getVideoName () {
-    return this.getVideoNameElement().getText()
+    return this.getVideoNameElement().then(e => e.getText())
   }
 
   async goOnAssociatedEmbed () {
-    let url = await browser.getCurrentUrl()
+    let url = await browser.getUrl()
     url = url.replace('/w/', '/videos/embed/')
     url = url.replace(':3333', ':9001')
 
-    return browser.get(url)
+    return go(url)
   }
 
-  async goOnP2PMediaLoaderEmbed () {
-    return browser.get('https://peertube2.cpy.re/videos/embed/969bf103-7818-43b5-94a0-de159e13de50')
+  goOnP2PMediaLoaderEmbed () {
+    return go(
+      'https://peertube2.cpy.re/videos/embed/969bf103-7818-43b5-94a0-de159e13de50'
+    )
   }
 
-  async goOnP2PMediaLoaderPlaylistEmbed () {
-    return browser.get('https://peertube2.cpy.re/video-playlists/embed/73804a40-da9a-40c2-b1eb-2c6d9eec8f0a')
+  goOnP2PMediaLoaderPlaylistEmbed () {
+    return go(
+      'https://peertube2.cpy.re/video-playlists/embed/73804a40-da9a-40c2-b1eb-2c6d9eec8f0a'
+    )
   }
 
   async clickOnVideo (videoName: string) {
-    const video = element.all(by.css('.videos .video-miniature .video-miniature-name'))
-    .filter(e => e.getText().then(t => t === videoName ))
-    .first()
+    const video = async () => {
+      const videos = await $$('.videos .video-miniature .video-miniature-name').filter(async e => {
+        const t = await e.getText()
+
+        return t === videoName
+      })
+
+      return videos[0]
+    }
+
+    await browser.waitUntil(async () => {
+      const elem = await video()
 
-    await browser.wait(browser.ExpectedConditions.elementToBeClickable(video))
-    await video.click()
+      return elem?.isClickable()
+    });
 
-    await browser.wait(browser.ExpectedConditions.urlContains('/w/'))
+    (await video()).click()
+
+    await browser.waitUntil(async () => (await browser.getUrl()).includes('/w/'))
   }
 
   async clickOnFirstVideo () {
-    const video = element.all(by.css('.videos .video-miniature .video-thumbnail')).first()
-    const videoName = element.all(by.css('.videos .video-miniature .video-miniature-name')).first()
+    const video = () => $('.videos .video-miniature .video-thumbnail')
+    const videoName = () => $('.videos .video-miniature .video-miniature-name')
+
+    await video().waitForClickable()
 
-    // Don't know why but the expectation fails on Safari
-    await browser.wait(browser.ExpectedConditions.elementToBeClickable(video))
+    const textToReturn = await videoName().getText()
+    await video().click()
 
-    const textToReturn = videoName.getText()
-    await video.click()
+    await browser.waitUntil(async () => (await browser.getUrl()).includes('/w/'))
 
-    await browser.wait(browser.ExpectedConditions.urlContains('/w/'))
     return textToReturn
   }
 
   async clickOnUpdate () {
-    const dropdown = element(by.css('my-video-actions-dropdown .action-button'))
+    const dropdown = $('my-video-actions-dropdown .action-button')
     await dropdown.click()
 
-    const items: ElementFinder[] = await element.all(by.css('.dropdown-menu.show .dropdown-item'))
+    await $('.dropdown-menu.show .dropdown-item').waitForDisplayed()
+    const items = await $$('.dropdown-menu.show .dropdown-item')
 
     for (const item of items) {
       const href = await item.getAttribute('href')
 
-      if (href && href.includes('/update/')) {
+      if (href?.includes('/update/')) {
         await item.click()
         return
       }
     }
   }
 
-  async clickOnSave () {
-    return element(by.css('.action-button-save')).click()
+  clickOnSave () {
+    return $('.action-button-save').click()
   }
 
   async createPlaylist (name: string) {
-    await element(by.css('.new-playlist-button')).click()
+    const newPlaylistButton = () => $('.new-playlist-button')
+
+    await newPlaylistButton().waitForClickable()
+    await newPlaylistButton().click()
+
+    const displayName = () => $('#displayName')
 
-    await element(by.css('#displayName')).sendKeys(name)
+    await displayName().waitForDisplayed()
+    await displayName().setValue(name)
 
-    return element(by.css('.new-playlist-block input[type=submit]')).click()
+    return $('.new-playlist-block input[type=submit]').click()
   }
 
   async saveToPlaylist (name: string) {
-    return element.all(by.css('my-video-add-to-playlist .playlist'))
-                  .filter(p => p.getText().then(t => t === name))
-                  .click()
+    const playlist = () => $('my-video-add-to-playlist').$(`.playlist=${name}`)
+
+    await playlist().waitForDisplayed()
+
+    return playlist().click()
   }
 
   waitUntilVideoName (name: string, maxTime: number) {
-    const elem = this.getVideoNameElement()
-
-    return browser.wait(ExpectedConditions.textToBePresentInElement(elem, name), maxTime)
+    return browser.waitUntil(async () => {
+      return (await this.getVideoName()) === name
+    }, { timeout: maxTime })
   }
 
-  private getVideoNameElement () {
+  private async getVideoNameElement () {
     // We have 2 video info name block, pick the first that is not empty
-    return element.all(by.css('.video-info-first-row .video-info-name'))
-                  .filter(e => e.getText().then(t => !!t))
-                  .first()
+    const elem = async () => {
+      const elems = await $$('.video-info-first-row .video-info-name').filter(e => e.isDisplayed())
+
+      return elems[0]
+    }
+
+    await browser.waitUntil(async () => {
+      const e = await elem()
+
+      return e?.isDisplayed()
+    })
+
+    return elem()
   }
 }