Use postMessage to try to avoid timeout

Author: sanason

features/support/step_definitions/youtube_steps.js

@@ -4,12 +4,12 @@ When("I wait for the YouTube iframe API to load", async function () {
   await this.page.waitForFunction(() => typeof YT !== 'undefined' && YT.loaded);
 });
 
-When("I click on YouTube video {string}", async function (videoId) {
-  const elementHandle = await this.page.$('iframe[id="' + videoId + '"]');
-  const frame = await elementHandle.contentFrame();
-
-  await frame.waitForSelector('#player');
-  await frame.click('#player');
+When("I play YouTube video {string}", async function (videoId) {
+  await this.page.evaluate((id) => {
+    const iframe = document.querySelector('iframe[id="' + id + '"]');
+    const origin = new URL(iframe.src).origin;
+    iframe.contentWindow.postMessage(JSON.stringify({ event: 'command', func: 'playVideo', args: [] }), origin);
+  }, videoId);
 });
 
 const mockYouTubeScript = `

features/youtube_tracking_integration.feature

@@ -11,8 +11,8 @@ Feature: DAP successfully integrates with the YouTube iframe API
   Scenario:
     When I load the test page "youtube.html"
     And I wait for the YouTube iframe API to load
-    And I click on YouTube video "LcvYjkCBY28"
-    And I wait 10 seconds
+    And I play YouTube video "LcvYjkCBY28"
+    And I wait 5 seconds
     Then a "video_start" event is sent to DAP with parameters
       | video_provider      | youtube                                     |
       | video_id            | LcvYjkCBY28                                 |