なんだかGoodVibes

日々の勉強メモです。

2022-01-01から1年間の記事一覧

【Java】JsonAnySetterでパラメータを受け取る

こんにちは。 本日はJavaメモです。 概要 サンプルコード 概要 APIでデータを受けるとき、 特定のクラスを指定していました。 以下の記事でも、全パラメータを指定したクラスを作成しています。 【JavaScript】fetch()を使ってみる - なんだかGoodVibes Json…

【JavaScript】ループ処理でのcontinueとbreak

こんにちは。 本日はJavaScriptのループ処理における continue、breakについてのメモです。 概要 for forEach some まとめ 概要 ループ処理で使用するforEachですが、 continue、breakが使用できないんですよね。 なので、ループ処理で上記を実現する方法に…

【JavaScript】setIntervalタイマー処理を停止する(clearInterval)

こんにちは。 本日はJavaScriptメモです。 概要 サンプルコード 概要 定周期処理を行うsetInterval()、 タイマーを停止したい!って場合ありますよね。 その時は、clearInterval()メソッドを使用します。 サンプルコード setInterval()は、setTimeout()同様…

【JavaScript】setTimeoutタイマー処理を停止する(clearTimeout)

こんにちは。 本日はJavaScriptメモです。 概要 サンプルコード 概要 タイマー処理を行うメソッドといえば setTimeout()ですね。 タイマー処理開始したものの、 タイマーを停止したい!って場合ありますよね。 その時は、clearTimeout()メソッドを使用します…

【Cypress】親要素の取得(parent、parents)

こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 指定した要素の親要素を取得したい。 テンプレート <div> <ul class="my-item"> <li id="redItem">赤い果物</li> <li>いちご</li> <li>さくらんぼ</li> <li>りんご</li> </ul> </div> Cypress まず、redItemの直近の親要素を検索してチェックしてみます。 直近の親要素の取得…

【Cypress】条件に一致しないことの確認と抽出(not)

