【詳細】Cypress自動テストツールのインストールと利用方法(Django,CentOS)

この記事について

• Cypressのインストール方法について詳細が分かる
• （CentOS上のDjangoプロジェクトでCypressをインストールする方法が分かる）
• （CentOSがGUI対応してなかったので結局使わなかったけどメモしておく）

目次

• この記事について
• 目次
• Webアプリの自動テストや必要ツールについて
• Cypressの使い方
• Hyper-V上のCentOS上のDjangoプロジェクトの場合
• DjangoプロジェクトとCypress
  • CypressとPythonのvenv
  • Cypressのアンインストール
  • Cypressのインストール
  • CypressとCentOSとGUIとCLI
  • SeleniumやPlaywriteのGUIとCLI
  • Cypressのヘッドレスモードを行う(Cypress10以降)
• 最後に

Webアプリの自動テストや必要ツールについて

webアプリの自動テストについて教えてください

Webアプリの自動テストについて説明しますね。

自動テストとは何か？

自動テストは、ソフトウェアの品質を確保するために、手動でテストを行う代わりに、テストスクリプトやツールを使用して自動的に実行されるテストです。これにより、繰り返し発生するテストを迅速かつ効率的に行うことができます。

Webアプリの自動テストの重要性

1. 時間と労力の節約：手動テストに比べて時間が大幅に節約されます。
2. 一貫性と再現性：同じテストを毎回同じ条件で実行できます。
3. バグの早期発見：開発サイクルの早い段階で問題を発見し、修正することができます。

主要なテストタイプ

1. ユニットテスト：個々のコンポーネントや機能をテストします。
2. 統合テスト：複数のコンポーネントが連携して動作することを確認します。
3. エンドツーエンドテスト：ユーザーの視点からアプリケーション全体をテストします。

人気のあるテストツール

• Selenium：Webアプリケーションのための強力な自動化ツールです。
• Jest：JavaScriptで書かれたアプリのためのシンプルなテスティングフレームワークです。
• Cypress：エンドツーエンドテストに特化したモダンなツールです。

テスト自動化のプロセス

1. テストケースの定義：テストすべきシナリオを明確にします。
2. テストスクリプトの作成：テストケースを実行するスクリプトを作成します。
3. テストの実行：テストスクリプトを実行し、結果を確認します。
4. 結果の分析と改善：テスト結果を分析し、必要に応じてアプリケーションを改善します。

注意点

• 全てを自動テストでカバーする必要はありません：特に複雑なシナリオや非常に新しい機能については、初期は手動テストを行うこともあります。
• テスト環境の構築：実際のユーザー環境に近いテスト環境を用意することが重要です。
• 継続的なメンテナンス：アプリケーションが変更されるたびに、テストスクリプトも更新する必要があります。

初心者としては、まずは簡単なユニットテストから始めて、徐々に統合テストやエンドツーエンドテストに進むことをお勧めします。また、テストコードを書く際には、自分が何をテストしているのかを常に意識し、必要に応じて他の開発者と協力することも重要です。

Cypressの使い方

Cypress使ってみたいです。やり方教えてください。

Cypressを使ってWebアプリの自動テストを行う基本的な手順を紹介します。Cypressは、特にフロントエンドのエンドツーエンドテストに適しており、設定が簡単で使いやすいのが特徴です。

1. Cypressのインストール

まず、Cypressをプロジェクトにインストールする必要があります。Node.jsがインストールされていることを確認してください。次に、プロジェクトのルートディレクトリで以下のコマンドを実行します。

npm install cypress --save-dev

これで、Cypressがプロジェクトの開発依存関係として追加されます。

2. Cypressを開く

Cypressを初めて実行するには、次のコマンドを使用します。

npx cypress open

これにより、Cypressのテストランナーが開き、いくつかのサンプルテストファイルがプロジェクトに追加されます。

3. テストファイルの作成

Cypressでは、テストは.spec.js拡張子を持つファイルに記述します。プロジェクトのcypress/integrationディレクトリに新しいテストファイルを作成します。例えば、sample_test.spec.jsという名前でファイルを作成します。

4. テストの記述

Cypressのテストは非常に読みやすい形式で記述されます。以下は基本的なテストの例です。

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.com')

    cy.contains('type').click()

    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('[e-mail]')
      .should('have.value', '[e-mail]')
  })
})

このコードは、特定のWebページにアクセスし、特定の要素を探してクリックし、URLをチェックし、フォームにテキストを入力してその値を検証するという一連のアクションを実行します。

5. テストの実行

Cypressテストランナーが開いている場合、新しく作成したテストファイルをクリックすると、テストがブラウザで実行されます。

6. テスト結果の確認

テストが実行されると、成功したテストと失敗したテストが表示されます。失敗したテストについては、エラーメッセージを確認し、問題の原因を特定することができます。

追加のヒント

• 公式ドキュメントの活用：Cypressの公式ドキュメントは非常に充実しており、様々なテストシナリオやベストプラクティスが紹介されています。
• 小さなテストから始める：初めてのテストは、小さく単純なものから始めると理解が深まります。
• 継続的な学習：テストは継続的なプロセスです。新しいテストケースを追加し、アプリケーションが変更された場合にはテストを更新することが重要です。

