【Cypress】要素をダブルクリックする(dblclick)

こんにちは。 本日はCypressメモです。

概要

ある要素をダブルクリックしたい。

テンプレート

Buttonをダブルクリックすると
テキストボックスに文字を表示します。

html

<button id="dblClickBtn" ondblclick="dblClickBtn()">Button</button>
<input type="text" id="dblClickText">

javascript

function dblClickBtn() {
    document.getElementById('dblClickText').value = 'Double Click!'
}

Cypress

dblclickを使用することで
要素をダブルクリックすることができます。

以下のチェックを行います。

• シングルクリックでテキストが変化しないこと
• ダブルクリックでテキストが変化すること

describe('サンプル', () => {
    it('テストパターン', () => {
        cy.visit('/')

        cy.get('#dblClickBtn').click()
        cy.get('#dblClickText').should('have.value', '')
        cy.get('#dblClickBtn').dblclick()
        cy.get('#dblClickText').should('have.value', 'Double Click!')
    })
})

以上です。