こんにちは。 本日は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('テス…

【JavaScript】ユーザーエージェントの取得

こんにちは。 本日はJavaScriptメモです。 概要 サンプルコード 概要 アクセス元の情報を取得したい。 (OSの種類やブラウザの種類等の情報) サンプルコード const ua = window.navigator.userAgent 上記をログに出力すると以下の出力になりました。 Mac Chro…

【JavaScript】一時停止の方法

こんにちは。 本日はJavaScriptメモです。 概要 サンプルコード 概要 他言語には、処理を一時停止するsleepとかがありますよね。 なんと、JavaScriptにはそのようなものがありません。 なので、Promiseを使用して同等の機能を実現します。 サンプルコード co…

【JavaScript】fetch()を使ってみる

こんにちは。 本日はJavaScriptメモです。 概要 JavaScript GET POST 概要 Fetch APIを用いたデータのやり取りをやってみる。 GETとPOSTで、POSTで送信するデータはJson形式です。 今回、サーバ側はJavaを使用しました。 @RestController @RequestMapping("/…

【Cypress】特定の範囲の後ろ・前の要素を取得する(nextUntil, prevUntil)

こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 特定の要素から指定した条件までの範囲に含まれる要素を取得したい。 このとき、検索の方向は後ろ、または前とする。 テンプレート <ul> <li id="redItem">赤い果物</li> <li>いちご</li> <li>さくらんぼ</li> <li>りんご</li> <li id="yellowItem">黄色い果物</li> <li>み</li></ul>…

【Cypress】要素の後ろ・前のすべてを取得する(nextAll, prevAll)

こんにちは。 本日は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】要素の次・前を取得する(next, prev)

こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 特定の要素の次の要素、 もしくは前の要素を取得したい。 テンプレート <ul> <li>みかん</li> <li class="active">レモン</li> <li>メロン</li> <li>スイカ</li> <li>いちご</li> <li>りんご</li> </ul> Cypress activeクラスが設定された要素の前と次を取得します。 …

【Linux】別サーバをマウントする(NFS)

こんにちは。 本日はLinuxメモです。 概要 マウントされる側の設定(サーバA) 1. NFSサービスの起動 2. マウントポイントの追加(exports) 3. ポートの開放 4. 設定の反映 マウントする側の設定(サーバB) 1. NFSサービスの起動 2. マウントの実行 マウントを解…

【JavaScript】要素取得の色々メモ(getElement○○○)

こんにちは。 本日はJavaScriptメモです。 概要 getElementById getElementsByClassName getElementsByTagName 番外編 parentElement 概要 JavaScriptで要素の取得方法っていくつかありますよね。 それぞれがどのような要素を取得できるの調査。 本記事で使…

【Cypress】window.locationを検証する(location)

こんにちは。 本日はCypressメモです。 概要 Cypress 概要 該当のページのwindow.locationの内容を検証したい。 Cypress .location()でwindow.locationの値を取得することができます。 検証したい項目を指定して検証を実施します。 describe('サンプル', () …

【Cypress】フォーカスインされている要素を取得する(focused)

こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 フォーカスインされている要素を取得したい。 フォーカスの操作を行う方法については 以下の記事を参照してください。 【Cypress】フォーカスイン・アウトのチェックを行う(focus、blu…

【Cypress】特定の要素の最初・最後を取得する(first,last)

こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 特定の要素の最初、最後を取得したい。 テンプレート html <ul> <li>みかん</li> <li>メロン</li> <li>いちご</li> </ul> Cypress タグの最初の要素を取得し、内容をチェックします。 同様に、最後の要素を取得し、内容をチ…

【Cypress】特定の要素の子孫要素から条件に一致する要素を取得する(find)

こんにちは。 本日は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】要素をフィルターする(filter)

こんにちは。 本日は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】指定インデックスの要素を取得する(eq)

こんにちは。 本日は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】要素をループして操作する(each)

こんにちは。 本日は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】documentの取得(document, its)

こんにちは。 本日はCypressメモです。 概要 Cypress 概要 documentオブジェクトを取得したい。 Cypress 使用するのはdocument()とits() document()でdocumentオブジェクトを取得します。 its()を使用すると、前に指定した要素に含まれる 引数に指定したプロ…

【Cypress】時間の制御(clock、tick)

こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 ある時間関連の処理を待機時間なくサクッとテストしたい。 時間関連の処理に含まれるのは以下の関数。 setTimeout clearTimeout setInterval clearInterval Dateオブジェクト テンプレ…

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

こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 ある要素をダブルクリックしたい。 テンプレート Buttonをダブルクリックすると テキストボックスに文字を表示します。 html <button id="dblClickBtn" ondblclick="dblClickBtn()">Button</button> <input type="text" id="dblClickText"> javascript function dblClickBtn() { document.g…

【Node】GETとPOSTのデータを受信する

こんにちは。 本日はNodeメモです。 概要 サンプルコード 動作確認 GET POST 概要 GETもしくはPOSTデータを受信して、 データが正しく送信されているか確認したい。 今回使用するモジュールは http url となっています。 サンプルコード const http = requir…

【Cypress】指定した内容が含まれているかチェックする(contains)

こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 対象の内容が、指定したターゲットに含まれているか チェックしたい。 テンプレート タイトルと簡単な一覧を用意します。 html <div id="item-area"> <p class="item-title">季節のフルーツ一覧</p> <ul> <li>みかん</li> <li>メロン</li> <li>いちご</li> </ul> </div> Cypress …

【Cypress】入力値のクリアを行う(clear)

こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 textやtextareaの入力値をクリアしたい。 テンプレート テキストを用意します。 html <div class='text-area'> <input type="text" id="txt1" class="text-class"> </div> Cypress 以下の操作を行う。 txt1のテキストボックスに「HELLO」と入力 txt1の入力値をクリア…

【Cypress】子要素を取得する(children)

こんにちは。 本日は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】チェックボックス・ラジオボタンをチェックする(check)

こんにちは。 本日は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】フォーカスイン・アウトのチェックを行う(focus、blur)

こんにちは。 本日はCypressメモです。 概要 テンプレート Cypress 概要 コントロールへのフォーカスイン、フォーカスアウトを Cypressで実行し、テストを行う。 テンプレート フォーカスイン、フォーカスアウトを検知して テキストボックスへ値を設定してい…