Cypressを使ったテストの実践は、初心者エンジニアにとって非常に良い学習経験になります。ぜひ挑戦してみてください。

Hyper-V上のCentOS上のDjangoプロジェクトの場合

Hyper-V上のCentOS上にDjangoのプロジェクトとアプリが存在します。
その場合はどのようにおこなえばいいですか？

Hyper-V上のCentOSで動作するDjangoアプリケーションで、Visual Studio Codeを使用してデバッグモードにした状態からCypressを使ってエンドツーエンド(E2E)テストを行うには、以下の手順に従います。

1. Cypressのセットアップ

まず、Cypressをあなたの開発環境にインストールします。これは通常、アプリケーションのフロントエンド部分に関連するディレクトリで行います。

npm install cypress --save-dev

2. Cypressの初期設定

次に、Cypressを初めて実行します。これにより、必要な設定ファイルとサンプルテストが生成されます。

npx cypress open

3. テストファイルの作成

cypress/integration ディレクトリ内に新しいテストファイルを作成します。例えば、my_test.spec.jsといった名前で作成できます。このファイル内に、Djangoアプリケーションをテストするためのスクリプトを記述します。

4. テストスクリプトの記述

以下は、Djangoアプリケーションの基本的なE2Eテストの例です。

describe('My Django App Test', () => {
  it('Visits the Django App', () => {
    cy.visit('http://<Hyper-VのIPアドレス>:8000')

    // ここにテストのステップを記述します
    // 例: ログインフォームのテスト、ページのナビゲーションのテストなど
  })
})

5. テストの実行

Cypressテストランナーを再度開き、新しく作成したテストファイルを選択してテストを実行します。テストランナーはブラウザを開き、自動的にテストを実行します。

6. テスト結果の確認

テストの実行後、Cypressは成功したテストと失敗したテストのリストを表示します。失敗したテストの場合、エラーメッセージを確認して問題の原因を特定します。

注意点

• CypressとDjangoの連携: Cypressはフロントエンドのテストツールです。Djangoアプリケーションのフロントエンドと連携させるためには、Djangoが提供するAPIやページに適切にアクセスする必要があります。
• ネットワークの設定: Hyper-V上のCentOSで動作しているDjangoアプリケーションにアクセスするためには、適切なネットワーク設定が必要です。CypressはローカルマシンからDjangoアプリケーションにアクセスできる必要があります。
• セキュリティの考慮: テスト中にセキュリティ設定やファイアウォールの設定に注意してください。テストのために必要なポートが開いていることを確認します。

Cypressを使用してE2Eテストを行うことで、Djangoアプリケーションのフロントエンド機能が期待通りに動作するかを効率的に確認できます。テストスクリプトは、アプリケーションの実際の使用シナリオを反映するように設計すると良いでしょう。

DjangoプロジェクトとCypress

プロジェクトのディレクトリ構成は画像の通りです。aplディレクトリがDjangoのアプリケーションディレクトリだと思います。Cypressのセットアップはどのディレクトリで行えばいいか分かりますか？

画像に基づいて、apl ディレクトリがDjangoアプリケーションのルートディレクトリであると推定されます。通常、Cypressはフロントエンドファイルと密接に関連しているため、フロントエンドのファイルがどこに格納されているかに基づいてセットアップする場所を決定します。

Djangoプロジェクトでは、フロントエンドの静的ファイルは static ディレクトリに格納されることが多いですが、Cypressテストを設定する際は、通常フロントエンドのコードとは別に、プロジェクトのルートレベルで行います。これにより、テストスクリプトがバックエンドコードと分離され、管理が容易になります。

この場合、プロジェクトのルートディレクトリに cypress ディレクトリを作成して、そこにテストを格納するのが良いでしょう。以下の手順でCypressをセットアップできます：

1. プロジェクトのルートディレクトリに移動します。

2. そのディレクトリでCypressをインストールします。

   npm init -y  # package.jsonがまだない場合
   npm install cypress --save-dev
   

3. npx cypress open コマンドを使用して、Cypressを初めて開きます。これにより、cypress フォルダが作成され、その中に integration、fixtures、plugins、support などのサブフォルダが含まれます。

4. cypress/integration ディレクトリにテストファイル（例：my_test.spec.js）を作成してテストスクリプトを記述します。

プロジェクトのディレクトリ構成にもよりますが、この方法でCypressをセットアップすると、テストファイルとアプリケーションコードが明確に分離され、テストの管理がしやすくなります。

CypressとPythonのvenv

npm install cypress --save-devを行うと、venv上の仮想環境にcypressがインストールされるのですか？

npm install cypress --save-dev コマンドは、Node.jsのパッケージマネージャーであるnpmを使用してCypressをインストールします。このコマンドを実行すると、CypressはNode.jsのプロジェクトの node_modules ディレクトリ内にインストールされ、プロジェクトの package.json ファイルに開発依存関係として追加されます。

Pythonの仮想環境 venv とは異なり、Node.jsの node_modules ディレクトリはPythonの環境設定とは独立しています。つまり、Cypressは venv とは関係なく、Node.jsのプロジェクトの一部としてインストールされます。

もしCypressをDjangoプロジェクトの一部として統合したい場合は、Djangoプロジェクトのルートディレクトリで npm install cypress --save-dev を実行する必要があります。これは通常、Pythonの venv 環境の外部にある場所です。

