【Cypress】フォーカスイン・アウトのチェックを行う(focus、blur)

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

概要

コントロールへのフォーカスイン、フォーカスアウトを
Cypressで実行し、テストを行う。

テンプレート

フォーカスイン、フォーカスアウトを検知して
テキストボックスへ値を設定しています。

html

<div style="text-align:center;">
    <h1>Cypress Sample</h1>
    <div class='text-area'>
        <input id="txt1" type="text" class="text-class">
    </div>
</div>

javascript

<script>
    const txt1 = document.getElementById('txt1')
    txt1.addEventListener('focus', (event) => {
        txt1.value = 'Focus'
    })

    txt1.addEventListener('blur', (event) => {
        txt1.value = 'Blur'
    })
</script>

Cypress

以下の内容をテキストボックス対してチェックする。

• フォーカスイン：テキストボックスの値が「Focus」となること
• フォーカスアウト：テキストボックスの値が「Blur」となること

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

        cy.get('#txt1').focus().should('have.value', 'Focus')
        cy.get('#txt1').blur().should('have.value', 'Blur')
    })
})

focus()を使用してコントロールへフォーカスインを行い、
blur()を使用してフォーカスアウトをしています。

以上です。