Inability to determine reason for invisibility #5974

badeball · 2019-12-16T17:11:53Z

Current behavior:

Per v3.8.0, one might receive a message stating EG. Cypress could not determine why this element '<button>' is not visible.

This is non-sensical, as there's obviously some heuristic implemented that has determined the element to be invisible.

I understand that there's a method getReasonIsHidden that is somewhat replicating the behavior of isHidden, but returning a human-readable string instead of a boolean value. I am however having a very hard time understanding why you would implement it like this.

Since there should be one, and only one, heuristic-implemention, why not make one a function of the other?

const getReasonIsHidden = function ($el) {
  // Implementation ...
}

const isHidden = ($el) => {
  return !!getReasonIsHidden($el);
}

Desired behavior:

Never to see such a non-informative error message.

Steps to reproduce: (app code and test code)

Doesn't really matter here, but I can see if I can produce a minimal example.

Versions

Cypress v3.8.0, Arch Linux, Chrome 77.

The text was updated successfully, but these errors were encountered:

jennifer-shehane · 2019-12-17T08:58:27Z

I agree, this is pretty awful. I wrote this code as a catchall if a specific error message was not written for a hidden check. #4421

This is complicated by the fact that the isHidden function is separate (returning a boolean) from the getReasonIsHidden (returning a string) function which is not ideal.

Giving a repro would actually be really helpful because there must be a case we are checking but not printing a message for.

~~The one thing I do suspect is this check because I can't find a corresponding error message for it. https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/dom/visibility.js#L356:L356~~ This actually does have a specific error message here: https://github.com/cypress-io/cypress/blob/issue-5974/packages/driver/src/dom/visibility.js#L494:L494

badeball · 2019-12-17T11:55:24Z

I figured out why. One of the ancestors has a CSS property transform: translate(0px, 0px) * and a height of 0. It does not however have overflow: hidden, hence its children are visible, but determined by Cypress to be invisible (by elIsHiddenByAncestors, which recursively calls elIsHiddenByTransform). The method getReasonIsHidden invokes elIsHiddenByTransform, but not elIsHiddenByAncestors, hence the indeterminate error message.

* I know this is a completely non-sensical attribute for someone to give to an element. This is done by Google Maps.

jennifer-shehane · 2019-12-17T14:59:18Z

@badeball K, thanks for looking into this. I'll have to try to set up a test for this situation.

parent: transform: translate(0px, 0px); height: 0; (no overflow: hidden)
child: visible

Recommended Action: getReasonIsHidden should check elIsHiddenByAncestors for reason.

jennifer-shehane · 2019-12-18T07:08:12Z

Got a repro and also verified this is a regression introduced in 3.8.0, likely from this PR #5590. So this is actually incorrectly failing the visibility check also.

index.thml

<!DOCTYPE html>
<html>
<body>
  <div style="transform: translate(0, 0); height: 0;">
    <p>Aenean lacinia bibendum nulla sed consectetur.</p>
  </div>
</body>
</html>

spec.js

it('types', function () {
  cy.visit('index.html')
  cy.get('p').should('be.visible')
})

3.7.0

3.8.0

sainthkh · 2019-12-18T07:26:51Z

@jennifer-shehane Ill check it out.

badeball · 2019-12-18T09:14:12Z

This is undoubtedly a very interesting case, along with the whole problem of programmatically determining visibility. You obviously made a great deal of effort here, which I am wholeheartedly appreciative of.

However, I'd like to emphasize that what I originally wanted to address was the disconnect between reasoning and actual determination.

As long as the two methods isHidden & getReasonIsHidden implements their own heuristics, there will always be a possibility for the last, indeterminate message to be returned.

This message is non-sensical at the very core. Cypress does determine visibility and I believe it should always be able to tell you why in case it determined something to be invisible.

badeball · 2019-12-18T09:18:35Z

Here's an example of what I mean by sharing heuristic, without changing the current interface.