以下の手順でCypressをセットアップします：

1. Djangoプロジェクトのルートディレクトリに移動します。
2. そのディレクトリで npm init -y を実行して package.json ファイルを作成します（もしまだ存在しない場合）。
3. npm install cypress --save-dev を実行してCypressをインストールします。

これでCypressがDjangoプロジェクトの node_modules ディレクトリ内にインストールされ、フロントエンドのテストに使用できるようになります。Pythonの venv とは別に管理されることに注意してください。

Cypressのアンインストール

利用しない場合や不要になった場合はnode_modulesディレクトリを削除すればいいですか？

はい、node_modules ディレクトリはプロジェクトにおけるすべてのNode.jsの依存関係（パッケージ）を含んでいます。Cypressを含むこれらの依存関係が不要になった場合、node_modules ディレクトリを削除することで、これらのパッケージをすべて削除できます。ただし、これによりそのプロジェクトで使用している他のnpmパッケージもすべて削除されることになります。

node_modules ディレクトリを削除するには、次のコマンドを使用します。

rm -rf node_modules

また、プロジェクトから特定のパッケージのみをアンインストールする場合は、次のようにnpmコマンドを使用できます。

npm uninstall cypress

これにより、Cypressだけがnode_modulesから削除され、package.jsonからもその記録が取り除かれます。

依存関係を削除した後、プロジェクトを再び動作させたい場合は、package.json にリストされているパッケージをインストールし直す必要があります。これは次のコマンドで実行できます。

npm install

node_modules ディレクトリを削除または変更する前に、プロジェクトの状態を確認し、必要なバックアップを取っておくことをお勧めします。また、他の開発者と協力している場合は、変更を共有する前に、チーム内でコミュニケーションを取ることが重要です。

Cypressのインストール

npm install cypress --save-devの--save-devってなんですか？

npm install コマンドにおける --save-dev オプションは、そのパッケージをプロジェクトの package.json ファイルに開発時依存関係（devDependencies）として追加することを指示します。これは、そのパッケージが開発中にのみ必要であり、プロダクション環境での実行には不要であることを意味します。

開発時依存関係（devDependencies）は、テストランナー、ビルドツール、コンパイラなどのツールを含みます。これらは開発プロセスを支援するために使用されますが、実際のアプリケーションの実行時には必要ないものです。例えば、Cypressはテストを自動化するツールなので、開発時には必要ですが、アプリケーションがデプロイされた後の実行環境では必要ありません。

--save-dev オプションを使ってインストールされたパッケージは、package.json ファイル内の devDependencies セクションにリストされます。これにより、他の開発者がプロジェクトをクローンした時に、npm install を実行することで、必要な開発時依存関係を簡単にインストールできます。

例えば、以下のように package.json ファイルに表示されます。

"devDependencies": {
  "cypress": "^7.0.0"
}

これは、Cypressが開発時にのみ使用されることを示し、他の開発者が npm install を実行するときに、開発時依存関係としてインストールされることを保証します。対照的に、プロダクションで直接使用されるパッケージは、dependencies セクションに追加されます。

npm install cypress --save-devを実行したところ、「bash: npm: コマンドが見つかりません。」と言われました。

bash: npm: コマンドが見つかりません というエラーメッセージは、npmがシステム上にインストールされていないか、もしくはコマンドが実行された環境のPATHに含まれていないことを意味します。npmはNode.jsの一部としてインストールされるので、npmを使用するには先にNode.jsをインストールする必要があります。

Node.js（とnpm）をインストールする方法は主に2つあります：

1. Node.jsの公式ウェブサイトからインストーラーを使用する：

   • Node.jsの公式ウェブサイトにアクセスし、推奨されるバージョンをダウンロードしてインストールします。npmはNode.jsと一緒に自動的にインストールされます。

2. パッケージマネージャーを使用する：

   • CentOSやその他のLinuxディストリビューションでは、コマンドラインからパッケージマネージャーを使用してNode.jsをインストールできます。例えば、CentOSでは以下のコマンドを使用できます：

     sudo yum install nodejs
     

   • これにより、Node.jsとnpmが両方インストールされます。

Node.jsをインストールした後は、新しいターミナルセッションを開き、npm コマンドが正しく動作するか確認してください。動作確認は、以下のコマンドで行えます：

node --version
npm --version

これらのコマンドがバージョン情報を出力すれば、Node.jsとnpmは正しくインストールされています。その後、npm install cypress --save-dev コマンドを再度実行してCypressのインストールを試みてください。

(.venv) [hogehoge]$ npm install cypress --save-dev

added 183 packages, and audited 184 packages in 1m

40 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice 
npm notice New major version of npm available! 8.19.4 -> 10.2.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.5
npm notice Run npm install -g npm@10.2.5 to update!
npm notice 

上記になりました。うまくできていますか？

はい、表示されたメッセージによるとCypressのインストールは成功しています。特に以下の部分がそれを示しています：

added 183 packages, and audited 184 packages in 1m

これは、183個のパッケージが追加され、184個のパッケージが監査されたことを意味しており、そのプロセスに1分かかったと報告しています。また、「found 0 vulnerabilities」という部分は、インストールされたパッケージに脆弱性が見つからなかったことを示しています。

