From 9472502343a698b12eeff383c5c4cd312e7cd08e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Tue, 9 Jul 2024 14:51:40 +0200 Subject: [PATCH 1/4] changes of visibility in documentation --- .../interacting-with-elements.mdx | 20 +++++++++++++++---- docs/guides/references/changelog.mdx | 8 ++++++++ 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/docs/guides/core-concepts/interacting-with-elements.mdx b/docs/guides/core-concepts/interacting-with-elements.mdx index 0ebf4948cb..9350a5f62c 100644 --- a/docs/guides/core-concepts/interacting-with-elements.mdx +++ b/docs/guides/core-concepts/interacting-with-elements.mdx @@ -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) @@ -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. #### An element is considered hidden if: @@ -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. + :::info Opacity diff --git a/docs/guides/references/changelog.mdx b/docs/guides/references/changelog.mdx index 2007f72a85..33855717be 100644 --- a/docs/guides/references/changelog.mdx +++ b/docs/guides/references/changelog.mdx @@ -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. + ## 13.13.0 _Released 7/02/2024_ From 64eed888631ea904095921315146eb7cd3057efa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Fri, 12 Jul 2024 09:25:24 +0200 Subject: [PATCH 2/4] Update docs/guides/core-concepts/interacting-with-elements.mdx Co-authored-by: Mike McCready <66998419+MikeMcC399@users.noreply.github.com> --- docs/guides/core-concepts/interacting-with-elements.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/core-concepts/interacting-with-elements.mdx b/docs/guides/core-concepts/interacting-with-elements.mdx index 9350a5f62c..8dc99dd5e2 100644 --- a/docs/guides/core-concepts/interacting-with-elements.mdx +++ b/docs/guides/core-concepts/interacting-with-elements.mdx @@ -61,7 +61,7 @@ found to be actionable. ### Hidability -Cypress checks a lot of things to determine if element is not hidden. The following calculations factor in CSS translations and transforms. +Cypress checks a lot of things to determine if an element is not hidden. The following calculations factor in CSS translations and transforms. #### An element is considered hidden if: From 3c81165acb811133a22591c1f2177077c0b42ed3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Fri, 12 Jul 2024 09:26:27 +0200 Subject: [PATCH 3/4] Update docs/guides/references/changelog.mdx Co-authored-by: Mike McCready <66998419+MikeMcC399@users.noreply.github.com> --- docs/guides/references/changelog.mdx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/docs/guides/references/changelog.mdx b/docs/guides/references/changelog.mdx index 33855717be..2007f72a85 100644 --- a/docs/guides/references/changelog.mdx +++ b/docs/guides/references/changelog.mdx @@ -2,14 +2,6 @@ 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. - ## 13.13.0 _Released 7/02/2024_ From 075347dc9322dc4fcc24c2b72afefe5317382466 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Fri, 12 Jul 2024 10:32:58 +0200 Subject: [PATCH 4/4] english corrections. --- .../core-concepts/interacting-with-elements.mdx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/docs/guides/core-concepts/interacting-with-elements.mdx b/docs/guides/core-concepts/interacting-with-elements.mdx index 8dc99dd5e2..c71b701bc6 100644 --- a/docs/guides/core-concepts/interacting-with-elements.mdx +++ b/docs/guides/core-concepts/interacting-with-elements.mdx @@ -87,14 +87,15 @@ Cypress checks a lot of things to determine if an element is not hidden. The fol :::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. +You should use the 'is.not.hidden' check in most cases. Some items may be visible but not clickable or interactive. + +Cypress checks visibility like browsers [checkVisibility](https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility). +However, there are exceptions to checking visibility in the browser: + +- The visibility of an `option` in a `select` is determined by the visibility of the `select` to which it belongs +- If the position of an html element is off screen it is considered invisible +- If a parent element covers a child element, the element is considered invisible +- In old browsers where [checkVisibility] is not supported, is hidden is used. :::info