function determineVisibility ($el) {
  if ( /* some condition */ ) {
    return {
      visible: false,
      reason: "foobar"
    };
  }

  return {
    visible: true
  };
}

export function isHidden ($el) {
  return !determineVisibility($el).visible;
}

export function getReasonIsHidden ($el) {
  const visibility = determineVisibility($el);

  if (visibility.visible) {
    throw new Error("Erroneously invoked on a visible element");
  }

  return visibility.reason;
}

jennifer-shehane · 2019-12-19T07:55:07Z

@sainthkh I also ran this, without a parent, where the <p> is still visible and it falsely fails.

<!DOCTYPE html>
<html>
<body>
  <p style="transform: translate(0, 0); height: 0;">
   Aenean lacinia bibendum nulla sed consectetur.
  </p>
</body>
</html>

sainthkh · 2019-12-19T08:38:18Z

@jennifer-shehane

As you can see in the screenshot, "without-a-parent" problem is not the problem of the #6000. It's the problem of effective width or height. It's not regression.

It's been fixed by checking the value of effective width/height and transform value together.

sainthkh · 2019-12-27T06:22:19Z

@badeball I realized that your idea can be used to fix #677, too.

But I cannot implement your idea now because #5916 and #6000 are not merged yet. After they're done.

I'll revisit this issue.

janakdr · 2020-01-14T18:28:39Z

@sainthkh it looks like the PRs you mentioned are merged now. Is this issue fixed, or is there still more work to do? We're blocked on upgrading Cypress to >= 3.8 due to this issue. Thanks!

sainthkh · 2020-01-15T00:13:40Z

@janakdr I've been spending time on #5762. And my part is finished and I'm waiting for feedback.

If your problem is the test falsely failing, then it is solved in #6000. Please try 3.8.2.

But your idea about creating a visibility result object to determine the reason is not started yet.

Currently, I'm trying to make #619 and planning to fix that with #677.

janakdr · 2020-01-15T06:12:30Z

Thanks, the failing test was our issue, and 3.8.2 does fix it!

…

On Tue, Jan 14, 2020, 7:13 PM Kukhyeon Heo ***@***.***> wrote: @janakdr <https://github.com/janakdr> I've been spending time on #5762 <#5762>. And it is finished my part and waiting for feedback. If your problem is the test falsely failing, then it is solved in #6000 <#6000>. Please try 3.8.2. But your idea about creating a visibility result object to determine the reason, it is not started yet. Currently, I'm trying to make #619 <#619> and planning to fix that with #677 <#677>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5974?email_source=notifications&email_token=ACNKK4CAUFPL7EZLRFO6J23Q5ZILLA5CNFSM4J3NE6UKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEI6S6CY#issuecomment-574435083>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACNKK4GOCG4AWASBGFBSPCDQ5ZILLANCNFSM4J3NE6UA> .

jennifer-shehane · 2020-07-07T07:53:11Z

This was fixed in #6000 in 3.8.2 of Cypress. Closing as resolved.

badeball · 2020-08-03T17:47:55Z

I hate to be the stickler here, but this issue was equally much about the fact that the reason for determining invisibility was unavailable. As far as I can see, there's still two different methods of determining invisibility and for explaining why an element is invisible. This means that this can still become an issue again and therefore it will.

jennifer-shehane · 2020-08-04T06:38:33Z

Yah, there's a larger issue to evaluate our error messages - showing why something is invisible or visible here: #677

As far as I have seen, there aren't any open issues of a situation where the ambiguous error 'could not determine why' is showing for anyone in the current version.

jennifer-shehane self-assigned this Dec 17, 2019

jennifer-shehane added type: user experience Improvements needed for UX pkg/driver This is due to an issue in the packages/driver directory labels Dec 17, 2019

cypress-bot bot added the stage: ready for work The issue is reproducible and in scope label Dec 17, 2019

jennifer-shehane mentioned this issue Dec 17, 2019

Simply state that the element is not visible. #5982