また、npm自体の新しいメジャーバージョンが利用可能であることを知らせるメッセージも表示されています。これは単にnpmを最新バージョンに更新するためのオプションであり、Cypressを使用する上で必須ではありません。しかし、npmの新しいバージョンにはパフォーマンスの改善や新機能が含まれていることがあるため、更新を検討する価値はあります。

Cypressを使用してテストを開始する前に、npmを最新バージョンに更新する場合は、次のコマンドを実行してください：

npm install -g npm@10.2.5

ただし、これはグローバル環境にnpmをインストールすることになるので、システムに他のNode.jsプロジェクトがある場合は影響を与える可能性があることに注意してください。もし、現在のプロジェクトで使用しているnpmのバージョンに満足していて、他のプロジェクトに影響を与えたくない場合は、このステップをスキップしても構いません。

これで、Cypressを使ってエンドツーエンドのテストを書き始める準備が整いました。npx cypress open コマンドを実行してCypressのテストランナーを開き、新しいテストの作成や既存のテストの実行を行ってください。

(.venv) [hogehoge]$ npx cypress open
It looks like this is your first time using Cypress: 13.6.1


Your system is missing the dependency: Xvfb

Install Xvfb and run Cypress again.

Read our documentation on dependencies for more information:

https://on.cypress.io/required-dependencies

If you are using Docker, we provide containers with all required > dependencies installed.

----------

Error: spawn Xvfb ENOENT

----------

Platform: linux-x64 (CentOS - 9)
Cypress Version: 13.6.1

と言われました。教えてほしいです。

エラーメッセージによると、Cypressを実行するために必要なシステム依存関係の一つである Xvfb（X Virtual Framebuffer）がシステムにインストールされていないようです。Xvfb は、GUIなしでグラフィカルアプリケーションを実行するためにX Window Systemをエミュレートするものです。Cypressは、GUIテストを行うためにこれを利用します。

CentOSに Xvfb をインストールするには、以下のコマンドを使用します：

sudo yum install -y Xvfb

または最新のCentOSであれば、次のようにdnfを使う場合もあります：

sudo dnf install -y Xvfb

インストールが完了したら、Cypressを再度実行してみてください：

npx cypress open

もし Xvfb のインストールに関して問題が続く場合は、Cypressが提供しているドキュメントの指示に従い、必要な依存関係を確実に満たしているかを確認してください。また、CypressはGUIを必要とするため、GUIのないサーバー環境では、代わりに cypress run コマンドを使用してヘッドレスモードでテストを実行することができます。

ヘッドレスモードで実行するには、次のコマンドを使います：

npx cypress run

このコマンドはGUIを必要とせず、テスト結果をコマンドラインに出力します。ヘッドレスモードはCI/CDパイプラインでの使用に適しています。

(.venv) [hogehoge]$ npx cypress open
It looks like this is your first time using Cypress: 13.6.1

✔  Verified Cypress! /home/sola/.cache/Cypress/13.6.1/Cypress

Opening Cypress...

DevTools listening on ws://127.0.0.1:46221/devtools/browser/9f5bcfee-6a51-4c56-bd85-f4172c36b6b3
[105478:1221/164741.229392:ERROR:object_proxy.cc(590)] Failed to call method: org.freedesktop.portal.Settings.Read: object_path= /org/freedesktop/portal/desktop: unknown error type: 

こうなってしましました。教えてください。

提示されたエラーメッセージから、Cypressは正常に検証され、起動しようとしていますが、何らかの問題が発生しているようです。このエラーは、Linuxのデスクトップ環境の設定に関連する問題を示しており、Cypressがデスクトップ環境との通信に問題を抱えている可能性があります。

DevTools listening on ws://127.0.0.1:... はCypressがデバッグ用のWebSocketを開いたことを示しており、これ自体は正常な動作です。しかし、ERROR:object_proxy.cc(590)] Failed to call method: org.freedesktop.portal.Settings.Read という部分は、DBus（Linuxのメッセージバスシステム）を介して特定のデスクトップサービスにアクセスできないことを示しています。

この問題を解決するためには、以下のステップを試してみてください：

1. デスクトップセッションの確認：

   • あなたがGUIベースのデスクトップ環境を使用していることを確認してください。Cypressは、GUIセッション内でのみ適切に機能します。

2. パーミッションの確認：

   • ユーザーが必要なパーミッションを持っていることを確認してください。特定のファイルやディレクトリへのアクセス権限が不足している場合、この種のエラーが発生することがあります。

3. Cypressの再インストール：

   • 問題が続く場合は、Cypressのインストールを削除し、再度インストールしてみてください。

4. Cypressをヘッドレスで実行：

   • もしGUIが適切に機能しない場合は、Cypressをヘッドレスモードで実行してみてください。これはGUIが必要ないモードです。

   npx cypress run
   

5. ログの詳細な分析：

   • エラーメッセージやログの全文を詳細に分析して、問題の特定を試みてください。

6. Cypressのドキュメントやコミュニティの参照：

   • Cypressの公式ドキュメントを参照し、既知の問題やトラブルシューティングのヒントを探してください。
   • CypressのGitHubリポジトリやStack Overflowで同様のエラーメッセージに関する情報を検索し、コミュニティからの支援を得ることも有効です。

