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.

Sign up for GitHub

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

Jump to bottom

[TESTING] Add Cypress Real Events for a11y UI testing #5510

Merged
merged 13 commits into from
Jan 5, 2022
Merged

[TESTING] Add Cypress Real Events for a11y UI testing #5510

merged 13 commits into from
Jan 5, 2022

Conversation

1Copenut
Copy link
Contributor

@1Copenut 1Copenut commented Dec 30, 2021 •
edited by cee-chen
Loading

Summary

I added the Cypress Real Events library to our Cypress test config and wrote a proof of concept, showing how we can use real browser events like keypresses, clicks, and hovers in our tests. Specifically, these tests will give us more coverage for keyboard and aspects of screen reader accessibility testing.

Only works in Chrome or Edge, but this is not a significant issue IMO. The type of events we are looking to test with this library are well-tread paths in evergreen browsers.

Why?

From the Cypress Real Events repo:

Cypress default events are simulated. That means that all events like cy.click or cy.type are fired from javascript. That's why these events will be untrusted (event.isTrusted will be false) and they can behave a little different from real native events. But for some cases, it can be impossible to use simulated events, for example, to fill a native alert or copy to the clipboard. This plugin solves this problem.

Further improvements may include:

Checklist

@1Copenut 1Copenut added accessibility testing Issues or PRs that only affect tests - will not need changelog entries skip-changelog accessibility - automated labels Dec 30, 2021
@1Copenut 1Copenut self-assigned this Dec 30, 2021
1Copenut
1Copenut commented Dec 30, 2021
View reviewed changes
Copy link
Contributor Author

@1Copenut 1Copenut left a comment

Choose a reason for hiding this comment

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

Added a couple of comments to the draft PR for context.

src/components/accordion/accordion.spec.tsx Outdated Show resolved Hide resolved
src/components/accordion/accordion.spec.tsx Show resolved Hide resolved
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/

cee-chen
cee-chen reviewed Jan 4, 2022
View reviewed changes
package.json Outdated Show resolved Hide resolved
cee-chen
cee-chen reviewed Jan 4, 2022
View reviewed changes
wiki/cypress-testing.md Outdated Show resolved Hide resolved
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/

@1Copenut
Refactoring setup to a custom Cypress Command helper.
2244915 
* Moved the first portion of the setup into a custom helper
* Added a second promise return to the custom helper for `cy.get()`
* DRY refactor of the real events setup completed.
@1Copenut
Updating documentation heading levels.
f09753c
@1Copenut 1Copenut requested a review from cee-chen January 4, 2022 21:01
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/

@1Copenut
Adding a helper for repeated keypresses, refactoring contrxt menu pan…
6096153 
…el test.

* Refactored context menu panel test, updated docs.
* Added TypeScript definition to the realMount custom command.
* Updated docs to explain both mounting commands.
@1Copenut 1Copenut marked this pull request as ready for review January 5, 2022 15:36
1Copenut
1Copenut commented Jan 5, 2022
View reviewed changes
src/components/context_menu/context_menu_panel.spec.tsx
@@ -47,49 +45,42 @@ describe('EuiContextMenuPanel', () => {
</EuiContextMenuItem>,
];

// Intermittent flake workaround: without this, the first downarrow key does not always focus into the menu items as expected
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This worked out really well, moving to real events. I was able to remove the wait timers altogether. I added focus() checks for each step and looped the test 100 times for a quality check.

Screen Shot 2022-01-04 at 5 07 12 PM

Copy link
Member

Choose a reason for hiding this comment

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

Gif of happy woman flapping her hands to express excitement

Copy link
Member

Choose a reason for hiding this comment

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

This looks fantastic to me! Just have 1 change request for the types file and 1 optional comment on repeatRealPress and I think this is good to go!

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/

cee-chen
cee-chen reviewed Jan 5, 2022
View reviewed changes
cypress/support/index.d.ts Outdated Show resolved Hide resolved
cee-chen
cee-chen reviewed Jan 5, 2022
View reviewed changes
cypress/support/index.d.ts Outdated Show resolved Hide resolved
cee-chen
cee-chen reviewed Jan 5, 2022
View reviewed changes
Copy link
Member

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

Super sorry, I'm actually the worst - I know I said the type change request was the last thing, but I did one last review pass and noticed a cy.end() usage that should likely be removed. I swear this is the actual last comment haha 🙈

cypress/support/index.d.ts Outdated Show resolved Hide resolved
src/components/accordion/accordion.spec.tsx Outdated Show resolved Hide resolved
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/

cee-chen
cee-chen approved these changes Jan 5, 2022
View reviewed changes
Copy link
Member

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

Woohoo!! Thanks for your responsiveness and fixing that dang flakey Cypress test! This is awesome!

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/

thompsongl
thompsongl reviewed Jan 5, 2022
View reviewed changes
Copy link
Contributor

@thompsongl thompsongl left a comment

Choose a reason for hiding this comment

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

This is so good!

wiki/cypress-testing.md Outdated Show resolved Hide resolved
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/

@1Copenut 1Copenut merged commit 3814436 into elastic:main Jan 5, 2022
@1Copenut 1Copenut deleted the feature/tpierce-eui-cypress-real branch January 5, 2022 23:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cee-chen cee-chen cee-chen approved these changes

@thompsongl thompsongl thompsongl approved these changes

@chandlerprall chandlerprall Awaiting requested review from chandlerprall

Assignees

@1Copenut 1Copenut

Labels
accessibility - automated accessibility skip-changelog testing Issues or PRs that only affect tests - will not need changelog entries
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@1Copenut @kibanamachine @cee-chen @thompsongl