Try with the YT player API commands

snowplow · Jul 11, 2023 · 5d34e0f · 5d34e0f
1 parent 665e204
commit 5d34e0f
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 44 deletions.
diff --git a/trackers/javascript-tracker/test/integration/youtube.test.ts b/trackers/javascript-tracker/test/integration/youtube.test.ts
@@ -1,6 +1,5 @@
 import { fetchResults } from '../micro';
 import { waitUntil } from './helpers';
-import { Key } from 'webdriverio';
 
 const makeExpectedEvent = (
   eventType: string,
@@ -20,7 +19,7 @@ const makeExpectedEvent = (
           controls: true,
           loaded: jasmine.any(Number),
           unstarted: jasmine.any(Boolean),
-          url: jasmine.stringMatching(/https\:\/\/www\.youtube\.com\/watch\?(t=\d+&)?v=zSM4ZyVe8xs/),
+          url: jasmine.stringMatching(/https\:\/\/www\.youtube\.com\/watch\?(t=\d+&)?v=ublEqhffop0/),
           ...values?.youtube,
         },
       },
@@ -132,45 +131,46 @@ describe('Youtube tracking', () => {
 
     beforeAll(async () => {
       await browser.url('/youtube/tracking.html');
-      await waitUntil(browser, () => $('#youtube').isExisting(), {
+      await waitUntil(browser, () => $('#player').isExisting(), {
         timeout: 5000,
         timeoutMsg: 'expected youtube after 5s',
       });
 
-      const player = $('#youtube');
-      await player.click(); // emits 'playbackqualitychange' and 'play';
-      console.log('before first keys');
-      await browser.keys(Array(2).fill(Key.ArrowRight)); // Skips to the point just before 'percentprogress' fires
-      console.log('first keys gone');
-      await browser.pause(15000); // Wait to track percentprogress events
-
-      const events = [
-        async () => await browser.keys([Key.Shift, '.', Key.Shift]), // Increase playback rate
-        async () => await browser.keys([Key.ArrowRight]), // Seek
-        async () => await browser.keys([Key.ArrowDown]), // Volume down
-        async () => await browser.keys(['k']), // Pause
-        async () => await browser.keys([Key.Numpad9]), // Skip as close as we can to the end
-      ];
-
-      for (const e of events) {
-        console.log('taken: ', String(e));
-        await e();
-        await browser.pause(200);
-      }
+      await browser.pause(1000);
 
-      // We've got ~216 seconds left to skip
-      for (let i = 0; i < 60; i++) {
-        // Ended
-        await browser.keys([Key.ArrowRight]);
-        await browser.pause(50);
-      }
+      await $('#player').click();
       await browser.pause(1000);
 
-      log = await browser.call(async () => await fetchResults(dockerUrl));
+      await browser.execute(() => {
+        var duration = player.getDuration();
+        player.seekTo(duration / 5);
+      });
+      await browser.pause(500);
 
-      // YouTube saves the volume level in localstorage, meaning loading a new page will have the same
-      // volume level as the end of this test, so we need to increase it again to return to the 'default' state
-      await browser.keys([Key.ArrowUp]);
+      await browser.execute(() => {
+        player.setPlaybackRate(1.25);
+      });
+      await browser.pause(4000);
+
+      await browser.execute(() => {
+        player.setVolume(player.getVolume() - 10);
+      });
+      await browser.pause(1000);
+
+      await browser.execute(() => {
+        player.pauseVideo();
+      });
+      await browser.pause(1000);
+
+      await browser.execute(() => {
+        var duration = player.getDuration();
+        player.seekTo(duration - 1);
+        player.playVideo();
+      });
+
+      await browser.pause(3000);
+
+      log = await browser.call(async () => await fetchResults(dockerUrl));
     });
 
     const expected = {
@@ -197,7 +197,7 @@ describe('Youtube tracking', () => {
         // percentprogress events seem not be tracked reliably in Safari, should investigate why
       }
       it('tracks ' + name, () => {
-        const expected = makeExpectedEvent(name, properties);
+        const expected = makeExpectedEvent(name, properties, 'player');
         const received = getFirstEventOfEventType(name);
         compare(expected, received);
       });
@@ -234,7 +234,7 @@ describe('Youtube tracking', () => {
       await browser.pause(500);
 
       await player2.click();
-      await browser.pause(500);
+      await browser.pause(3000);
 
       log = await browser.call(async () => await fetchResults(dockerUrl));
       const expectedOne = makeExpectedEvent('playbackqualitychange');
@@ -270,7 +270,7 @@ describe('Youtube tracking', () => {
 
       const player = $('#youtube');
       await player.click(); // emits 'playbackqualitychange' and 'play';
-      await browser.pause(1000);
+      await browser.pause(2000);
 
       log = await browser.call(async () => await fetchResults(dockerUrl));
 

diff --git a/trackers/javascript-tracker/test/pages/youtube/tracking-2-trackers.html b/trackers/javascript-tracker/test/pages/youtube/tracking-2-trackers.html
@@ -49,7 +49,7 @@
     id="youtube"
     width="560"
     height="315"
-    src="https://www.youtube.com/embed/zSM4ZyVe8xs"
+    src="https://www.youtube.com/embed/ublEqhffop0"
     title="YouTube video player"
     rel="0"
     frameborder="0"

diff --git a/trackers/javascript-tracker/test/pages/youtube/tracking-2-videos.html b/trackers/javascript-tracker/test/pages/youtube/tracking-2-videos.html
@@ -55,7 +55,7 @@
     id="youtube"
     width="560"
     height="315"
-    src="https://www.youtube.com/embed/zSM4ZyVe8xs"
+    src="https://www.youtube.com/embed/ublEqhffop0"
     title="YouTube video player"
     rel="0"
     frameborder="0"
@@ -66,7 +66,7 @@
     id="youtube-2"
     width="560"
     height="315"
-    src="https://www.youtube.com/embed/zSM4ZyVe8xs"
+    src="https://www.youtube.com/embed/ublEqhffop0"
     title="YouTube video player"
     rel="0"
     frameborder="0"

diff --git a/trackers/javascript-tracker/test/pages/youtube/tracking-player.html b/trackers/javascript-tracker/test/pages/youtube/tracking-player.html
@@ -42,7 +42,7 @@
     // `onYouTubeIframeAPIReady` will run once the API is loaded
     function onYouTubeIframeAPIReady() {
       new YT.Player('youtube', {
-        videoId: 'zSM4ZyVe8xs',
+        videoId: 'ublEqhffop0',
         events: {
           onReady: (e) =>
             window.snowplow('enableYouTubeTracking', {

diff --git a/trackers/javascript-tracker/test/pages/youtube/tracking.html b/trackers/javascript-tracker/test/pages/youtube/tracking.html
@@ -20,7 +20,7 @@
       player = new YT.Player('player', {
         height: '315',
         width: '560',
-        videoId: 'zSM4ZyVe8xs',
+        videoId: 'ublEqhffop0',
         playerVars: {
           playsinline: 1,
         },
@@ -31,7 +31,7 @@
     }
   </script>
   <script>
-    function initTracking() {
+    function initTracking(event) {
       (function (p, l, o, w, i, n, g) {
         if (!p[i]) {
           p.GlobalSnowplowNamespace = p.GlobalSnowplowNamespace || [];
@@ -53,11 +53,10 @@
       });
 
       window.snowplow('enableYouTubeTracking', {
-        id: 'youtube',
+        id: player,
         options: {
           label: 'test-label',
           captureEvents: ['DefaultEvents'],
-          boundaries: [1],
         },
       });
     }