なんだかGoodVibes

日々の勉強メモです。

【Cypress】色々なコントロールの状態チェック(should, and)

Cypress

こんにちは。
本日はCypressについてのメモです。

概要

画面コントロールの初期状態のチェックを行いたい。
チェックの内容は以下。

コントロール id 初期状態 valueの設定
チェックボックス1 chk1 チェックあり 1
チェックボックス2 chk2 チェックなし 2
ラジオボタン1 rdo1 チェックあり 1
ラジオボタン2 rdo2 チェックなし 2
ボタン1 btn1 表示 -
ボタン2 btn2 非表示 -


使用する画面テンプレート

テンプレートはタイムリーフを使用しています。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>CypressSample</title>
    <style>
        .hidden-style {
            visibility:hidden;
        }

        section.spacer {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div style="text-align:center;">
        <h1>Cypress Sample</h1>
        <section class="spacer"></section>
        <div class="check-area">
            <input type="checkbox" id="chk1" value="1" checked>チェック1
            <input type="checkbox" id="chk2" value="2">チェック2
        </div>
        <section class="spacer"></section>
        <div class="radio-area">
            <input type="radio" name="radioBtn" id="rdo1" value="1" checked>ラジオ1
            <input type="radio" name="radioBtn" id="rdo2" value="2">ラジオ2
        </div>
        <section class="spacer"></section>
        <div class='button-area'>
            <button id="btn1">ボタン1</button>
            <button id="btn2" class="hidden-style">ボタン2</button>
        </div>
    </div>
</body>
</html>


cypressの内容

ベースURLの設定

画面へアクセスするための設定をします。
まず、基本となるURLをcypress.jsonに設定します。

{
    "baseUrl": "http://localhost:8080"
}


サンプルコード

本サンプルでは、should()を使用して確認しています。
引数に、あるべき状態を指定することで確認が行なえます。
andを使用すると、連続でチェックができます。

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

        // -------------------------
        // チェックボックスのチェック
        // -------------------------
        // チェック状態
        cy.get('#chk1').should('be.checked')
        cy.get('#chk2').should('not.be.checked')

        // value
        cy.get('#chk1').should('have.value', '1')
        cy.get('#chk2').should('have.value', '2')

        // -------------------------
        // ラジオボタンのチェック
        // -------------------------
        // チェック状態
        cy.get('#rdo1').should('be.checked')
        cy.get('#rdo2').should('not.be.checked')

        // value
        cy.get('#rdo1').should('have.value', '1')
        cy.get('#rdo2').should('have.value', '2')

        // -------------------------
        // ボタンのチェック
        // -------------------------
        cy.get('#btn1').should('be.visible')
        cy.get('#btn2').should('not.be.visible')
    })
})



以上です。