storycap fails if there is an `<iframe>` element

[yamanoku]

I created a Vue.js file that loads in an <iframe> by passing YouTube video IDs in props, and ran storycap. However, when I executed it, I got an error Error: Execution context is not available in detached frame.

Error: Execution context is not available in detached frame "https://www.youtube.com/embed/EngW7tLk6R8?enablejsapi=1&loop=0&playlist=EngW7tLk6R8&rel=0&modestbranding=1" (are you trying to evaluate?)
    at DOMWorld.executionContext (/home/runner/src/app/node_modules/puppeteer-core/lib/cjs/puppeteer/common/DOMWorld.js:82:19)
    at DOMWorld._onBindingCalled (/home/runner/src/app/node_modules/puppeteer-core/lib/cjs/puppeteer/common/DOMWorld.js:364:36)
    at /home/runner/src/app/node_modules/puppeteer-core/lib/cjs/puppeteer/common/DOMWorld.js:52:74
    at /home/runner/src/app/node_modules/puppeteer-core/lib/cjs/vendor/mitt/src/index.js:51:62
    at Array.map (<anonymous>)
    at Object.emit (/home/runner/src/app/node_modules/puppeteer-core/lib/cjs/vendor/mitt/src/index.js:51:43)
    at CDPSession.emit (/home/runner/src/app/node_modules/puppeteer-core/lib/cjs/puppeteer/common/EventEmitter.js:72:22)
    at CDPSession._onMessage (/home/runner/src/app/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:225:18)
    at Connection._onMessage (/home/runner/src/app/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:101:25)
    at WebSocket.<anonymous> (/home/runner/src/app/node_modules/puppeteer-core/lib/cjs/puppeteer/node/NodeWebSocketTransport.js:13:32)
error Command failed with exit code 1.
info Visit yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 1.

Resource Details

Resource

• Node.js: 16.14.0
• storycap: ^3.1.0
• storybook
  • @storybook/vue3: ~6.3.13
  • vue: ^3.2.29

Vue.js file

<template>
  <iframe id="youtube_player" :src="videoSource" title="YouTube video player" frameborder="0" allowfullscreen="1">
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'YoutubeEmbeddedPlayer',
  props: {
    containerClass: {
      type: String,
      required: false,
      default: null,
    },
    videoId: {
      type: String,
      required: true,
    },
  },
  computed: {
    videoSource: function () {
      return `https://www.youtube.com/embed/${this.videoId}?enablejsapi=1&loop=0&playlist=${this.videoId}&rel=0&modestbranding=1`;
    },
  },  
});
</script>

Storybook

import YoutubeEmbeddedPlayer from './YoutubeEmbeddedPlayer.vue';

export default {
  title: 'pages/root_pages/YoutubeEmbeddedPlayer',
  component: YoutubeEmbeddedPlayer,
};

const Template = (args) => ({
  components: { YoutubeEmbeddedPlayer },
  setup: () => ({ args }),
  template: `<div><YoutubeEmbeddedPlayer v-bind=args /></div>`,
});

export const VideoIdExists = Template.bind({});

VideoIdExists.args = {
  videoId: 'EngW7tLk6R8',
};

[yamanoku]

There was an issue related to this error that had to do with puppeteer. https://github.com/puppeteer/puppeteer/issues/7814

It has since been addressed and seems to have been improved in version 13.4.0. https://github.com/puppeteer/puppeteer/pull/8024 https://github.com/puppeteer/puppeteer/releases/tag/v13.4.0

[sashless]

I could fix this locally by using resolutions field to bump internal deps as it is pinned to ^9.0.0 currently

resolutions: {
        "puppeteer-core": "^13.5.2",
},
dependencies: {
        "puppeteer": "^13.5.2",
        "puppeteer-core": "^13.5.2",
}

EDIT:

Looks like i am facing now this one https://github.com/reg-viz/storycap/issues/545

Sometimes it works, sometimes it hangs.