使用 Cypress 选择文本答案

【问题标题】：Selecting text with Cypress使用 Cypress 选择文本
【发布时间】：2019-01-13 18:10:44
【问题描述】：

我正在尝试使用 Cypress 在 textarea 中选择文本，但遇到了一些问题。 Cypress api 没有我能找到的开箱即用的方法，所以我尝试自己实现它。

我找到了this stackoverflow answer about selecting text 并决定效仿它。我得到的是这样的：

selectTextWithin = (selector: string) => {
    cy.document().then((doc: Document) => {
        cy.window().then((win: Window) => {
            cy.get(selector).then((textElement: JQuery<HTMLElement>) => {
                if (win.getSelection) {
                    const selection = win.getSelection();
                    const range = doc.createRange();
                    range.selectNodeContents(textElement.get(0));
                    selection.removeAllRanges();
                    selection.addRange(range);
                } else {
                    throw new Error("Can't select text.")
                }
            })
        })
    })
}

它执行没有错误，但似乎没有选择任何文本。

【问题讨论】：

如果你想选择整个内容，那么它只是textElement.get(0).select()。 developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/…

标签： javascript typescript cypress

【解决方案1】：

您链接到的答案涉及在输入字段之外专门选择文本。 Here 是在输入字段中选择文本的答案。

他们发布了demo，我已经为赛普拉斯修改了它。

HTML：

<html>
  <body>
    <textarea type="textarea" name="message" id="message">Hello World</textarea>
  </body>
</html>

赛普拉斯：

function createSelection(field, start, end) {
    if( field.createTextRange ) {
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart('character', start);
        selRange.moveEnd('character', end);
        selRange.select();
    } else if( field.setSelectionRange ) {
        field.setSelectionRange(start, end);
    } else if( field.selectionStart ) {
        field.selectionStart = start;
        field.selectionEnd = end;
    }
    field.focus();
}

describe('Text selection', function() {
    it('Selects text in a text area', function() {
        cy.get("#message").then(textarea => {
            createSelection(textarea, 0, 5);
        });
    }
}

【讨论】：

我很感激！这是一个愚蠢的错误。应该看看代码 sn-p。 @Alexey Lebedev 的评论更容易解决我的具体问题，但你的回答更完整。
没问题！是的，如果你只想选择所有的文字，那就简单多了。