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

type() does not scroll properly after a clear() #16283

Open
JessefSpecialisterren opened this issue Apr 30, 2021 · 9 comments
Open

type() does not scroll properly after a clear() #16283

JessefSpecialisterren opened this issue Apr 30, 2021 · 9 comments
Labels
E2E Issue related to end-to-end testing pkg/driver This is due to an issue in the packages/driver directory prevent-stale mark an issue so it is ignored by stale[bot] stage: ready for work The issue is reproducible and in scope Triaged Issue has been routed to backlog. This is not a commitment to have it prioritized by the team. type: unexpected behavior User expected result, but got another

Comments

@JessefSpecialisterren
Copy link

Current behavior

When type() is invoked after a clear(), it does not scroll the input out from under a position:fixed element

Desired behavior

type() should scroll the input out from under the position:fixed element, just like it does when it's not following a clear()

Test code to reproduce

scroll.html

<body style="height: 200vh; padding-top: 30px;">
    <span style="background-color: brown; position: fixed; top: 0px; left: 0px; width: 100%; height: 30px; margin-left: 0px;"></span>
    <input type="text" />
</body>

scroll.spec.js

context('...', () => {
  it('...', () => {
      cy.visit('scroll.html')
      cy.get('input')
        .clear() // Comment this line to see how type() normally behaves
        .type('abc')
  })
})

Versions

Cypress 7.2.0
Google Chrome 90.0.4430.93
Windows 10 Pro 2004
@jennifer-shehane
Copy link
Member

If you add a .pause() before the type, you'll see the actual behavior of Cypress at the time the command executes - typing in the input without it scrolling behind the element. And the type is not erroring saying 'cannot type because element is not visible'. So this is typing correctly.

However when you review the commands after they've run, the input is scrolled behind the input in the snapshot.

it('...', () => {
  cy.visit('index.html')
  cy.get('input')
    .pause()
    .clear() // Comment this line to see how type() normally behaves
    .type('abc')
})

So this is just a visual issue after the test is done running.

@jennifer-shehane jennifer-shehane added type: unexpected behavior User expected result, but got another pkg/driver This is due to an issue in the packages/driver directory stage: ready for work The issue is reproducible and in scope labels Apr 30, 2021
@jennifer-shehane jennifer-shehane changed the title type() does not scroll properly after a clear() Preview of type() scrolls behind element Apr 30, 2021
@JessefSpecialisterren
Copy link
Author

@jennifer-shehane if I add { delay: 1000 } to the .type() command, I see that the input is first scrolled behind the position: fixed element, and then Cypress types into it:

2021-05-03_09-40-57

So this is not just after the test is done running, it also happens during the test. Full code:

it('...', () => {
  cy.visit('cypress/integration/scroll.html')
  cy.get('input')
    .clear()
    .type('abc', { delay: 1000 })
})

@jennifer-shehane
Copy link
Member

@JessefSpecialisterren Did you try adding the .pause() and stepping through each command?

@JessefSpecialisterren
Copy link
Author

@jennifer-shehane I thought I did, but it turns out I only clicked Resume and didn't actually step through the commands. That's interesting! It seems that pausing and stepping through the commands stops this bug from occurring. Even with the delay: 1000 you can see it scroll and type correctly.

However, when not pausing and stepping through, the delay: 1000 makes the bug clearly visible like I showed in my previous comment. So if I may humbly return the question 😇: did you try adding delay: 1000 and not adding .pause()?

@jennifer-shehane
Copy link
Member

Is the value being typed into the element correctly? I'm just wondering what the actual issue is if the value is being typed into the element at the time the Cypress test is run.

@JessefSpecialisterren
Copy link
Author

Is the value being typed into the element correctly?

Yes it is!

I'm just wondering what the actual issue is if the value is being typed into the element at the time the Cypress test is run.

I'm writing tests for very large forms, and it's pretty frustrating to analyze failures when you can't see what Cypress is doing. It also raises questions when demoing to the customer ("Is it actually typing? I can't see it doing anything except scrolling around"). Additionally, it causes popups that are positioned relative to the <input> to appear in places where they normally wouldn't, which makes a few of my tests fail

@JessefSpecialisterren JessefSpecialisterren changed the title Preview of type() scrolls behind element type() does not scroll properly after a clear() May 10, 2021
@JessefSpecialisterren
Copy link
Author

JessefSpecialisterren commented May 10, 2021 •
edited
Loading

I'm changing the title of this issue back to the original one because "Preview of type() scrolls behind element" is not the behavior I'm targeting in this issue (and is already reported in #15715)

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

Verified the behavior is still occurring on Cypress 12.12.0. A fix would still be welcome

@nagash77 nagash77 added E2E Issue related to end-to-end testing Triaged Issue has been routed to backlog. This is not a commitment to have it prioritized by the team. labels May 19, 2023
@jennifer-shehane jennifer-shehane added prevent-stale mark an issue so it is ignored by stale[bot] and removed stale no activity on this issue for a long period labels Mar 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
E2E Issue related to end-to-end testing pkg/driver This is due to an issue in the packages/driver directory prevent-stale mark an issue so it is ignored by stale[bot] stage: ready for work The issue is reproducible and in scope Triaged Issue has been routed to backlog. This is not a commitment to have it prioritized by the team. type: unexpected behavior User expected result, but got another
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@nagash77 @jennifer-shehane @JessefSpecialisterren @cypress-app-bot