DEV Community

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

Posted on • Updated 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.

Top comments (0)