Cypress
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 指定した要素の親要素を取得したい。 テンプレート <div> <ul class="my-item"> <li id="redItem">赤い果物</li> <li>いちご</li> <li>さくらんぼ</li> <li>りんご</li> </ul> </div> Cypress まず、redItemの直近の親要素を検索してチェックしてみます。 直近の親要素の取得…
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 特定の条件に一致しないことを確認する。 テンプレート <input type="text" id="txt1" class="required"> <input type="text" id="txt2" class="my-class"> <input type="text" id="txt3" class="my-class"> Cypress 今回は、inputにrequiredクラスが 設定されていないことを確認しています。 describe('サンプル', () => { it('テス…
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 特定の要素から指定した条件までの範囲に含まれる要素を取得したい。 このとき、検索の方向は後ろ、または前とする。 テンプレート <ul> <li id="redItem">赤い果物</li> <li>いちご</li> <li>さくらんぼ</li> <li>りんご</li> <li id="yellowItem">黄色い果物</li> <li>み</li></ul>…
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 特定の要素の後ろもしくは前に存在する すべての要素を取得したい。 テンプレート <ul> <li class="red-item">りんご</li> <li>みかん</li> <li class="active">レモン</li> <li>メロン</li> <li>スイカ</li> <li class="red-item">いちご</li> <li class="red-item">さくらんぼ</li> </ul> Cypress activeクラスが指定されている要…
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 特定の要素の次の要素、 もしくは前の要素を取得したい。 テンプレート <ul> <li>みかん</li> <li class="active">レモン</li> <li>メロン</li> <li>スイカ</li> <li>いちご</li> <li>りんご</li> </ul> Cypress activeクラスが設定された要素の前と次を取得します。 …
こんにちは。 本日はCypressメモです。 概要 Cypress 概要 該当のページのwindow.locationの内容を検証したい。 Cypress .location()でwindow.locationの値を取得することができます。 検証したい項目を指定して検証を実施します。 describe('サンプル', () …
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 フォーカスインされている要素を取得したい。 フォーカスの操作を行う方法については 以下の記事を参照してください。 【Cypress】フォーカスイン・アウトのチェックを行う(focus、blu…
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 特定の要素の最初、最後を取得したい。 テンプレート html <ul> <li>みかん</li> <li>メロン</li> <li>いちご</li> </ul> Cypress タグの最初の要素を取得し、内容をチェックします。 同様に、最後の要素を取得し、内容をチ…
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 特定の要素の子孫要素から 条件に一致する要素を取得したい。 テンプレート html <div class="input-area"> <input type="checkbox" class="chkbox" value="1">チェック1 <input type="checkbox" class="chkbox" value="2">チェック2 <input type="checkbox" class="chkbox" value="3">チェック3 </div>
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 特定の要素群の中から、 指定した条件に一致する要素を抽出して取得したい。 テンプレート html <div class="input-area"> <input type="checkbox" class="chkbox" value="1">チェック1 <input type="checkbox" class="chkbox" value="2">チェック2 <input type="checkbox" class="chkbox" value="3">チェック3 </div>
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 指定した要素内に含まれる要素を インデックスを使用して取得したい。 テンプレート html <div class="input-area"> <input type="checkbox" class="chkbox" value="1">チェック1 <input type="checkbox" class="chkbox" value="2">チェック2 <input type="checkbox" class="chkbox" value="3">チェック3 </div> <div> </div>
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 複数の要素を一括で取得して、 その要素を回して操作やチェックをしたい。 テンプレート html <div> <input type="checkbox" class="chkbox" value="1">チェック1 <input type="checkbox" class="chkbox" value="2">チェック2 <input type="checkbox" class="chkbox" value="3">チェック3 </div> Cypress クラス名がchkboxとなっている要素に対して ク…
こんにちは。 本日はCypressメモです。 概要 Cypress 概要 documentオブジェクトを取得したい。 Cypress 使用するのはdocument()とits() document()でdocumentオブジェクトを取得します。 its()を使用すると、前に指定した要素に含まれる 引数に指定したプロ…
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 ある時間関連の処理を待機時間なくサクッとテストしたい。 時間関連の処理に含まれるのは以下の関数。 setTimeout clearTimeout setInterval clearInterval Dateオブジェクト テンプレ…
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 ある要素をダブルクリックしたい。 テンプレート Buttonをダブルクリックすると テキストボックスに文字を表示します。 html <button id="dblClickBtn" ondblclick="dblClickBtn()">Button</button> <input type="text" id="dblClickText"> javascript function dblClickBtn() { document.g…
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 対象の内容が、指定したターゲットに含まれているか チェックしたい。 テンプレート タイトルと簡単な一覧を用意します。 html <div id="item-area"> <p class="item-title">季節のフルーツ一覧</p> <ul> <li>みかん</li> <li>メロン</li> <li>いちご</li> </ul> </div> Cypress …
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 textやtextareaの入力値をクリアしたい。 テンプレート テキストを用意します。 html <div class='text-area'> <input type="text" id="txt1" class="text-class"> </div> Cypress 以下の操作を行う。 txt1のテキストボックスに「HELLO」と入力 txt1の入力値をクリア…
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 指定の要素の配下にある子要素をまとめて取得したい。 テンプレート チェックボックスとラジオボタンを複数用意します。 html <div style="text-align:center;"> <h1>Cypress Sample</h1> <div class="input-area"> <input type="checkbox" class="chkbox" value="1">チェック1 <input type="checkbox" class="chkbox" value="2">チェック2 </div></div>
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 チェックボックスとラジオボタンのチェックを行いたい。 テンプレート チェックボックスとラジオボタンを複数用意します。 html <div style="text-align:center;"> <h1>Cypress Sample</h1> <div> <input type="checkbox" class="chkbox" value="1">チェック1 <input type="checkbox" class="chkbox" value="2">チェック2 </div></div>
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 コントロールへのフォーカスイン、フォーカスアウトを Cypressで実行し、テストを行う。 テンプレート フォーカスイン、フォーカスアウトを検知して テキストボックスへ値を設定してい…
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 取得した要素をあとでも使用したい。 でも、同じコードを書くのは嫌。。。 as()を使用することでエイリアスを設定して あとから使用できるとのことなので 試してみる。 テンプレート <body> <div style="text-align:center;"> <h1></h1></div></body>…
こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 連続でチェックを行うとき、 shouldの代わりにandを使用できるようなので 試してみる。 テンプレート <body> <div style="text-align:center;"> <div class='text-area'> <input id="txt1" type="text" class="text-class" maxlength="10" value="HELLO"> </div> </div> </body> Cypress 以下のチェックを行う。 表示であること(非表示でないこと) …
こんにちは。 本日はCypressについてのメモです。 概要 使用する画面テンプレート cypressの内容 概要 画面コントロールのの操作（クリック）を 行った上でチェックを行うことと、 テキストボックスヘの入力を行いたい。 操作と状態は以下に記載。 チェック…
こんにちは。 本日はCypressについてのメモです。 概要 画面コントロールの初期状態のチェックを行いたい。 チェックの内容は以下。 コントロール id 初期状態 valueの設定 チェックボックス1 chk1 チェックあり 1 チェックボックス2 chk2 チェックなし 2 ラ…
こんにちは。 本日はCypressについてのメモです。 概要 テストコードの書き方 対象URLへのアクセス テストのスキップと特定のテストのみの実行 概要 Cypressの書き方の基本と、 URLへアクセスについて。 Cypressのインストールについては以下の記事を参照し…
こんにちは。 本日はCypressを使うためのインストールのメモ。 概要 テストを行う際、手動でテストをするのもいいですが やはり人の手で行うとミスがでてしまうもの... でも、テストって欠かせないものですよね。 テスト自動化しようってことでCypressを使っ…