Merged

1 task

jennifer-shehane added the type: bug label Dec 17, 2019

jennifer-shehane added type: regression A bug that didn't appear until a specific Cy version release v3.8.0 🐛 Issue present since 3.8.0 and removed type: bug labels Dec 18, 2019

This was referenced Dec 18, 2019

.should("be.visible") doesn't interpet elements with " style='transform: scale(0,0)' " correctly #723

Closed

Visibility false to style='transform: scale(0,0)' or style='tra… #5590

Merged

jennifer-shehane removed their assignment Dec 18, 2019

sainthkh mentioned this issue Dec 19, 2019

Transform visibility when height/width is set. #6000

Merged

3 tasks

janakdr mentioned this issue Dec 19, 2019

Updating to Cypress 3.8.0 is blocked by Cypress bug givedirectly/Google-Partnership#347

Closed

sainthkh mentioned this issue Dec 27, 2019

Print reasons why Cypress considers an element 'visible' in errors. #677

Closed

scottcrowesai mentioned this issue Jan 2, 2020

After update from 3.7.0 to 3.8.1, Cypress is having troubles finding elements that are visible on the UI #6083

Closed

badeball mentioned this issue Jan 15, 2020

cy.click() yields no error, but wrong element is clicked #6165

Closed

snyk-bot mentioned this issue Mar 5, 2020

[Snyk] Upgrade cypress from 3.7.0 to 3.8.3 qsays/grafana#1

Open

jennifer-shehane mentioned this issue Jul 7, 2020

Element visibility fixes #1242

Closed

15 tasks

jennifer-shehane closed this as completed Jul 7, 2020

jennifer-shehane removed the stage: ready for work The issue is reproducible and in scope label Jul 7, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Inability to determine reason for invisibility #5974

Inability to determine reason for invisibility #5974

badeball commented Dec 16, 2019 •

edited

jennifer-shehane commented Dec 17, 2019 •

edited

badeball commented Dec 17, 2019

jennifer-shehane commented Dec 17, 2019 •

edited

jennifer-shehane commented Dec 18, 2019 •

edited

sainthkh commented Dec 18, 2019

badeball commented Dec 18, 2019

badeball commented Dec 18, 2019

jennifer-shehane commented Dec 19, 2019

sainthkh commented Dec 19, 2019

sainthkh commented Dec 27, 2019

janakdr commented Jan 14, 2020

sainthkh commented Jan 15, 2020 •

edited

janakdr commented Jan 15, 2020 via email

jennifer-shehane commented Jul 7, 2020

badeball commented Aug 3, 2020

jennifer-shehane commented Aug 4, 2020

Inability to determine reason for invisibility #5974

Inability to determine reason for invisibility #5974

Comments

badeball commented Dec 16, 2019 • edited

Current behavior:

Desired behavior:

Steps to reproduce: (app code and test code)

Versions

jennifer-shehane commented Dec 17, 2019 • edited

badeball commented Dec 17, 2019

jennifer-shehane commented Dec 17, 2019 • edited

jennifer-shehane commented Dec 18, 2019 • edited

3.7.0

3.8.0

sainthkh commented Dec 18, 2019

badeball commented Dec 18, 2019

badeball commented Dec 18, 2019

jennifer-shehane commented Dec 19, 2019

sainthkh commented Dec 19, 2019

sainthkh commented Dec 27, 2019

janakdr commented Jan 14, 2020

sainthkh commented Jan 15, 2020 • edited

janakdr commented Jan 15, 2020 via email

jennifer-shehane commented Jul 7, 2020

badeball commented Aug 3, 2020

jennifer-shehane commented Aug 4, 2020

badeball commented Dec 16, 2019 •

edited

jennifer-shehane commented Dec 17, 2019 •

edited

jennifer-shehane commented Dec 17, 2019 •

edited

jennifer-shehane commented Dec 18, 2019 •

edited

sainthkh commented Jan 15, 2020 •

edited