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.

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

changes of visibility in documentation #5867

Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions docs/guides/core-concepts/interacting-with-elements.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ core concept guide).
**_Checks and Actions Performed_**

- [Scroll the element into view.](#Scrolling)
- [Ensure the element is not hidden.](#Visibility)
- [Ensure the element is not hidden.](#Hidability)
- [Ensure the element is not disabled.](#Disability)
- [Ensure the element is not detached.](#Detached)
- [Ensure the element is not readonly.](#Readonly)
Expand All @@ -59,10 +59,9 @@ Whenever Cypress cannot interact with an element, it could fail at any of the
above steps. You will usually get an error explaining why the element was not
found to be actionable.

### Visibility
### Hidability

Cypress checks a lot of things to determine an element's visibility. The
following calculations factor in CSS translations and transforms.
Cypress checks a lot of things to determine if element is not hidden. The following calculations factor in CSS translations and transforms.
senpl marked this conversation as resolved.
Show resolved Hide resolved

#### An element is considered hidden if:

Expand All @@ -84,6 +83,19 @@ following calculations factor in CSS translations and transforms.
\***hides overflow** means it has `overflow: hidden`, `overflow-x: hidden`,
`overflow-y: hidden`, `overflow: scroll`, or `overflow: auto`

### Visibility

:::tip

Most of the time you should check if element is not hidden. Some elements might be visible but not clickable or interactable.

Cypress check visibility like browsers [checkVisibility](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility).
There are some exceptions from browser checks:
- in `option` inside `select` visibility is determined by visibility of parent `select` element
- if element is offscreen it is consided invisible
- if parent cover element it is consided invisible
In old browsers that not support [checkVisibility] check is hidden is performed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some grammatical and spelling errors in this section.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't comment in more detail because this PR is still in draft state.

:::info

<strong>Opacity</strong>
Expand Down
8 changes: 8 additions & 0 deletions docs/guides/references/changelog.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@
title: Changelog
---

## 13.14.0

_Released 7/23/2024

**Breaking Changes:**

- Check of visibility is based on browsers checkVisibility. 'not.hidden' check is recommended before interaction with page elements now.

senpl marked this conversation as resolved.
Show resolved Hide resolved
## 13.13.0

_Released 7/02/2024_
Expand Down
Loading