カスタマイズされたチェックボックスが選択されているか検証しよう

はじめに

Webページに表示されるチェックボックスには、① 標準的なチェックボックスと、② デザインがカスタマイズされたチェックボックスが存在します。
見た目上はチェックボックスでも、①と②ではサイト上の実装方法が異なります。
特に②の場合、「チェックボックスが選択状態か検証する」の動作が正しく動作しないことがあるため、その検証を行うカスタム動作を作成します。

チェックボックスをカスタマイズする理由として、input要素だけで作成した場合よりも、label要素を併用したほうがクリックできる範囲が広がることが理由のひとつです。

input要素とlabel要素を併用した時は、input要素を非表示にして実装します。
非表示になっているだけで存在はしていますが、「チェックボックスが選択状態か検証する」の動作は非表示の要素には使用できません。そのため、input要素とlabel要素を併用しているチェックボックスでは、カスタム動作を使って検証する必要があります。

詳細

1. サンプルファイルをダウンロードしインポートする

以下からファイルのダウンロードができます。（checkbox_sync.zip）
https://github.com/valtes-rd/t-dash/releases/tag/T-DASH_tutorial_InvisibleCheckbox

以下のチュートリアルにそって、サンプルファイルをインポートしてください。
■プロジェクトファイルをインポートしよう
https://service.valtes.co.jp/t-dash/function/tutorial/import_export_projectfiles_vol_001

プロジェクトファイルはインポートすると、
プロジェクト内のすべての情報がインポートした情報で上書きされます。

必ず、「+プロジェクトを作成」ボタンから新規プロジェクトを作成し、インポートしてください。

2. カスタム動作を作成する

まずはカスタム動作を作成していきます。
左メニュー「動作定義」タブ→「カスタム動作」を選択し、「+新規カテゴリ作成」をクリックします。

カテゴリを作成して「作成」をクリックします。
キーは半角英数字で記載してください。

カテゴリを作成後、「+カスタム動作を追加」をクリック。

動作関数を作成します。

画像のように「任意の動作名」 「利用変数」 「動作種類」「任意のフォーマット」 「説明」を設定します。

追加するライブラリ:なし
追加するライブラリはありません。

①行目：
${checked}という変数に、「Execute JavaScript」でJavaScriptコードを実行し、その結果を格納します。
${location}は画面名、要素名が格納されている変数で、${location}のチェックボックスがチェックされているかの真偽値が${checked}に格納されるという動作が実行されます。

②行目：
「Should Be True」キーワードで${checked}の結果がTrue（正しい）ことを確認しています。
もしFalse（間違い）であれば、テスト結果は失敗になります。

①	${checked}=	Execute Javascript	var result = document.evaluate(‘${location}’, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; return result.checked;
②	Should Be True	${checked}	${checked}

記述用

作成後に右上の「保存する」をクリックします。