0

tengo el siguiente problema, intento hacer click sobre el boton "Iniciar test" con cypress, donde primero que nada debo capturar el elemento iframe que ya lo hice, sin embargo, no logro hacer click en dicho boton, a continuación dejo link de pagina y lo que tengo hasta ahora, espero puedan ayudarme! saludos.

Link: https://www.nperf.com/es/

codigo:

describe("Ingreso pagina Test", () => {
  const getIframeDocument = () => {
    return cy
      .get('iframe[id="nPerfSpeedTest"]')
      .its("0.contentDocument")
      .should("exist");
  };

  const getIframeBody = () => {
    return getIframeDocument()
      .its("body")
      .should("not.be.undefined")
      .then(cy.wrap);
  };

  it("gets the post", () => {
    cy.visit("https://www.nperf.com/es/").wait(10000);
    getIframeBody();
    cy.get(".gaugeButton").click(150, 150);
    cy.focused().click();
  });
});

1 respuesta 1

1

Esto es más un problema de headers enviados por el servidor.

Ten en cuenta que de ninguna manera de la que te puedas imaginar puedes alterar el contenido de un embedded, en este caso es un <iframe>, y eso quiere decir que es una ventana insertada en la ventana principal, por lo cual es inaccesible desde la ventana principal por temas de seguridad, si compruebas la consola, podrás ver un error que dice que lo que intentas hacer no es posible por políticas de seguridad.

Ahora, ten en cuenta que no puedes solucionar esto de ninguna manera si no tienes acceso al servidor al que te vas a referir con el <iframe>, es decir, si no puedes modificar los headers o los archivos de la página en concreto a la que quieres anclar con el <iframe>, no puedes modificar nada dentro de esa ventana, ya que el navegador no te lo permitirá.

Pero, si tienes acceso a modificar el código de la página o los headers, debes añadir la cabecera Access-Control-Allow-Origin, esta cabecera permite varias cosas que refieren a HTTP, entre ellas está poder modificar la página si se encuentra en un <iframe>, lo que debes hacer es solo permitir el origen del que vas a poner el <iframe>, por ejemplo

Si tengo un "dominio a" y un "dominio b", y quiero poner un <iframe> de un dominio en otro, el navegador puede que lo muestre, pero si quiero hacer operaciones dentro de ese <iframe> tengo que modificar los headers del dominio de destino, por ejemplo, la petición la estaría haciendo desde https://dominioa.com/some/url para obtener la página https://dominiob.com

En las especificaciones de los headers de la página del dominio b, tiene que incluir la cabecera que te dije antes

Access-Control-Allow-Origin: https://dominioa.com

Esto tiene que ver en su totalidad con CORS, por sus siglas Cross Origin Resource Sharing, es decir, compartimiento de recursos entre orígenes cruzados, esto es básicamente como una "lista" que el servidor especifica, por si no lo sabías, cada cosa hace una petición al servidor, el cual procesa la petición y devuelve una respuesta, el lado del cliente es el que ves en el navegador; HTML, CSS y JavaScript, normalmente se llama frontend, y el lado del servidor es el backend, donde van lenguajes de programación como PHP, JavaScript (con NodeJs o Deno), Perl, Python, Rubi, etc. Cuando el cliente hace una petición al servidor, el navegador antes que nada, hace una petición OPTIONS al servidor, esto es para ver si el servidor admite peticiones de este origen, si la respuesta es afirmativa, el navegador procede a enviar la petición, de lo contrario, el navegador deniega la petición y tira un error por CORS.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.