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

feat: abilty to add assertions in Cypress Studio #16295

Merged
merged 37 commits into from Jul 22, 2021
Merged

feat: abilty to add assertions in Cypress Studio #16295

merged 37 commits into from Jul 22, 2021

Conversation

panzarino
Copy link
Contributor

@panzarino panzarino commented Apr 30, 2021

User facing changelog

  • Adds the ability to generate assertions in Cypress Studio by right clicking on an element

Additional details

Right clicking on an element while recording a test in Studio will now bring up a context menu where users are able to add an assertion on the selected element. It also displays the selector playground highlight over the element to help users understand exactly what they're asserting on, while also displaying the tag name in the menu. Assertions are auto generated by the current state of the element, and most assertions from chai-jquery are supported.

Supported assertions:

  • have.text
  • have.class
  • have.attr
  • have.value
  • be.visible
  • be.enabled / be.disabled
  • be.checked / not.be.checked

How has the user experience changed?

Here's what the assertions menu looks like:
ezgif-5-4b3e30dadca4

Demo of adding an assertion in a real world use case:
ezgif-5-9142be73093f

PR Tasks

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Apr 30, 2021

Thanks for taking the time to open a PR!

@cypress
Copy link

cypress bot commented Apr 30, 2021



Test summary

451 0 6 0Flakiness 0


Run details

Project cypress
Status Passed
Commit df184ed
Started Jul 22, 2021 4:39 PM
Ended Jul 22, 2021 4:47 PM
Duration 08:39 💡
OS Linux Debian - 10.8
Browser Electron 89

View run in Cypress Dashboard ➡️


This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

@panzarino panzarino marked this pull request as ready for review July 15, 2021 19:01
@panzarino panzarino requested a review from a team as a code owner July 15, 2021 19:01
@panzarino panzarino requested review from flotwig, jennifer-shehane and chrisbreiding and removed request for a team and flotwig July 15, 2021 19:01
@jennifer-shehane
Copy link
Member

I'd like to check this out in Windows also, but I intend to do a review of this. @panzarino There's some conflicts currently.

Copy link
Member

@jennifer-shehane jennifer-shehane left a comment

Choose a reason for hiding this comment

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

Overall I'm very excited to see this feature and I think the design and feel of it is very intuitive. Selected and deselecting the assertion area feels very natural.

I do agree with whoever commented in the demo that there will be a minority of people who are quite angry at having their content menu hijacked. But I feel like this is acceptable in a situation where you explicitly opt into this 'studio' experience.

Since this is experimental, my comments may not warrant fixing before merging, but I will highlight some UI issues I saw with the feature. Let me know how you plan to proceed.

  1. When the element takes up the full height of the app, upon right click it highlight the element but then seems to not open the popup. If you scroll you can see the popup is shown at the top or bottom of the element (out of scroll). cy.visit('https://react-bootstrap.github.io/components/carousel/')

  2. Some elements will recommend an attr assertion that is so long it takes up the entire height of the page, so that you can't select other assertions. In my example there's an inline style attribute which is huge so it shows it all. Perhaps this should be truncated if it's too long? You'll see the full style when you click and it creates the assertion anyways.

  3. In some circumstances, the Assertions menu can display below elements in the app. Not sure what z-index the assertions menu has but can it be higher 😬 cy.visit('https://ant.design/components/overview/').

@panzarino
Copy link
Contributor Author

panzarino commented Jul 20, 2021

@jennifer-shehane Thanks for testing this so thoroughly! I think I've fixed all of the issues - set z-index to the maximum possible and set values to truncate at 80 characters. I've also updated the menu positioning so that it will sometimes overlap the element in order to stay in frame (such as the example that you've shown).

EDIT: I'm not super happy with the positioning solution for tall elements - I'll keep playing around with this and see if I can figure out something better tomorrow

For some reason the Percy snapshots aren't properly capturing the menu so I've taken them out for now - I'll keep looking for a fix and hopefully get them back in if possible.

As for the hijacking the right click - for now I think this is the best option for the majority of users - we plan on adding some sort of control panel in the future for toggling certain options and we can revisit this issue at that time

chrisbreiding
chrisbreiding previously approved these changes Jul 21, 2021
Copy link
Contributor

@chrisbreiding chrisbreiding left a comment

Choose a reason for hiding this comment

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

Code-wise, looks good to me!

@jennifer-shehane jennifer-shehane self-requested a review July 21, 2021 14:25
@panzarino
Copy link
Contributor Author

Ok so it was a much bigger pain than I had imagined but I was able to patch popper to fix the display on large elements (see 1. above) - everything should be good to go now 😄

Copy link
Member

@jennifer-shehane jennifer-shehane left a comment

Choose a reason for hiding this comment

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

Looks great! I like how the floating assertion popup works for things that take up the entire height of the page.

@panzarino panzarino merged commit b25d09f into develop Jul 22, 2021
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jul 29, 2021

Released in 8.1.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v8.1.0, please open a new issue.

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Jul 29, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants