Cypress Screenshots not properly targeting elements in iFrame #14283

knt36 · 2020-12-23T01:48:51Z

Hi.

I didn't think my question accurately described what was going on so I refined it.

With the cypress screenshot feature, I am having trouble taking images of elements inside of a second iframe in addition to the iframe that cypress set it. Basically having trouble with iframes.

Below shows an attempt to take a picture of an image in an iframe, but the offset seems to be the amount of height and width of anything outside of the iframe. The coordinates of the shot seems to be relative to the outer iframe (the whole image) instead of relative to the inside iframe that the elemnts are contained inside of.

Is there any ongoing issue related to this?

jennifer-shehane · 2020-12-23T07:31:07Z

We're not aware of any issues exactly like this. Can you provide a reproducible example or a sample use case of the issue with some basic HTML / CSS / etc? We can't really track this down without that - since I'm not familiar with the application under test - I can't exactly see what this element is you're screenshotting also. Thanks!

knt36 · 2020-12-23T20:41:33Z

The html is consist of the cypress iframe. But within that iframe is another iframe and that is the area I want to take a screenshot of.

I'll try to make an example. Do you know if the screenshooting has any issues with iframes?

knt36 · 2020-12-29T01:01:10Z

I updated my question

jennifer-shehane · 2020-12-29T01:10:34Z

I'm not aware of any issues with screenshotting an iframe within Cypress. I'm also not completely sure what you mean by 'offset' in the situation.

Can you provide a reproducible example that we can run? We'll have to close this issue if we can't reproduce it. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

knt36 · 2021-01-13T21:52:32Z

<body>
  <div style="height:100px;">
  something
  </div>
  <iframe data-tid="embeddedPageContainerIframe" src="https://www.slickdeals.com/" height="100%" width="100%" title="Iframe Example"></iframe>
</body>

In the code snippet above, if you were to run the following test scenario:

describe('My Test', () => {
  // eslint-disable-next-line jest/expect-expect
  it('should be accessible', () => {
      cy.visit(
        ``
      );
      cy.getAppIframeBody().as('learningApp').find("#globalBar").screenshot();
  });
});

The screenshot test will get this image:

When the expected image is:

knt36 · 2021-01-21T09:08:46Z

Hey @jennifer-shehane, is the above sufficient to provide some context into the problem?

jennifer-shehane · 2021-02-27T14:23:19Z

Can you provide the getAppIframeBody code? We need an example we can run completely - so all test code.

FrancisBourgault · 2021-09-13T17:57:59Z

Hi,

I also have this issue. Here is the command chain I tried to use:

Code to reproduce:

cy.get("css-path-to-iframe iframe")
.its('0.contentDocument.body') // As recommended by the official documentation
.screenshot("screenshot name", {capture: "fullPage"});

Actual result:
Cypress will take a screenshot starting from the upper-left corner of the page (position 0,0). The size of the screenshot seems to be based on the iframe size.

Expected Result:
Cypress should take a screenshot of all of the iframe, while excluding the rest of the page. If scrolling is available in the IFrame, then Cypress should also use the scrolling to capture the whole iframe (provided that "capture" is set to "fullPage").

System Details:
Cypress: 8.3.1
Browser: chrome headed v93.0.4577.63

Other Details:
I have also tried with "capture: 'viewport'", but the same issue.

vince-ee · 2022-01-27T05:54:41Z

I'm facing the same issue with Cypress 9.3.1 running Chrome 97.

    cy.getIframeBody('iframe[class="my-iframe"]').find(".box-in-iframe").eq(1).wait(10000).screenshot()

Our getIframeBody method:

Cypress.Commands.add('getIframeBody', (selector) => {
  // get the iframe > document > body, retry until body element not empty
  // https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__iframes
  cy.log('iframe');
  return (
      cy
          .get(selector, { log: false })
          .its('0.contentDocument.body', { log: false })
          .should('not.be.empty')
          // wraps <body> to allow chaining commands, like ".find(...)"
          // https://on.cypress.io/wrap
          .then((body: any) => cy.wrap(body, { log: false }))
  );
});

chris-aeviator · 2022-05-14T10:38:19Z

I'm facing an issue also with scrollTo() inside iFrames. I can confirm I can properly yield elements and am using the method highlighted in the docs.

freder · 2022-10-08T16:13:08Z

I have the same (screenshot) problem. also clicking elements inside an iframe does not seem to work.

somovmisha · 2023-03-08T09:09:36Z

Good day!
Are there any updates on this issue?

abelramireza · 2023-03-16T20:26:14Z

Any solution here?

haicaodac · 2023-08-18T23:39:29Z

Does anyone fix this?

jennifer-shehane · 2023-08-21T17:31:46Z

This is an issue. It can be reproduced like shown below:

Test code

