Add keyboard shortcuts

[chrisbreiding]

Add keyboard shortcuts for common actions in the Cypress UI. Examples (with possible shortcuts) are:

• Re-running the tests (R) Added in Add keyboard shortcuts #3943
• Stopping the tests (S) Added in Add keyboard shortcuts #3943
• Controlling the tests when paused (next: N, continue: C)
• Toggle auto-scrolling (A)
• Focus the tests (F) Added in Add keyboard shortcuts #3943
• Pinning a command while it's focused or moused over (P)
• Explain what keyboard shortcuts are available within the UI buttons.

Also, evaluate the keyboard-friendliness of the UI. Is it easy to tab through various UI elements? Do UI elements have proper focus styles? We may need to add enhancements like responding to down arrow, left arrow, etc to focus tests and commands, move through them, expand/collapse them, etc.

---

Since the shortcuts map exactly to the UI elements we already have - there should be updates to the UI to help indicate to users which key to press. As it stands, there's no way for users to have any idea these exist at all (or what they do).

[fvanwijk]

And ? to popup a panel with all the shortcuts

[richdouglasevans]

Those Feels When you've done some prep work for an issue, paused it for a bit to work on something else, come back to the issue ready to start work in earnest... and then you spot the first timers only tag that's been added in the interim.

Just kidding 😛

For the first timer that picks this up the Cypress package in which you might choose to add implementation is the reporter.

That package has Cypress tests: you might start by writing some Cypress tests that'll initially fail -- 'cos you'll not have added the keyboard shortcuts yet -- but will go green once you do.

Have fun! Tag me when this is done so that I might sing your name to the heavens 😄

[durangatan]

Hi! is it cool if I work on this for Hacktoberfest?

[chrisbreiding]

@durangatan Absolutely!

[durangatan]

I'm having a hard time getting the cypress tests in the reporter package to run; when they start up I get Uncaught Error: Cannot find module 'mobx'. I've tried running npm install in the root directory and in the reporter directory as well as running link-packages. Am I missing a setup step somewhere?

[chrisbreiding]

Sorry about that. The reporter's Cypress tests needed some attention. Historically, the reporter has only been unit tested and the 2 Cypress tests are more recent additions. They weren't set up to run in CI, which is why we never caught this issue.

That said, I think this it's good to add Cypress tests for this feature. I've fixed the issues and the reporter's Cypress tests now run in CI. Pull down the latest develop branch, re-build the reporter, and you should be good to go.

[jennifer-shehane]

Some work has been done on this issue, but requires being handed off to someone else, so this is free to be picked up and finished.

[timidak]

I think that would be a great feature and would like to try to implement it. Is that cool for everyone?
If it is, I just need to know where exactly to implement it, I'm guessing the desktop-gui package, am I right? 🙂

edit: After reading your code guide I found that pkg/reporter is already tagged 😄 so this might be the package where I should start to look 😅

[jennifer-shehane]

Hey @timidak, yes, these keyboard shortcuts would work within the reporter package - see the README for guidance on getting started.

[timidak]

I was wondering which component would be the best one to listen to keyBoardEvents and emit events with with the events lib. 🙂I saw how it works in packages/reporter/header/controls.jsx but I don't really know where to implement the functionality.

[chrisbreiding]

There was a PR created to address this but the author wasn't able to finish it. I'd take a look at that for an idea, but start fresh. Check out my comment on where/how I'd recommend implementing this.

[fixcik]

Can you add shortcut for selector playground? I think it will be very useful.

[jennifer-shehane]

This is very low priority for us, so our team will likely not pick this up. You're welcome to open a PR - even one that is a work in progress is fine. Check out our contributing doc and ask us if you get stuck.

[Manuel-Suarez-Abascal]

@chrisbreiding @jennifer-shehane I have opened this PR to address this issue 🚀

[cypress-bot]

The code for this is done in cypress-io/cypress#16411, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 7.4.0.

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