最後に、システムの設定やセキュリティポリシーが原因である可能性もあります。企業や組織のセキュリティポリシーが厳しい環境では、特定のアプリケーションがシステムリソースにアクセスすることを制限している場合があります。この場合、システム管理者に相談することをお勧めします。

(.venv) [hogehoge]$ npx cypress run

DevTools listening on ws://127.0.0.1:38933/devtools/browser/03b33c19-0871-4d42-a87c-f0fb9d601d12
[105932:1221/165147.732703:ERROR:object_proxy.cc(590)] Failed to call method: org.freedesktop.portal.Settings.Read: object_path= /org/freedesktop/portal/desktop: unknown error type: 
Could not find a Cypress configuration file in this folder: /home/<プロジェクトディレクトリ>

こうなりました。

Cypressをヘッドレスモードで実行しようとした際に、新たなエラーメッセージが出力されました。このメッセージには2つの主要なポイントがあります：

1. DevTools listening on ws://127.0.0.1:... はCypressがデバッグ用のWebSocketを開いたことを示しており、これ自体は正常な動作ですが、前述のERROR:object_proxy.cc(590)] Failed to call method: は無視しても問題ありません。これはLinuxのデスクトップ環境に関連するエラーで、Cypressの実行には影響しません。

2. Could not find a Cypress configuration file in this folder: /home/<プロジェクトディレクトリ> は、Cypressの設定ファイル（通常は cypress.json）が現在のディレクトリに存在しないことを示しています。これは、Cypressが実行される際に、特定の設定やテストファイルを探しているが、それらが見つからないために起こります。

これを解決するには、次の手順に従ってください：

1. Cypress設定ファイルの確認：

   • プロジェクトディレクトリ内に cypress.json ファイルがあるか確認してください。このファイルはCypressの設定を含みます。
   • もしファイルが存在しない場合、npx cypress open を実行したときに通常は自動的に生成されるはずですが、もしそれが生成されていない場合は手動で作成することができます。

2. テストファイルの確認：

   • cypress/integration ディレクトリにテストファイル（例：*.spec.js）が存在していることを確認してください。
   • テストファイルがない場合、テストを実行することはできません。

3. 正しいディレクトリでCypressを実行：

   • コマンドを実行しているディレクトリがプロジェクトのルートディレクトリであることを確認してください。これは、Cypressがその設定ファイルやテストを探す場所です。

4. Cypressの設定ファイルを手動で作成：

   • 必要な設定が分かっている場合、cypress.json を手動で作成し、プロジェクトのルートディレクトリに配置することができます。

// cypress.json
{
  "baseUrl": "http://localhost:8000",
  "integrationFolder": "cypress/integration",
  "video": false
}

これらのステップを実施した後、もう一度 npx cypress run コマンドを実行してCypressが正しく動作するか確認してください。もしエラーが解決しない場合は、Cypressのドキュメントを参照するか、より詳細なトラブルシューティングが必要になるかもしれません。

CypressとCentOSとGUIとCLI

CentOSはGUI対応でないミニマルなものを使っています。その場合CypressでのE2Eテストできないですか？

GUIがないミニマルなCentOS環境では、Cypressの通常のGUIモードでの実行はできませんが、ヘッドレスモードでは実行可能です。ヘッドレスモードでは、実際のブラウザウィンドウを開かずにテストを実行するため、GUIは必要ありません。

Cypressをヘッドレスで実行するには、以下のコマンドを使用します。

npx cypress run --headless

このコマンドは、GUIが不要なヘッドレスモードでCypressを実行し、テスト結果をコマンドラインに出力します。

ただし、ヘッドレスモードでもX Window Systemの仮想フレームバッファ（例えば、Xvfb）が必要な場合があります。これはGUIがない環境でGUIアプリケーションを実行するために使用されます。

Xvfbをインストールするには、以下のコマンドを実行します。

sudo yum install -y Xvfb

あるいは、最新のCentOSでは以下のようになります。

sudo dnf install -y Xvfb

インストール後、Xvfbをバックグラウンドで実行してから、Cypressをヘッドレスモードで実行することができます。

また、CypressにはDockerを使った実行方法も提供されており、すべての依存関係が含まれたCypressのDockerイメージを使用することができます。これはGUIがない環境、特にCI/CDパイプラインでの使用に適しています。

Dockerを使用してCypressを実行する方法については、Cypressの公式ドキュメントに詳しいガイドがありますので、そちらを参照してください。

ヘッドレスモードで行う場合、GUI上でどういう動きをしているか見れないということですよね？

はい、その通りです。ヘッドレスモードでは、テストはバックグラウンドで実行され、ブラウザのGUIは表示されません。これは主にCI/CDパイプラインやサーバー環境など、GUIが利用できない環境での自動テストに適しています。

ヘッドレスモードの主な特徴は以下の通りです：

1. GUIなしでの実行：テストはブラウザのGUIインターフェースを開かずに実行されます。そのため、テストがどのように実行されているかを視覚的に確認することはできません。

2. 高速な実行：GUIをロードしないため、ヘッドレスモードでのテスト実行は通常、GUIモードよりも速くなります。

3. コマンドライン出力：テストの進行状況や結果はコマンドラインに出力されます。エラーが発生した場合の詳細や、テストが成功したかどうかの情報もここで確認できます。

