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

Element not receiving focus when Chromium itself does not have focus, nor in Firefox headless #7623

Closed
tsjost opened this issue Jun 8, 2020 · 1 comment
Closed

Element not receiving focus when Chromium itself does not have focus, nor in Firefox headless #7623

tsjost opened this issue Jun 8, 2020 · 1 comment
Labels
topic: native events type: duplicate This issue or pull request already exists

Comments

@tsjost
Copy link

tsjost commented Jun 8, 2020

click()/focus()ing on a tabindex-focusable element should make it the active/focused element, and hence activate the CSS rule containing :focus.

There exists a few other issues with related behaviour, like #4039, but I haven't been able to find anything else concrete.

Current behavior:

The element does not get focus in:

  • Chromium GUI when the browser does not have OS focus
  • Electron GUI when the browser does not have OS focus
  • Firefox Headless

The element does get focus in:

  • Chromium GUI when the browser has OS focus
  • Electron GUI when the browser has OS focus
  • Chromium Headless
  • Electron Headless
  • Firefox GUI regardless of whether the browser has OS focus

Desired behavior:

The element should always get focus regardless of GUI/headless mode or whether the GUI window has OS focus or not.

Test code to reproduce

test.js:

describe('Sample Test', () => {
  it('opens menu', () => {
    cy.visit('index.html')

    cy.get('.menu-btn')
      .click()

    cy.get('.a-link')
      .click()
  })
})

index.html:

<html>
<head>
<style>
.menu {
    display: none;
}
.menu-btn:focus + .menu {
    display: block;
}
</style>
</head>
<body>

<div class="menu-btn" tabindex="0">Menu</div>
<div class="menu">
    <a class="a-link">Hello!</a>
</div>

</body>
</html>

Versions

Cypress 4.7.0 on Linux
Chromium 80
Electron 80
Firefox 74
@jennifer-shehane
Copy link
Member

Cypress cannot currently simulate native events that would trigger CSS psuedo styles. The element is receiving focus and focus events, but any styling with the :focus psuedo selector will not take effect when run in Cypress.

This is part of the work planned within #311

@jennifer-shehane jennifer-shehane added type: duplicate This issue or pull request already exists topic: native events labels Jun 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
topic: native events type: duplicate This issue or pull request already exists
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jennifer-shehane @tsjost