Select / highlight text

Current behavior:

I’m having a hard time creating a text selection. Things I’ve tried:

• document.createRange() and window.getSelection()
• Using cy.trigger to simulate a cursor drag over the paragraph.
• Using dblclick on the paragraph.

Desired behavior:

Test highlighting text.

Steps to reproduce:

I can provide sample code for the approaches I tried, but I’ll hold off for now in case there’s a completely different known way of doing this.

Versions

Cypress 3.1.1, Chrome 70.0.3538.102

[erquhart]

Here are a couple of commands that are working for my team, using Cypress to test a Slate based editor: https://gist.github.com/erquhart/37bf2d938ab594058e0572ed17d3837a

Includes the ability to naively select based on text matching:

cy.get('p').setSelection('foo')

Or set both the start and end points of the selection:

cy.get('p').setSelection('foo', 'baz')

Also setCursorBefore/After with the same text matching interface, plus some other lower level commands.

[kuceb]

This would have to be a new command entirely, and isn’t planned for the native events release. However we do plan to support text selection in the future

In the meantime, you can try this:

cy.get('p.mytext')
.trigger('mousedown')
.then(($el) => {
  const el = $el[0]
  const document = el.ownerDocument
  const range = document.createRange()
  range.selectNodeContents(el)
  document.getSelection().removeAllRanges(range)
  document.getSelection().addRange(range)
})
.trigger('mouseup')
cy.document().trigger('selectionchange')