4. スクリーンショットやビデオ録画のオプション：Cypressは、テストの実行中に特定のアクションやエラーが発生した際のスクリーンショットを取ることができます。また、テストの全プロセスをビデオとして録画する機能もあります。これにより、テストがGUI上でどのように動作しているかを後から確認することが可能です。

ヘッドレスモードでのテストは、主にテストの自動化と迅速なフィードバックが必要な開発プロセスにおいて有用です。しかしながら、特定の動作やビジュアルに関する問題をトラブルシューティングする際には、GUIモードでのテスト実行が役立つ場合があります。

SeleniumやPlaywriteのGUIとCLI

SeleniumやPlaywrightやその他ツールでも同様ですか？

はい、SeleniumやPlaywrightなどの他の自動テストツールでも、ヘッドレスモードでの実行が可能です。このモードでは、テストはGUIインターフェースを開かずにバックグラウンドで実行されます。ヘッドレスモードは主に、GUIが利用できない環境（例えばCI/CDパイプラインやサーバー環境）での自動テストに適しています。

Selenium

• ヘッドレスモード：Seleniumでサポートされているブラウザ（例えば、ChromeやFirefox）はヘッドレスモードで実行することができます。これにより、ブラウザのウィンドウが表示されずにテストが実行されます。

Playwright

• ヘッドレスモード：Playwrightもヘッドレスモードをサポートしており、Chromium、Firefox、WebKitブラウザをバックグラウンドで実行できます。

ヘッドレスモードの共通特徴

1. GUIなしの実行：ブラウザのGUIを開かずにテストが実行され、視覚的なフィードバックは得られません。
2. 高速な実行：GUIのロードが不要なため、テスト実行はより高速になります。
3. コマンドライン出力：進行状況やテスト結果はコマンドラインに出力されます。
4. スクリーンショットやビデオ録画：多くのヘッドレスモード対応ツールは、スクリーンショットやテストのビデオ録画機能を提供しています。

ヘッドレスモードはテストの自動化と迅速なフィードバックを提供するために有用ですが、特定のビジュアル関連の問題をデバッグする場合には、GUIモードでのテスト実行が役立ちます。また、ヘッドレスモードはGUIがない環境、特にサーバーやCI/CDパイプラインでの使用に適しています。

Cypressのヘッドレスモードを行う(Cypress10以降)

CentOSがGUIに対応しておらず、npx cypress openを行おうとしてもエラーで動きません。仕方がないのでnpx cypress runでヘッドレスモードで動かそうと思っていますが、エラーになっています。
cypressディレクトリとcypress.jsonが足りないとのことですが、どのようにしたらいいか詳しく教えてください。

GUIに対応していないCentOS環境でCypressを使用する場合、ヘッドレスモードが適切ですが、いくつかの準備が必要です。npx cypress open コマンドはGUIを必要とするため、GUIがない環境では機能しません。代わりに npx cypress run を使用することでヘッドレスモードでのテスト実行が可能ですが、正しく設定を行う必要があります。

cypress ディレクトリと cypress.json の準備

1. cypress ディレクトリの作成：

   • Cypressは初回実行時に cypress ディレクトリといくつかのサブディレクトリ・サンプルファイルを作成します。GUIがない環境では、これらを手動で作成する必要があります。
   • cypress ディレクトリ内に integration, fixtures, plugins, support というサブディレクトリを作成します。

2. cypress.json の作成：

   • プロジェクトのルートディレクトリに cypress.json ファイルを作成します。このファイルはCypressの設定を含みます。

   • 例えば、最も基本的な cypress.json は以下のようになります：

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

3. テストファイルの作成：

   • cypress/integration ディレクトリ内にテストファイル（例：example_spec.js）を作成し、テストケースを記述します。

ヘッドレスモードでのテスト実行

• ディレクトリと設定ファイルが準備できたら、npx cypress run コマンドを使用してヘッドレスモードでテストを実行します。
• このコマンドはテストを実行し、結果をコマンドラインに出力します。

エラーのトラブルシューティング

• もし npx cypress run 実行時にエラーが発生する場合、エラーメッセージを詳細に確認してください。エラーの内容によっては、追加の依存関係のインストールや環境設定の変更が必要になることがあります。
• また、Cypressの公式ドキュメントや、CypressのGitHubリポジトリ、Stack Overflowなどで類似の問題や解決策を探してみると良いでしょう。

Cypressを初めて使用する場合、特にGUIがない環境では設定やトラブルシューティングに少し時間がかかることがありますが、一度設定が完了すれば非常に強力なテストツールとして活用できます。

(.venv) [hogehoge]$ npx cypress run

DevTools listening on ws://127.0.0.1:33723/devtools/browser/076cab4c-15bd-4168-92c2-e074fa2517f6
[111491:1222/171031.994124:ERROR:object_proxy.cc(590)] Failed to call method: org.freedesktop.portal.Settings.Read: object_path= /org/freedesktop/portal/desktop: org.freedesktop.portal.Error.NotFound: Requested setting not found
There is a cypress.json file at the path: /home/hogehoge

Cypress version 10.0.0 no longer supports cypress.json.

Please run cypress open to launch the migration tool to migrate to cypress.config.{js,ts,mjs,cjs}.

