feat: abilty to add assertions in Cypress Studio

[panzarino]

• Closes GROW-209

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:

Demo of adding an assertion in a real world use case:

PR Tasks

• Have tests been added/updated?
• Has the original issue or this PR been tagged with a release in ZenHub?
• Has a PR for user-facing changes been opened in cypress-documentation? Add assertions to Studio guide cypress-documentation#4036

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[cypress]

---

Test summary

451 • 0 • 6 • 0 • 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

[jennifer-shehane]

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.

[jennifer-shehane]

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]

@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]

Code-wise, looks good to me!

[panzarino]

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 😄

[jennifer-shehane]

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

[cypress-bot]

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.