こちらのwebサイトを参考に、分かりづらいところを付け足しながら作成させていただきました。
インストール方法やCypressのメリットなどは公式サイトでご確認ください。
コマンド一覧
cy.visit() ：特定の URL にアクセスするために使用する
cy.visit('https ://www.amazon.jp/')
この例では、cy.visit()コマンドを使用して URL “ https://www.amazon.jp/”にアクセスしています。
これは、その URL のページの動作をテストする場合や、特定の URL にリダイレクトされたときのページの動作をテストする場合に役立ちます。
cy.get() ：ページ上の要素を選択するために使用する
cy.get('button').click();
この例では、 cy.get()コマンドを使用してページ上のボタン要素を検索し、その要素のクリックをシミュレートしています。
これにより、ユーザーがボタンをクリックしたときのページの動作をテストできます。
.contains() ：ページ上の特定のテキスト文字列を検索するために使用する
たとえば、ページ上で「テスト」という単語を検索する場合は、次のコードを使用できます。
cy.contains('テスト');
cy.get('#footer').contains('利用規約');
.click() ：ページ上の要素をクリックするために使用する
座標、位置を指定して要素をクリックすることができ、click()とキーを組み合わせることもできます。最もよく使用されるクリック コマンドの一部を以下に示します。
cy.get('Sign Up').click();
// alt属性が「iPhone」である要素を取得して"@iphone"というエイリアスで保存し、クリックする
cy.get("[alt='iPhone']").as("iphone");
cy.get ("@iphone").click();
// リストの最初の項目をshiftキーを押しながらクリック
cy.get('li:first').click({
shiftKey: true ,
});
// サインアップボタンを強制的にクリックする。要素が非表示・無効化されている場合でも強制的にクリックする。
cy.get('Sign Up').click({ force: true }});
// img要素の画像の右上隅をクリック
cy.get('img').click('topRight');
// ".action-labels"クラス直下の"label"要素を取得し、すべての取得した要素を順にクリックする。
cy.get('.action-labels>.label').click({ multiple: true });
.dblclick(): テスト対象のページ内の要素のダブルクリックするために使用する
このコマンドはセレクターを引数として受け入れ、ダブルクリックされた要素を返します。
cy.get('button').dblclick();
.rightclick(): テスト対象のページ内の要素の右クリックをシミュレートするために使用する
このコマンドはセレクターを引数として受け入れ、右クリックされた要素を返します。
cy.get('button').rightclick();
.type() ：ページの入力フィールドにテキストを入力するために使用する
Enter などのキーを渡すこともできます。以下は、よく使用されるコマンドの一部です。
// name属性が"email"である入力フィールドに、"johndoe@example.com"と入力する
cy.get('input[name=email]').type('johndoe@example.com');
// placeholderが"Serch"である入力フィールドに、ShiftキーとAltキーを押しながら"macbook"と入力する
cy.get("[placeholder='Search']").type("{shift}{alt}macbook");
// 入力フィールドが非表示や無効化されていても強制的に入力する
cy.get('input[type=text]').type('Test', { force: true });
// "iPhone"と入力してエンターキーを押す
cy.get('#input-firstname').type("iPhone {enter}");
// 上と同じだが、typeを2回使用している
cy.get('#input-firstname').type("iPhone").type('{enter}');
// ABと入力するが、各文字を入力する間に1000ミリ秒の遅延がある。
cy.get('#input-lastname').type ('AB', { delay: 1000 });
.clear() ：入力フィールドからテキストをクリアするために使用する。
たとえば、検索フィールドからテキストをクリアする場合は、.clear() を使用できます。
また、Web ページに要素が複数回表示される場合は、入力してクリアしたり、特定の要素を取得したりすることもできます。
// 検索フィールドのクリア
cy.get('#search-field').clear()
// 検索フィールドに"hello"と入力してクリア
cy.get('#search-field').type("hello").clear()
.check() ：チェックボックスまたはラジオボタンをチェックするために使用する
たとえば、複数の値を持つフォームを同時にチェックしたい場合は、値を配列形式で渡すことで実行できます。
// ページ上のすべてのチェックボックスをチェックする
cy.get('[type="checkbox"]').check()
// value属性が"女性"であるラジオボタンをチェックする
cy.get('[type="radio"]').check('女性')
// value属性が"US"と"India"であるチェックボックスをチェックする
cy.get('[type="checkbox"]').check (['US', 'India'])
// 強制的にチェックボックスをチェックする
cy.get('[type="checkbox"]').check ({ force: true })
.uncheck()：チェックボックスまたはラジオボタンのチェックを外すために使用する
たとえば、フォーム内の複数の値を同時にチェック外したい場合は、値を配列形式で渡すことで実行できます。
// クラスが"action-check"で、type属性が"checkbox"である要素に対して、
// valueが"checkbox1"と"checkbox3"のチェックボックスをチェックして、チェックを外す
// 最後にチェックが外れていることを確認する
cy.get('.action-check[type="checkbox"]')
.check(['checkbox1', 'checkbox3'])
.uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')
// disabled属性がついていない（無効化されていない）すべてのチェックボックスをアンチェックする
cy.get('[type="checkbox"]')
.not('[disabled]')
.uncheck()
.select()：ドロップダウンメニューからオプションを選択するために使用する
// IDが"animals"のセレクトボックスからテキストが"Avatar"であるオプションを選択する
cy.get("select#animals").select("Avatar");
// 複数の値を同時に選択する
cy.get("select#second").select (["Donut" ,"Bonda"]);
// 非表示または無効化された場合でも要素を選択する
cy.get("select#first").select("Google", { force: true });
cy.wait() ：指定した時間だけテストの実行を一時停止するために使用する
// テストを2秒間一時停止する
cy.wait(2000)
cy.intercept() ：行われたネットワークリクエストを傍受してモックするために使用する
このコマンドは、リクエストメソッドと URL パターンを引数として受け入れ、傍受されたリクエストに対するモック応答を構成するために使用できるオブジェクトを返します。
// HTTPのGETメソッドで'https://example.com/api/users'に送信されるリクエストをインターセプトし、'getUsers'というエイリアスをつける
cy.intercept('GET', 'https://example.com/api/users').as('getUsers');
// ボタンをクリックしてリクエストを発生させる
cy.get('button').click();
// エイリアス"getUsers"がつけられたインターセプトされたリクエストを取得し、そのリクエストに対する操作を行うコールバック関数を指定
// HTTPステータス200とともにモックレスポンスとして2つのユーザーデータを返す。
cy.get('@getUsers').then(interception => {
interception.reply(200, [{ id: 1, name: 'Tom' }, { id: 2, name: 'Bob' }]);
});
cy.request(): 特定の URL にリクエストを行うために使用する
URL "https://api.coinbase.com/v2/currencies" に GET リクエストを行い、応答をログに記録する場合は、次のコードを使用できます。
cy.request("GET", "https://api.coinbase.com/v2/currencies").then(
(response) => {
console.log(response.status)
});
cy.task(): テスト内でカスタム Node.js コードを実行するために使用する
たとえば、コンソールにメッセージを出力したい場合は、次のコードを使用できます。
cy.task("log", "hello World");
cy.scrollTo()：ページ上の特定の要素までスクロールするために使用する
座標または bottom、topLeft などの位置を渡すことで、ページ上をスクロールできます。
// ページを垂直方向に500ピクセルスクロールする。
// 0：水平方向のスクロール量、500：垂直方向のスクロール量
cy.scrollTo(0, 500);
// ページを右上隅までスクロールする
cy.scrollTo("topRight");
// ページの最下部までスクロールする
cy.scrollTo("bottom");
cy.getCookie() ：現在のページから特定の名前の Cookie を取得するために使用する
Cookie の名前を引数として受け入れ、Cookie の名前、値、およびその他の情報を含むオブジェクトを返します。
// 名前が'myCookie'であるCookieを取得する。
cy.getCookie('myCookie')
.then(cookie => { // 取得したCookieオブジェクトを処理するコールバック関数
console.log(cookie.name); // クッキーの名前をログ出力
console.log(cookie.value); // クッキーの値をログ出力
});
cy.url()：テスト対象のページの現在の URL を取得するために使用する
このコマンドは引数を受け入れず、現在の URL を含む文字列を返します。
// 現在のURLを取得
cy.url()
.then(url => {
console.log(url);
});
cy.location()：テスト対象のページの現在の場所を取得するために使用する
このコマンドは引数を受け入れず、URL、ホスト名、パス名、検索パラメータなど、現在の場所に関する情報を含むオブジェクトを返します。
cy.location()
.then(location => {
console.log(location.href); // 現在のURL
console.log(location.hostname); // 現在のホスト名
console.log(location.pathname); // 現在のパス名
console.log(location.search); // 現在の検索パラメータ
});
cy.reload()：現在のページを再読み込みするために使用する
このコマンドは引数を受け入れず、何も返しません。
cy.reload();
このコマンドを実行すると、現在のページが再読み込みされます。
たとえば、このコマンドを使用して、テストを実行する前にテスト対象のページが一貫した状態であることを確認したり、ページが再読み込みされたときの動作をテストしたりできます。
cy.clock()：テストのクロックを制御するために使用する
このコマンドを使用すると、クロックの初期時間を設定したり、指定した時間だけ手動でクロックを進めたりすることができます。
これは、タイムアウトやスケジュールされたイベントなど、時間に依存する機能をテストするときに役立ちます。
// 関数をスパイとして定義
const myFunction = cy.spy().as('myFunction')
// 時間の設定
cy.clock(1000); // Cypressの内部時計を設定し、初期時刻を1000ミリ秒に設定する
// テスト内での関数の呼び出し
myFunction();
// 時計の進行
cy.tick(1000); // Cypressの内部時計を1000ミリ秒進める
// 関数の呼び出し検証
cy.get('@myFunction').should('have.been.calledOnce'); // myFunctionが1度だけ呼び出されたことを確認する
cy.viewport()：テストのビューポートのサイズを変更するために使用する
これは、Web アプリケーションの応答性をテストする場合や、さまざまなデバイスや画面サイズをシミュレートする場合に役立ちます。
cy.viewport(320, 480); // ビューポートのサイズを320×480ピクセルに設定する
cy.window()：テスト対象のページのグローバルwindowオブジェクトを取得するために使用する
このコマンドは引数を受け入れず、windowオブジェクトを Cypress サブジェクトとして返します。
このオブジェクトは、ユーザーと同じようにページを操作するために使用できます。
cy.window().then(win => {
win.scrollTo(0, 100); // 垂直方向に100ピクセルスクロールする
win.alert('Hello, world!'); // ブラウザでアラートダイアログを表示する
});
これにより、ユーザーと同じ方法でページの動作をテストできます。
cy.title()：テスト対象のページのタイトルを取得するために使用する。
このコマンドは引数を受け入れず、ページのタイトルを含む文字列を返します。
cy.title().then(title => {
console.log(title);
});
このコマンドは、テスト対象のページに期待どおりのタイトルがあるかどうかを確認するためによく使用されます。
たとえば、このコマンドを使用して、ユーザーがログインまたはフォームの送信後に正しいページにリダイレクトされたことを確認できます。
.shouldを使ったアサーション例
.should(’exist’)：要素が存在するかを確認するアサーション
.should('not.exist')：要素が存在しないかどうかを確認するアサーション。
.should('be.visible')：要素が表示されているかどうかを確認するアサーション。
.should('not.be.visible')：要素が表示されているかどうかを確認するアサーション。
.should('contain', 'text')：要素にテキストが含まれているかどうかを確認するアサーション。
.should('have.value', 'value')：フォーム要素に値があるかどうかを確認するアサーション。
.should('have.text', 'text')：要素が特定のテキストを持っているかどうかを確認するアサーション。
.should('have.length', length)：要素の数が特定の数であるかどうかを確認するアサーション。
.should('be.disabled')：要素が無効化されているかどうかを確認するアサーション。
.should('have.class', 'className')：要素が特定のクラスを持っているかどうかを確認するアサーション。
.should('have.attr', 'attribute', 'value')：要素が特定の属性を持っているかどうかを確認するアサーション。
.should('be.checked')：チェックボックスやラジオボタンがチェックされているかどうかを確認するアサーション。