https://on.cypress.io/migration-guide

このようなエラーになっています。教えてください。

提示されたエラーメッセージに基づくと、Cypressのバージョン10.0.0から設定ファイルの形式が変更されています。以前は cypress.json ファイルを使用していましたが、新しいバージョンでは cypress.config.{js,ts,mjs,cjs} 形式の設定ファイルを使用する必要があります。

この変更に対応するためには、以下の手順を実行する必要があります：

1. cypress.config.js の作成

• cypress.json ファイルの代わりに、プロジェクトのルートディレクトリに cypress.config.js（または.ts、.mjs、.cjsのいずれか）という名前のファイルを作成します。

• このファイルには、以前 cypress.json に記述していた設定をJavaScriptの形式で記述します。

• 以下は cypress.config.js の基本的な例です：

  module.exports = {
    e2e: {
      baseUrl: 'http://localhost:8000',
      // その他の設定をここに追加
    },
  };
  

2. ヘッドレスモードでのテスト実行

• cypress.config.js ファイルを作成したら、再度 npx cypress run コマンドを実行して、ヘッドレスモードでのテストを試みます。

3. エラーのトラブルシューティング

• Failed to call method: org.freedesktop.portal.Settings.Read というエラーは、GUI関連の問題ですが、ヘッドレスモードで実行している場合、このエラーは無視しても問題ありません。
• もし他のエラーが出る場合は、エラーメッセージを注意深く読み、問題の原因を特定してください。

4. ドキュメントの確認

• もし迷った場合は、Cypressの公式ドキュメントを確認し、新しい設定ファイル形式に関する詳細を理解してください。

Cypressの設定ファイル形式が変更されたことにより、初期設定に少し手間がかかるかもしれませんが、設定を適切に行えば、ヘッドレスモードでのテスト実行が可能です。

(.venv) [hogehoge]$ npx cypress run

DevTools listening on ws://127.0.0.1:39677/devtools/browser/d6a6453d-823b-4c1b-87cf-f819d17322df
[111793:1222/171338.036231:ERROR:object_proxy.cc(590)] Failed to call method: org.freedesktop.portal.Settings.Read: object_path= /org/freedesktop/portal/desktop: org.freedesktop.portal.Error.NotFound: Requested setting not found
Your project does not contain a default supportFile. We expect a file matching cypress/support/e2e.{js,jsx,ts,tsx} to exist.

If a support file is not necessary for your project, set supportFile to false.

https://on.cypress.io/support-file-missing-or-invalid

こうなりました。教えてください。

提示されたエラーメッセージによれば、Cypressはプロジェクト内にデフォルトの supportFile を見つけることができないと報告しています。Cypress 10 以降、E2Eテスト用のサポートファイルは cypress/support/e2e.{js,jsx,ts,tsx} のパスに配置する必要があります。このファイルは、テストを実行する前に自動的に読み込まれ、テストに必要な設定やヘルパー関数を提供します。

解決策

1. サポートファイルの作成：

   • プロジェクトの cypress/support ディレクトリ内に e2e.js（または e2e.ts もしくはその他の拡張子）という名前のファイルを作成します。
   • このファイルは空でも構いませんが、必要に応じて共通の設定やヘルパー関数を含めることができます。

2. cypress.config.js の更新：

   • cypress.config.js ファイルを確認し、supportFile の設定が正しいか確認します。設定が不要な場合は、supportFile: false と設定できます。

     module.exports = {
       e2e: {
         baseUrl: 'http://localhost:8000',
         supportFile: 'cypress/support/e2e.js',
         // その他の設定...
       },
     };
     

3. 再度テストを実行：

   • これらの変更を行った後、再度 npx cypress run コマンドを実行して、ヘッドレスモードでのテストを試みます。

追加の注意点

• Cypressの設定やファイル構造に関する変更は、特に新しいバージョンのリリースに伴うものなので、Cypressの公式ドキュメントやマイグレーションガイドを参照することが重要です。これにより、最新の機能や変更点を適切に把握できます。

(.venv) [hogehoge]$ npx cypress run

DevTools listening on ws://127.0.0.1:38161/devtools/browser/ccee8840-235d-4019-ae7c-33171714223e
[112166:1222/171711.878884:ERROR:object_proxy.cc(590)] Failed to call method: org.freedesktop.portal.Settings.Read: object_path= /org/freedesktop/portal/desktop: org.freedesktop.portal.Error.NotFound: Requested setting not found
Cypress could not verify that this server is running:

http://localhost:8000

We are verifying this server because it has been configured as your baseUrl.

Cypress automatically waits until your server is accessible before running tests.

We will try connecting to it 3 more times...
We will try connecting to it 2 more times...
We will try connecting to it 1 more time...

Cypress failed to verify that your server is running.

Please start this server and then run Cypress again.

こうなりました。教えてください。

提示されたエラーメッセージによると、Cypressが設定された baseUrl（この場合は http://localhost:8000）で動作しているサーバーに接続できないと報告しています。これは通常、指定されたURLでサーバーが実行されていない、またはネットワークの問題があることを意味します。

解決策

1. サーバーの起動を確認：

   • http://localhost:8000 で動作しているサーバー（この場合はおそらくDjangoアプリケーション）が起動しているか確認してください。
   • サーバーが起動していない場合は、それを起動してください。

