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

Need ability to type into elements that are actionable through {tab}, but not actionable by click #4420

Closed
jennifer-shehane opened this issue Jun 10, 2019 · 3 comments
Closed

Need ability to type into elements that are actionable through {tab}, but not actionable by click #4420

jennifer-shehane opened this issue Jun 10, 2019 · 3 comments
Labels
topic: cy.type ⌨️ type: bug

Comments

@jennifer-shehane
Copy link
Member

jennifer-shehane commented Jun 10, 2019 •
edited
Loading

Current behavior:

When there is an input within HTML that is covered by a parent element with the css property of visibility :hidden, Cypress interprets this as non-actionable and does not allow typing.

I can, however, type into the input when typing tab on my keyboard with the element coming into focus from there. I tried working around this by doing cy.get('input').focus().type('John'), but it still fails saying the element is not visible.

Desired behavior:

While the element cannot be clicked and typed into, there should be a way to replicate the behavior or 'tabbing' into an input and typing.

Screen Shot 2019-06-10 at 2 06 24 PM

Steps to reproduce: (app code and test code)

Can reproduce in the code below originally provided via #2558 (comment)

HTML

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <header style="left: 0;  right: 0; height: 60px; position: absolute;"></header>
    <input>
  </body>
</html>

Spec file

Cypress.Commands.add('hide', { prevSubject: 'element' }, (subject) => {
  subject.css('visibility', 'hidden');
})

it('Successful test', () => {
  cy.visit('index.html');
  cy.get('header')
    .hide();
  cy.get('input')
    .should('be.visible')
    .type('John Smith')
})

it('Failed test', () => {
  cy.visit('index.html');
  cy.get('input')
    .should('be.visible')
    .type('John Smith')
})

Versions

Cypress 3.3.1
@cypress-bot cypress-bot bot added the stage: ready for work The issue is reproducible and in scope label Jun 10, 2019
@jennifer-shehane jennifer-shehane mentioned this issue Jun 10, 2019
Closed
@jennifer-shehane
Copy link
Member Author

@bkucera I thought this issue would be fixed by #2982 and it partially is?

Now this test passes if I add .focus() before the .type() - but, I don't think that calling .focus() should be necessary.

@kuceb kuceb mentioned this issue Jun 19, 2019
Merged
10 tasks
@jennifer-shehane jennifer-shehane mentioned this issue Jun 19, 2019
Closed
@jennifer-shehane jennifer-shehane added stage: pending release and removed stage: ready for work The issue is reproducible and in scope labels Jun 19, 2019
@jennifer-shehane
Copy link
Member Author

I guess this is technically closed - since it is now possible to call .focus().type(), but I don't consider the need to call .focus() very obvious when a user sees this error on .type() alone.

The code for this is done in #2982, but this has yet to be released. We'll update this issue and reference the changelog when it's released.

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jun 27, 2019

Released in 3.3.2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
topic: cy.type ⌨️ type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jennifer-shehane