I.はじめに
過去数年間、WebサイドUI自動化テストを行っていたとき、最初に考えたのはSeleniumツールに基づいていましたが、Webサイドテクノロジーのアップグレードに伴い、多くのフロントエンドテストフレームワークが登場しました。これらのほとんどはフレームワークはSeleniumに依存しないため、サイプレスのテストフレームワークはこの技術的アップグレードの傾向にあります。
2、サイプレスの簡単な紹介
(1)Cypressは、最新のネットワーク用に特別に作成された次世代のフロントエンドテストツールであり、最新のアプリケーションをテストするときに開発者や品質エンジニアが直面する主な問題点を解決します。
(2)Cypressは、ブラウザーで実行されているすべてのコンテンツをテストできるJavaScriptベースのフロントエンドテストツールです。
(3)CypressツールとSeleniumツールを比較すると、基本的およびアーキテクチャ的に異なります。CypressはSeleniumによって制限されておらず、Cypressの基盤となるプロトコルはWebDriverを使用していません。
(4)サイプレスは他のUI自動化テストツールとは異なり、すべてのタイプのテスト(ユニットテスト、統合テスト)を記述できるエンドツーエンドのテストの完全なセットを提供し、テストのセットアップ、テストの記述、テストを実行し、テストをデバッグします。
公式アドレス:https://www.cypress.io
詳細なドキュメント:https://docs.cypress.io/guides/overview/why-cypress.html
備考:チャオカイ氏が書いた「サイプレスの入学から習熟まで」も参照できます。
3.環境要件
オペレーティングシステム:Windows7バージョン以降のオペレーティングシステム。
Nodejsバージョン:Node.js8以降が必要です。
Nodejsの詳細なインストール手順については、https://blog.csdn.net/weixin_43184774/article/details/106719889を参照してください。
4、npmのインストール
npmはNode.jsの新しいバージョンに統合されており、Node.jsコードのデプロイにおける多くの問題を解決できます。一般的な使用シナリオは次のとおりです。
(1)ユーザーが他のユーザーによって作成されたサードパーティのパッケージをnpmサーバーからローカルで使用できるようにダウンロードできるようにします。
(2)ユーザーがローカルで使用するためにnpmサーバーから他のユーザーが作成したコマンドラインプログラムをダウンロードしてインストールできるようにします。
(3)ユーザーが自分のパッケージまたはコマンドをnpmサーバーにアップロードして、他のユーザーが使用できるようにします。
◎新しいバージョンのNode.jsにはnpmが統合されているため、cmdウィンドウで次のコマンドを入力することでnpmが正常にインストールされたことを確認できます。
npm -v
◎npmのバージョンが低すぎる場合は、次の手順でnpmのバージョンをアップグレードできます。
npm install npm -g
5、サイプレスのインストール
最初にローカルコンピューターにサイプレスフォルダーディレクトリ(例:D:\ software \ Cypress)を作成し、次にcmdウィンドウで作成したサイプレスディレクトリにcdして、次のコマンドを実行してサイプレスをインストールします。
npm install cypress --save-dev
6、サイプレスが始まります
(1)cmdウィンドウで、Cypressインストールディレクトリの\ node_modules \ .binディレクトリにcdし、次のコマンドを実行します。
cypress open
(2)npxで起動することもできるので、node_modules.binディレクトリに入るのにcdする必要はありません。実行コマンドは次のとおりです。
npx cypress open
セブン、サイプレスのインストール警告の問題を解決する
前回のインストール中に、不足しているファイルnpmが表示されますWARN saveError ENOENT:そのようなファイルまたはディレクトリはありません。この警告プロンプトで「D:\ software \ Cypress \ package.json」を開きます。
解決:
(1)ルートディレクトリD:\ software \ Cypressに新しいpackage.jsonファイルを作成します。
(2)package.jsonファイルに次の内容を入力します
{
"scripts": {
"cypress:open": "cypress open"
}
}
(3)サイプレスディレクトリで直接以下のコマンドを実行し、サイプレスを正常に起動します。
npm run cypress:open