2. ポート番号の確認：

   • サーバーが起動しているポート番号がCypressの baseUrl で指定されたポート番号と一致しているか確認してください。

3. ネットワークの確認：

   • サーバーが実行されているマシンとCypressが実行されているマシンが同じネットワーク上にあるか確認してください。

4. ファイアウォールやネットワークのセキュリティ設定の確認：

   • サーバーへの接続がファイアウォールやセキュリティ設定によってブロックされていないか確認してください。

再試行

• 上記の確認と修正を行った後、再度 npx cypress run コマンドを実行して、テストが正常に実行されるか試してください。

その他の考慮事項

• サーバーがローカルで動作している場合、localhost または 127.0.0.1 を使用していますが、ネットワークの設定によっては、これらのアドレスが異なる場合があります。その場合は、適切なIPアドレスまたはホスト名を使用してください。
• サーバーがリモートマシン上で動作している場合、そのマシンのIPアドレスまたはホスト名を baseUrl として指定し、適切なポート番号を確認してください。

サーバーはリモートマシン上で動作します。現在VSCode上でリモート接続してローカルマシン上からリモートマシンを動かしています。
この場合、VSCodeのデバッグモードにしたままnpx cypress runをしたらいいですか？それともデバッグモードにせず、リモートマシンのIPアドレスとポートを使ったURLをbaseUrlとして指定しますか？

リモートマシン上で動作しているサーバーをテストする場合、Cypressの baseUrl にはそのリモートマシンのIPアドレスとポートを指定する必要があります。VSCodeのデバッグモードは、コードのデバッグには便利ですが、Cypressの実行には直接関係ありません。Cypressはサーバーが起動している場所にアクセスできる必要があるため、リモートマシンのアドレスとポートを正しく設定することが重要です。

手順

1. cypress.config.js の更新：

   • Cypressの設定ファイル（cypress.config.js）を編集し、baseUrl をリモートマシンのIPアドレスとポートに設定します。

   • 例：リモートマシンのIPが 192.168.1.100 で、Djangoアプリケーションがポート 8000 で動作している場合、次のように設定します：

     module.exports = {
       e2e: {
         baseUrl: 'http://192.168.1.100:8000',
         // その他の設定...
       },
     };
     

2. サーバーの起動：

   • リモートマシン上でDjangoサーバーが動作していることを確認します。
   • 必要に応じて、VSCodeでリモート接続を確立し、サーバーを起動します。

3. Cypressの実行：

   • すべての設定が完了したら、ローカルマシン上で npx cypress run を実行して、リモートマシン上のサーバーに対するテストを開始します。

追加の注意点

• リモートマシンのファイアウォールやセキュリティ設定が、指定したポートへのアクセスをブロックしていないことを確認してください。
• ネットワーク接続がリモートマシンに正しく確立されていることを確認してください。
• リモートマシンでDjangoサーバーを起動する際に、外部からのアクセスを許可する設定（python manage.py runserver 0.0.0.0:8000 のように）をしていることを確認してください。

これらの手順に従って設定を行えば、ローカルマシン上のCypressを使用してリモートマシン上で動作するサーバーのテストが可能です。

Djangoアプリがどのポートで動いているかを知る方法はありますか？

Djangoアプリケーションがどのポートで動作しているかを確認するには、以下の方法があります。

1. Djangoの起動コマンドを確認

通常、Djangoアプリケーションはコマンドラインから runserver コマンドを使って起動されます。このコマンドは通常、以下の形式を取ります：

python manage.py runserver <IPアドレス>:<ポート>

• デフォルトでは、Djangoは 8000 ポートで起動されます。特定のポートを指定しない場合、python manage.py runserver を実行すると、アプリケーションは http://127.0.0.1:8000 でアクセス可能です。
• 特定のポートを指定してアプリケーションを起動した場合、例えば python manage.py runserver 1234 とすると、アプリケーションは http://127.0.0.1:1234 でアクセス可能になります。

2. ログを確認

Djangoアプリケーションが起動するとき、コンソールにはそのアプリケーションの実行情報が表示されます。この情報には、アプリケーションがリッスンしているポート番号も含まれます。

3. 設定ファイルを確認

Djangoの設定ファイル（settings.py）には、アプリケーションの実行に関連する様々な設定が含まれていますが、通常ポート番号はこのファイルで設定されることはありません。ただし、特定のデプロイメント方法や設定変更によっては、ポート番号が設定ファイルに記載される場合もあります。

4. ネットワークユーティリティを使用

サーバーが既に実行中で、どのポートでリッスンしているかを知りたい場合、Linuxの netstat や lsof コマンドを使って、開いているポートを確認することができます。

例えば、以下のコマンドを使用して、特定のポートをリッスンしているプロセスを検索できます：

netstat -tuln

または

lsof -i :<ポート番号>

これらのコマンドは、Djangoアプリケーションがどのポートを使用しているかを特定するのに役立ちます。ただし、これらのコマンドを使用するには適切な権限（多くの場合はroot権限）が必要です。

最後に

ヘッドレスではなく、GUI上で動作を確認したい場合はCentOSの種類をGUI対応のものにする必要がある。
次回からそうしよう。