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

Screenshot replicates top of image if element extends past top of viewport #7966

Closed
panzarino opened this issue Jul 13, 2020 · 8 comments
Closed

Screenshot replicates top of image if element extends past top of viewport #7966

panzarino opened this issue Jul 13, 2020 · 8 comments
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: screenshots 📸 type: bug

Comments

@panzarino
Copy link
Contributor

Current behavior:

Calling screenshot on an element that is scaled to be larger than the viewport produces a screenshot that is not reflective of what the user actually sees. It properly cuts off at the bottom of the screen, but duplicates parts of the screen at the top.

Here's an example:

<html>
<body>
<main style="transform: scaleY(10); background: linear-gradient(yellow, blue, red); height: 50vh; transition: 10s;"></main>
</body>
</html>
it('screenshots element', () => {
  cy.visit('fixtures/index.html')
  cy.get('main').screenshot()
})

The resulting screenshot looks like this:

Desired behavior:

Calling screenshot() should produce the correct screenshot. Currently, with this test case calling cy.screenshot() (the full page screenshot) will produce the correct screenshot that appears as follows. Calling screenshot on main should produce a similar result (without padding):
@panzarino panzarino added type: bug pkg/driver This is due to an issue in the packages/driver directory topic: screenshots 📸 labels Jul 13, 2020
@panzarino panzarino self-assigned this Jul 13, 2020
@panzarino panzarino mentioned this issue Jul 13, 2020
Closed
@panzarino panzarino removed their assignment Jul 17, 2020
@jennifer-shehane jennifer-shehane mentioned this issue Jul 7, 2021
Closed
@DouglasOttoDavila
Copy link

DouglasOttoDavila commented Mar 27, 2022 •
edited
Loading

I have the same issue using the following config:
Cypress ^9.5.2
NodeJS v14.5.0

support/index.js

Cypress.Screenshot.defaults({
  capture: 'fullPage',
})

.spec.js

afterEach(() =>{
        cy.wait(5000)
        cy.screenshot()
})

it('Check: Contact Us Page', () =>{

        homepage.goUrl('contactUs')

        //Check Page Title
        homepage.elementContentShouldBe('.cc-title','Contact Us')
})

That's the screenshot taken:

Home - User navigate footer links -- Check Contact Us Page -- after each hook

@EPGDigital-MW
Copy link

I have the duplication issue in chrome but not firefox

@lewsmith
Copy link

Same issue using the cypress/browsers:node16.14.0-chrome99-ff97 image in chrome

should display welcome message

@cypress-app-bot
Copy link
Collaborator

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 cypress-app-bot added the stale no activity on this issue for a long period label May 17, 2023
@brett-sprad
Copy link

I can confirm this issue is still occurring with Cypress v12.12.0

@brett-sprad
Copy link

ok so I think I figured this out, the cy.screenshot() function accepts arguments:

cy.screenshot({
  capture: 'viewport',
})

By default 'screenshot' takes an image of the full page, not viewport:
https://docs.cypress.io/api/commands/screenshot#Arguments

@cypress-app-bot cypress-app-bot removed the stale no activity on this issue for a long period label May 26, 2023
@nagash77
Copy link
Contributor

@brett-sprad are your tests all working when you provide that argument to the cy.screenshot call?

@nagash77 nagash77 self-assigned this May 26, 2023
@nagash77
Copy link
Contributor

nagash77 commented Jun 2, 2023

Unfortunately we have to close this issue due to inactivity. Please comment if there is new information to provide concerning the original issue and we can reopen.

@nagash77 nagash77 closed this as completed Jun 2, 2023
@nagash77 nagash77 removed their assignment Jun 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: screenshots 📸 type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@nagash77 @panzarino @lewsmith @DouglasOttoDavila @EPGDigital-MW @cypress-app-bot @brett-sprad