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.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up