Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cypress Screenshots not properly targeting elements in iFrame #14283

Open
knt36 opened this issue Dec 23, 2020 · 15 comments
Open

Cypress Screenshots not properly targeting elements in iFrame #14283

knt36 opened this issue Dec 23, 2020 · 15 comments
Labels
stage: ready for work The issue is reproducible and in scope topic: iframes topic: screenshots 📸 type: bug

Comments

@knt36
Copy link

knt36 commented Dec 23, 2020 •
edited

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?

image
@jennifer-shehane
Copy link
Member

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!

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

knt36 commented Dec 23, 2020

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 knt36 changed the title Cypress Screenshots not capturing full page Cypress Screenshots not properly targeting elements in iFrame Dec 29, 2020
@knt36
Copy link
Author

knt36 commented Dec 29, 2020

I updated my question

@jennifer-shehane
Copy link
Member

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
Copy link
Author

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

image

<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:
image

When the expected image is:
image

@knt36
Copy link
Author

knt36 commented Jan 21, 2021

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

@jennifer-shehane
Copy link
Member

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

@FrancisBourgault
Copy link

FrancisBourgault commented Sep 13, 2021 •
edited

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
Copy link

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 }))
  );
});

@vince-ee vince-ee mentioned this issue Jan 28, 2022
Open
@cypress-bot cypress-bot bot added stage: backlog and removed stage: needs information Not enough info to reproduce the issue labels Apr 29, 2022
@chris-aeviator
Copy link

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
Copy link

freder commented Oct 8, 2022

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

@somovmisha
Copy link

Good day!
Are there any updates on this issue?

@abelramireza
Copy link

Any solution here?

@haicaodac
Copy link

Does anyone fix this?

@jennifer-shehane
Copy link
Member

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.

screenshot element within iframe (1)

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.

This was referenced Oct 26, 2023
Open
Open
This was referenced Nov 7, 2023
Open
Open
@BuddhaNepal BuddhaNepal mentioned this issue Dec 2, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
stage: ready for work The issue is reproducible and in scope topic: iframes topic: screenshots 📸 type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@freder @jennifer-shehane @chris-aeviator @knt36 @FrancisBourgault @haicaodac @vince-ee @abelramireza @somovmisha