it('screenshot element within iframe', () => {
  cy.visit('index.html');
  cy.get('iframe')
    .its('0.contentDocument.body')
    .should('not.be.empty')
    .then((body) => cy.wrap(body))
    .find("#foo").screenshot();
});

index.html

<body>
  <div style="height:100px;">
    Main Page
  </div>
  <iframe src="iframe.html"></iframe>
</body>

iframe.html

<html>
<body>
  <div id="foo">Foo</div>
  Iframe content
</body>
</html>

The screenshot only screenshots the main content in index.html and does not screenshot the content within the iframe. I would expect this task to be a part of full iframe support.

I don't know the effort to fix this and this is not work we are prioritizing at the moment. This issue will be updated when work is planned. We're open to any PRs to make this work.

cypress-app-bot · 2024-06-17T01:50:39Z

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

cypress-app-bot · 2024-07-01T01:54:42Z

This issue has been closed due to inactivity.

jennifer-shehane added the stage: needs information Not enough info to reproduce the issue label Dec 23, 2020

knt36 changed the title ~~Cypress Screenshots not capturing full page~~ Cypress Screenshots not properly targeting elements in iFrame Dec 29, 2020

vince-ee mentioned this issue Jan 28, 2022

Support snapshotting iframes #1433

Open

cypress-bot bot added stage: backlog and removed stage: needs information Not enough info to reproduce the issue labels Apr 29, 2022

This was referenced Oct 26, 2023

[Snyk] Upgrade vite from 4.1.2 to 4.4.10 BuddhaNepal/cypress#75

Open

[Snyk] Upgrade vite from 4.1.2 to 4.4.11 BuddhaNepal/cypress#78

Open

This was referenced Nov 7, 2023

[Snyk] Upgrade vite from 4.1.2 to 4.4.11 BuddhaNepal/cypress#81

Open

[Snyk] Upgrade vite from 4.1.2 to 4.5.0 BuddhaNepal/cypress#89

Open

jennifer-shehane removed the stage: backlog label Nov 28, 2023

BuddhaNepal mentioned this issue Dec 2, 2023

[Snyk] Upgrade vite from 4.1.2 to 4.5.0 BuddhaNepal/cypress#101

Open

jennifer-shehane added type: bug topic: screenshots 📸 stage: ready for work The issue is reproducible and in scope topic: iframes labels Dec 19, 2023

cypress-app-bot added the stale no activity on this issue for a long period label Jun 17, 2024

cypress-app-bot closed this as not planned Won't fix, can't repro, duplicate, stale Jul 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cypress Screenshots not properly targeting elements in iFrame #14283

Cypress Screenshots not properly targeting elements in iFrame #14283

knt36 commented Dec 23, 2020 •

edited

Loading

jennifer-shehane commented Dec 23, 2020

knt36 commented Dec 23, 2020

knt36 commented Dec 29, 2020

jennifer-shehane commented Dec 29, 2020

knt36 commented Jan 13, 2021 •

edited by jennifer-shehane

Loading

knt36 commented Jan 21, 2021

jennifer-shehane commented Feb 27, 2021

FrancisBourgault commented Sep 13, 2021 •

edited

Loading

vince-ee commented Jan 27, 2022

chris-aeviator commented May 14, 2022

freder commented Oct 8, 2022

somovmisha commented Mar 8, 2023

abelramireza commented Mar 16, 2023

haicaodac commented Aug 18, 2023

jennifer-shehane commented Aug 21, 2023

cypress-app-bot commented Jun 17, 2024

cypress-app-bot commented Jul 1, 2024

Cypress Screenshots not properly targeting elements in iFrame #14283

Cypress Screenshots not properly targeting elements in iFrame #14283

Comments

knt36 commented Dec 23, 2020 • edited Loading

jennifer-shehane commented Dec 23, 2020

knt36 commented Dec 23, 2020

knt36 commented Dec 29, 2020

jennifer-shehane commented Dec 29, 2020

knt36 commented Jan 13, 2021 • edited by jennifer-shehane Loading

knt36 commented Jan 21, 2021

jennifer-shehane commented Feb 27, 2021

FrancisBourgault commented Sep 13, 2021 • edited Loading

vince-ee commented Jan 27, 2022

chris-aeviator commented May 14, 2022

freder commented Oct 8, 2022

somovmisha commented Mar 8, 2023

abelramireza commented Mar 16, 2023

haicaodac commented Aug 18, 2023

jennifer-shehane commented Aug 21, 2023

cypress-app-bot commented Jun 17, 2024

cypress-app-bot commented Jul 1, 2024

knt36 commented Dec 23, 2020 •

edited

Loading

knt36 commented Jan 13, 2021 •

edited by jennifer-shehane

Loading

FrancisBourgault commented Sep 13, 2021 •

edited

Loading