fix: selector playground copy full command

[ZachJW34]

• Closes Selector playground only copies the selector, not the command like before (v10) #22043

User facing changelog

Selector Playground "copy to clipboard" now copies full command rather than just the selector

Additional details

In 9.x, the "copy to clipboard" button would copy the full command (method + selector). In 10.x, we were only copying the selector. This PR brings us back in to parity with 9.x, and also adds an active state to the playground activator when opened.

Steps to test

Open any Cypress project and click through to the selector playground. Hitting the "copy to clipboard" button would only copy the selector "body" and not "cy.get('body')" (same for contains).

How has the user experience changed?

Before:

Screen.Recording.2022-06-03.at.11.44.57.AM.mov

After:

Screen.Recording.2022-06-03.at.11.41.50.AM.mov

PR Tasks

• Have tests been added/updated?
• Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
• [na] Has a PR for user-facing changes been opened in cypress-documentation?
• [na] Have API changes been updated in the type definitions?

[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.

[mike-plummer]

Validated selector playground copy & print behaviors work as expected in E2E and CT. Only question I have regards closing the loop on your "tooltip" comment in the Issue. Did Ryan decide it should be dropped?

[ZachJW34]

@mike-plummer For the sake of getting this in I punted the tooltip. I reached out to design and if they want a tooltip I'll create an issue for it

[cypress]

---

Test summary

37553 • 0 • 454 • 0 • 4

---

Run details

Project	cypress
Status	Passed
Commit	f4c595b
Started	Jun 6, 2022 9:03 PM
Ended	Jun 6, 2022 9:20 PM
Duration	17:03 💡
OS	Linux Debian - 10.11
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	commands/actions/click.cy.js		1
1	... > scroll-behavior > can scroll to and click elements in html with scroll-behavior: smooth
	commands/xhr.cy.js		1
1	... > logs request + response headers
	next.cy.ts		1
1	Working with next-11 > should detect new spec
	cypress/proxy-logging.cy.ts		1
1	Proxy Logging > request logging > xhr log has response body/status code when xhr response is logged second

---

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

[rachelruderman]

Tried, tested and true! Nice job 🎉