DEV Community

Cover image for How to HIGHLIGHT text with Cypress
Christine Pinto
Christine Pinto

Posted on • Edited on

How to HIGHLIGHT text with Cypress

I recently wrote automated UI tests for a text editor application. One of the most important functions was to format text in different ways (e.g. text styles or text alignments). My biggest issue was to figure out how to highlight🖍️ text with Cypress in order to change the formatting of that text.

This feature is an open Github issue in the Cypress repository. I tried out several of their solutions and this is the one which worked best for me:

// Highlight text in the sectionArea
cy.get(sectionArea).realPress(["Shift","ArrowLeft","ArrowLeft"]);
Enter fullscreen mode Exit fullscreen mode

I used the command realPress() from Cypress real events to simulate the highlighting of text via the keyboard⌨️. This was the easiest solution as I have already used other commands from Cypress real events to solve other issues.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay