Cómo reproducir un video dentro de un iframe usando Selenium con Node.js?

05 Aug, 2023 Programación 0

Estoy tratando de reproducir un video dentro de un </code> utilizando selenium con node.js. He intentado lo siguiente:</p> <pre><code>driver.sleep("2000"); await driver.switchTo().frame(0); let playVideo = By.id("shakaVid"); // await driver.switchTo().frame(driver.findElement(playVideo)); await driver.wait(until.elementLocated(playVideo), 15*1000); await driver.findElement(playVideo).play();</code></pre> <p>Estoy obteniendo el error <code>TimeoutError: Esperando que el elemento esté ubicado By(css selector, *[id="shakaVid"])</code>. También he intentado <code>By.css("iframe html > body > video")</code> pero ninguno de estos está funcionando. Y no sé cómo probar que selenium esté cambiando su enfoque al iframe. Por lo tanto, he intentado varias cosas.</p> <p>Así es como está mi HTML:<br /> <a href="https://i.stack.imgur.com/xssYY.png"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://i.stack.imgur.com/xssYY.png" alt="Elements"><noscript><img decoding="async" src="https://i.stack.imgur.com/xssYY.png" alt="Elements"></noscript></a></p> <div id='jp-relatedposts' class='jp-relatedposts' > </div> </article> <div class="like-btn"> <form id="like-it-form" action="https://es.davy.ai/wp-admin/admin-ajax.php" method="post"> <span class="like-it "> <i class="fa fa-thumbs-o-up"></i>0 </span> <input type="hidden" name="post_id" value="672782"/> <input type="hidden" name="action" value="like_it"/> </form> </div> <span class="tags"><strong>Tags:  </strong><a href="https://es.davy.ai/tag/amazon-javascript-sdk/" rel="tag">AMAZON-JAVASCRIPT-SDK</a>, <a href="https://es.davy.ai/tag/amp-html/" rel="tag">AMP-HTML</a>, <a href="https://es.davy.ai/tag/docker-selenium/" rel="tag">DOCKER-SELENIUM</a>, <a href="https://es.davy.ai/tag/iframe/" rel="tag">IFRAME</a></span> <section id="comments"> <h4 id="comments-title"> Answer </h4> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-107987"> <article id="comment-107987"> <a href="https://davy.ai/author/davy-ai/"> <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt='Avatar for davy.ai' data-src='https://secure.gravatar.com/avatar/bf4d7168c7a9ebc19524b47cec601788?s=60&d=blank&r=g' data-srcset='https://secure.gravatar.com/avatar/bf4d7168c7a9ebc19524b47cec601788?s=120&d=blank&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' decoding='async'/><noscript><img alt='Avatar for davy.ai' src='https://secure.gravatar.com/avatar/bf4d7168c7a9ebc19524b47cec601788?s=60&d=blank&r=g' srcset='https://secure.gravatar.com/avatar/bf4d7168c7a9ebc19524b47cec601788?s=120&d=blank&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' decoding='async'/></noscript> </a> <div class="comment-meta"> <h5 class="author"> <cite class="fn"><a href="https://davy.ai/author/davy-ai/" class="url" rel="ugc external nofollow">davy.ai</a></cite> </h5> <p class="date"> <a href="https://es.davy.ai/como-reproducir-un-video-dentro-de-un-iframe-usando-selenium-con-node-js/#comment-107987"> <time datetime="2023-08-05T10:31:02+00:00"> August 5, 2023 at 10:31 am </time> </a> </p> </div> <div class="comment-body"> <p>Parece que estás intentando localizar el elemento de video dentro del iframe utilizando el atributo id. Sin embargo, según la estructura HTML proporcionada, el id “shakaVid” no está presente dentro del elemento iframe, sino en el documento principal. Por lo tanto, primero debes cambiar al iframe utilizando su índice o selector, y luego localizar el elemento de video utilizando su nombre de etiqueta u otro selector apropiado, como una clase CSS.</p> <p>Aquí tienes un ejemplo de solución en Javascript:</p> <pre><code class="language-js">// Suponiendo que ya has creado una instancia de webdriver "driver" // Espera a que se localice el iframe await driver.wait(until.elementLocated(By.css("iframe#myFrame")), 15*1000); // Cambia al iframe let frameElement = await driver.findElement(By.css("iframe#myFrame")); await driver.switchTo().frame(frameElement); // Espera a que se localice el elemento de video dentro del iframe await driver.wait(until.elementLocated(By.tagName("video")), 15*1000); // Reproduce el video let video = await driver.findElement(By.tagName("video")); await video.play(); </code></pre> <p>En este ejemplo, primero esperamos a que se localice el elemento iframe utilizando su id “myFrame”. Luego cambiamos a este iframe pasando el WebElement correspondiente a <code>switchTo().frame()</code>. A continuación, esperamos a que se localice el elemento de video dentro del iframe utilizando su nombre de etiqueta “video”. Finalmente, obtenemos una referencia al elemento de video y llamamos a su método <code>play()</code> para empezar a reproducir el video.</p> </div> </article> </li> </ol> <p class="nocomments">Comments are closed.</p> </section> </div>  </div> </div> </div>  <footer id='footer-wrapper'><div id="footer" class="container"> <div class="row"> <div class="span3"> </div> <div class="span3"> </div> <div class="span3"> </div> <div class="span3"> </div> </div> </div>   <div id="footer-bottom-wrapper"> <div id="footer-bottom" class="container"> <div class="row"> <div class="span6"> <p class="copyright"> Derechos de autor (c) 2023. Todos los derechos reservados. </p> </div> <div class="span6"> <ul class="social-nav clearfix"> </ul> </div> </div> </div> </div>  </footer>  <a href="#top" id="scroll-top"></a> <div style="display:none"> <div class="grofile-hash-map-bf4d7168c7a9ebc19524b47cec601788"> </div> </div> <script type="text/javascript" src="https://secure.gravatar.com/js/gprofiles.js?ver=202438" id="grofiles-cards-js"></script> <script type="text/javascript" id="wpgroho-js-extra"> /* <![CDATA[ */ var WPGroHo = {"my_hash":""}; /* ]]> */ </script> <script type="text/javascript" src="https://c0.wp.com/p/jetpack/13.8.1/modules/wpgroho.js" id="wpgroho-js"></script> <script data-optimized="1" type="text/javascript" src="https://es.davy.ai/wp-content/litespeed/js/c7ecf09c2722d7d1cf3bf65d6fc01b8a.js?ver=867ac" id="prettyphoto-js"></script> <script data-optimized="1" type="text/javascript" src="https://es.davy.ai/wp-content/litespeed/js/7e1ed43509f57ad019fe0a8e50b8169d.js?ver=1b612" id="jquery-easing-js"></script> <script data-optimized="1" type="text/javascript" src="https://es.davy.ai/wp-content/litespeed/js/436d9763218aa3991112674569772b2f.js?ver=ec59b" id="jquery-validation-js"></script> <script type="text/javascript" src="https://c0.wp.com/c/6.6.2/wp-includes/js/jquery/jquery.form.min.js" id="jquery-form-js"></script> <script data-optimized="1" type="text/javascript" src="https://es.davy.ai/wp-content/litespeed/js/5093d9ce74f74f7e02ed644e791ca81b.js?ver=054e0" id="liveSearch-js"></script> <script type="text/javascript" id="custom-js-extra"> /* <![CDATA[ */ var localized = {"nav_title":"Go to...","home_url":"https:\/\/es.davy.ai\/"}; /* ]]> */ </script> <script data-optimized="1" type="text/javascript" src="https://es.davy.ai/wp-content/litespeed/js/5da3a92f577a3e762ec35ea082c84b25.js?ver=f8fed" id="custom-js"></script> <script type="text/javascript" src="https://c0.wp.com/c/6.6.2/wp-includes/js/comment-reply.min.js" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://stats.wp.com/e-202438.js" id="jetpack-stats-js" data-wp-strategy="defer"></script> <script type="text/javascript" id="jetpack-stats-js-after"> /* <![CDATA[ */ _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"219275372\",\"post\":\"672782\",\"tz\":\"0\",\"srv\":\"es.davy.ai\",\"j\":\"1:13.8.1\"}") ]); _stq.push([ "clickTrackerInit", "219275372", "672782" ]); /* ]]> */ </script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script></body> </html>

¿Tienes una pregunta?

Cómo reproducir un video dentro de un iframe usando Selenium con Node.js?