JSONの構造、例、およびコードでJSONを作成するための詳細な実践経験について説明します。 しかし、最初に、私たちの記事に飛び込みましょう！
サイプレスJsonとは：例、スキーマ、詳細なハンズオン分析
前に 記事、変数とエイリアス、および最初のテストケースの作成方法について説明しました。 次に、サイプレスJSONとそれをコードに組み込む方法について説明します。
目次
- サイプレスJSONファイル
- デフォルトのJSONオプション
- グローバルオプション
- サイプレスJSONタイムアウト
- サイプレスはJSONファイルを読み取ります
- スクリーンショットとビデオのオプション
- ビューポートと実用性
- サイプレスJSONの例
- サイプレスフィクスチャJSONアレイ
- サイプレス環境JSON
- サイプレスJSONレポーター
- サイプレスパッケージ-lock.json
サイプレスJSONファイル
前に見たように、サイプレステストランナーを初めて開くと、 サイプレス.json ファイル。 このファイルは、必要な構成値を渡すために使用されます。 したがって、最初に、渡すことができるオプションを調べます。 cypress.json ファイル。
デフォルトのJSONオプション
サイプレスでは、特定のオプションがデフォルトで設定されています。 ただし、プロジェクトに応じてカスタマイズすることはできます。 サイプレスによって設定されたデフォルト値を識別するには、に移動します。 設定 サイプレステストランナーのフォルダー。 そこから、[構成]オプションを展開して、サイプレスによって設定されたデフォルトのオプションを表示します。
オプションは、サイプレスが提供するデフォルトの構成です。
{
animationDistanceThreshold:5
baseUrl:null
blockHosts:null
browsers:Chrome, Firefox, Electron
chromeWebSecurity:true
component:{}
componentFolder:"cypress/component"
defaultCommandTimeout:4000
downloadsFolder:"cypress/downloads"
e2e:{}
env:null
execTimeout:60000
experimentalFetchPolyfill:false
experimentalInteractiveRunEvents:false
experimentalSourceRewriting:false
experimentalStudio:false
fileServerFolder:""
firefoxGcInterval:runMode, openMode
fixturesFolder:"cypress/fixtures"
hosts:null
ignoreTestFiles:".hot-update.js" includeShadowDom:false integrationFolder:"cypress/integration" modifyObstructiveCode:true nodeVersion:"default" numTestsKeptInMemory:50 pageLoadTimeout:60000 pluginsFile:"cypress/plugins" port:null projectId:"hpcsem" redirectionLimit:20 reporter:"spec" reporterOptions:null requestTimeout:5000 responseTimeout:30000 retries:runMode, openMode screenshotOnRunFailure:true screenshotsFolder:"cypress/screenshots" scrollBehavior:"top" supportFile:"cypress/support" taskTimeout:60000 testFiles:"/.*"
trashAssetsBeforeRuns:true
userAgent:null
video:true
videoCompression:32
videosFolder:"cypress/videos"
videoUploadOnPasses:true
viewportHeight:660
viewportWidth:1000
waitForAnimations:true
watchForFileChanges:true
}オプション
プロジェクトと互換性のある引数を渡すことで、サイプレスのデフォルトオプションを変更できます。 名前が示すように、cypress.jsonはJSONファイルであるため、引数をJSON形式で渡す必要があります。 VSコードでは、cypress.jsonが空であり、引数が渡されていないことがわかります。 次に、JSONファイルで渡すことができるさまざまなオプションを見てみましょう。
グローバルオプション
グローバルにアクセスする必要のある引数にグローバルオプションを渡すことができます。 たとえば、次の表の[オプション]列は、JSONファイルで渡すキーワードを表しています。 デフォルトはサイプレスによって設定された特定のオプションのデフォルト値を示し、説明はオプションの意味を示します。
| オプション | デフォルト | 商品説明 |
|---|---|---|
baseUrl | null | 各ファイルを渡す代わりに、URLをグローバルに設定できます。 それはのために使用することができます cy.visit() or cy.request() コマンド |
clientCertificates | [] | このオプションを使用して、URLベースでクライアント証明書を構成できます |
env | {} | 任意の環境変数を値として渡すことができます。 このオプションは、ステージングや本番環境などのさまざまな環境でアプリケーションをテストする場合に役立ちます。 |
watchForFileChanges | true | このオプションは、サイプレスがファイルの変更が行われたときにテストを監視して再起動するかどうかを確認します。 |
port | null | サイプレスをホストする際にポート番号を渡すことができます。 ランダムなポートが生成されますが、必要なポート番号を追加できます。 |
numTestsKeptInMemory | 50 | このオプションは、メモリに保存されているテストスナップショットとコマンドデータの数です。 テスト実行中にブラウザのメモリ消費量が多い場合は、その数を減らすことができます。 |
retries | { "runMode": 0, "openMode": 0 } | このオプションは、失敗したテストを再試行する回数を指定するためのものです。 個別に構成できます ヒノキラン 及び ヒノキオープン. |
redirectionLimit | 20 | エラーが発生する前にアプリケーションをリダイレクトできる回数の制限を構成できます。 |
includeShadowDom | false | ShadowDOM内をナビゲートして要素と対話する機能。 デフォルトでは、falseに設定されています。 アプリケーションにシャドウルートナビゲーションを必要とする要素がある場合は、次のように設定できます。 true. |
サイプレスJSONタイムアウト
タイムアウトは、自動化フレームワークで最も重要な概念のXNUMXつです。 サイプレスは、スクリプトのタイムアウトの処理に役立つさまざまなオプションを提供します。 まず、構成できるオプションを調べます。
| オプション | デフォルト | 商品説明 |
|---|---|---|
defaultCommandTimeout | 4000 | このオプションは、DOM要素ベースのコマンドがロードされるのを待つためのものです。 これはミリ秒単位です。 |
requestTimeout | 5000 | cy.wait（）コマンドの要求がタイムアウトになるまで待機する時間（ミリ秒単位）。 |
responseTimeout | 30000 | このタイムアウトは、次のような一連のコマンドの応答まで待機するためのものです。 cy.request(), cy.wait(), cy.fixture(), cy.getCookie(), cy.getCookies(), cy.setCookie(), cy.clearCookie(), cy.clearCookies(), cy.screenshot() コマンド |
taskTimeout | 60000 | の実行の完了のタイムアウト（ミリ秒単位） cy.task() command |
execTimeout | 60000 | このミリ秒単位の時間は、実行が完了するまで待機することです。 cy.exec() コマンド、これはシステムコマンドの完了です |
pageLoadTimeout | 60000 | このタイムアウトは待機します page navigation events または相互作用するコマンドのようなページで cy.visit(), cy.go(), cy.reload() |
サイプレスはJSONファイルを読み取ります
プロジェクト内のフォルダーまたはファイルを操作する必要がある場合があります。 対話するには、特定のオプションを設定する必要があります cypress.json ファイルを操作するファイル。 それで、最初に、私たちのフォルダ/ファイル構成で利用可能なオプションを調べてみましょう。
| オプション | デフォルト | 商品説明 |
|---|---|---|
downloadsFolder | cypress/downloads | これは、テスト実行中にファイルがダウンロードおよび保存されるパスです。 |
fixturesFolder | cypress/fixtures | これは、フィクスチャファイルを含むフォルダへのパスです。 合格できます false ファイルの保存を無効にします。 |
ignoreTestFiles*.hot-update.jsYou can pass this as a string or array of global patterns to ignore test files for the test run. However, it would be displayed in the test files. | ||
integrationFolder | cypress/integration | 統合テストファイルは、フォルダーへのこのパスに保存されます。 |
pluginsFile | cypress/plugins/index.js | このパスは、プラグインが保存される場所です。 この構成を無効にするには、引数をfalseとして渡すことができます。 |
screenshotsFoldercypress/screenshotsScreenshots from the execution of cy.screenshot() command and test failure during cypress run are stored in this foldersupportFilecypress/support/index.jsHere the test files that load before the test are stored. You have the option to disable by passing | ||
testFiles | **/*.* | ロードする必要のあるテストファイルへのパス。 これは、グローバルパターンの文字列または配列のいずれかです。 |
videosFolder | cypress/videos | テスト実行中にビデオを保存するフォルダーパス |
スクリーンショットとビデオオプション
スナップショットとビデオはcypress.json（）ファイルで構成でき、Cypressは構成をカスタマイズするためのいくつかのオプションを提供します。
| オプション | デフォルト | 商品説明 |
|---|---|---|
screenshotOnRunFailure | true | サイプレスの実行時にテストの失敗時にサイプレスがスクリーンショットを撮るかどうかをtrueまたはfalseに設定するオプション。 に設定されています true 初期設定で |
trashAssetsBeforeRuns | true | このオプションは、 videosFolder, downloadsFolder 及び screenshotsFolder 毎回の前に cypress run |
videoCompression | 32 | このオプションは、Constant Rate Factor（CRF）で測定されたビデオ圧縮の品質です。 通過することによって false、このオプションを無効にすることもできます。 0から51までの値を渡すことができます。値が小さいほど、品質が向上します。 |
videosFolder | cypress/videos | テストのビデオが保存されるフォルダー。 |
video | true | テスト実行のビデオをキャプチャするブール値 cypress run. |
videoUploadOnPasses | true | このオプションは、スペックファイル内のすべてのテストケースに合格したときに、ビデオをダッシュボードにアップロードするためのものです。 |
ビューポートと実用性
サイプレスが提供するオプションを使用して、ビューポートの高さと幅を変更するように値を構成して渡すことができます。 アクションアビリティオプションも設定できます。
| オプション | デフォルト | 商品説明 |
|---|---|---|
viewportHeight | 660 | これは、アプリケーションのデフォルトの高さをピクセル単位で提供するためです。 このコマンドは次のようにオーバーライドできます cy.viewport() |
viewportWidth | 1000 | アプリケーションのビューポート幅（ピクセル単位）のオプション。 でオーバーライドできます cy.viewport() コマンド。 |
animationDistanceThreshold | 5 | アニメーション化の時間を考慮して、要素が超えなければならないピクセル単位で測定された距離のしきい値。 |
waitForAnimations | true | コマンドを実行する前に、要素がアニメーションを完了するのを待つオプション。 |
scrollBehavior | top | これは、コマンドを実行する直前に要素までスクロールする必要があるビューポートオプションです。 利用可能なオプションは次のとおりです 'center', 'top', 'bottom', 'nearest'または falseここで、 false スクロールを無効にします。 |
サイプレスJSONの例
以前、私たちが渡すことができるさまざまな構成を見ました cypress.json ファイル。 次に、プロジェクトでそれらを使用する方法の例を調べます。
cypress.jsonファイルのデフォルト値をオーバーライドする
VSコードで、 cypress.json ファイル。 オーバーライドします defaultCommandTimeout に命令する 8000.
{
"defaultCommandTimeout" : 8000
}これが、VSコードプロジェクトでの外観です。
を変更することにより、 cypress.json ファイル、それはフレームワーク全体に適用されます。 サイプレスの設定に移動して確認できます。 デフォルト値の 4000 〜へ 8000
テストスクリプトを介してデフォルト値をオーバーライドする
テストスクリプトを介してデフォルト値を操作することもできます。 渡す代わりに cypress.json ファイル、テストファイルで渡します。
//Changing the timeout from 4 seconds to 8 seconds
Cypress.config('defaultCommandTimeout',8000)
// Test code
cy.get('#username').type(users.email)
cy.get('#pswd').type(users.password)
cy.get('#login_btn').click()このようにして、テストファイルのデフォルト値を上書きできます。 ただし、これはフレームワークレベルでの構成変更には影響しません。 サイプレスは、の値を優先します cypress.json。 最後に、グローバル構成を取り上げます。
サイプレスフィクスチャJSONアレイ
サイプレス cy.fixture() 固定されたデータセットをファイルにロードする関数です。 フィクスチャをJSONとして使用して、JSONファイル内の任意の値または配列をロードできます。 まず、プロジェクトでJSONファイルにアクセスする方法を理解しましょう。
私のJSONファイルには、ユーザー名とパスワードのXNUMXつのプロパティがあります。 私のJSONファイル名は examples.json.
{
"email": "test@gmail.com",
"password" : test123
}スペックファイルでは、cy.fixture（）コマンドと次の概念を使用してフィクスチャにアクセスします。 エイリアス.
cy.fixture('example.json').as('example')
//Using the alias name to this keyword, So we can use globally
const userObj = this.userData
//looping our .json data with a new variable users
cy.get(userData).each((users) =>
{
//Write the test code.
cy.get('#username').type(users.email)
cy.get('#pswd').type(users.password)
} サイプレス環境JSON
環境変数は、組織内の多くのプロジェクトで使用されます。 環境変数を使用します
- 値が異なるマシン間で動的である場合
- ステージング、テスト、開発、本番/ライブなどのさまざまな環境でテストする場合
これらの場合、環境変数を定義する必要があります。 ただし、XNUMXつのスペックファイルに環境変数を設定した場合、他のスペックファイルには反映されません。 これは、サイプレスが各スペックファイルを個別に実行するためです。 このように、環境変数を個別に構成する必要があります。
サイプレスのJSONファイルから環境ファイルにアクセスします。 cypress.json ファイル。 したがって、オプションを割り当てる必要があります cypress.json ファイルを作成し、スペックファイル全体で使用しました。 それでは、私たちの例に飛び込みましょう。
構成ファイルで環境変数を設定するか、 cypress.env.json ファイル。
cypress.jsonファイルで環境変数を設定する
キーと値のペアでenvプロパティを設定します。 キーワードの下で渡された値 env 環境変数に該当し、サイプレスはから引数を取ります env キーワード。 構文は次のようになります。
{
"env": {
"key1": "value1",
"key2": "value2"
}
}アクセスしたい場合 env スペックファイルの変数については、以下のように割り当てます。
Cypress.env() //returns both the key1,value1 and key2, value2
Cypress.env(key1) //returns only the value1追加します env プロジェクトの構成であり、スペックファイルでそれらにアクセスします。 私たちの中で cypress.json ファイルに、次の構成を追加します。 私たちは URL プロパティとそれらを私たちのURLに割り当てます。 ここに、 URL キーであり、 https://lambdageeks.com/technology/ は値です。
{
"env" : {
"url" : "https://lambdageeks.com/technology/"
}
}構成を宣言したので、スペックファイルでそれらにアクセスします。 以下のようになります。 上記のように、私たちは使用します Cypress.env() 環境変数にアクセスするメソッド。
// type definitions for Cypress object "cy"
// <reference types="cypress" />
describe('Cypress Example ', function () {
it('accessing the environment variable', function () {
//Calling URL from cypress.json
cy.visit(Cypress.env('url'));
})
})cypress.env.jsonファイルで環境変数を設定する
サイプレスのenvJSONファイルで環境変数を割り当てることができます。 そのために、という新しいファイルを作成する必要があります cypress.env.json プロジェクトのルートで。 必要ありません env キーワード; 代わりに、キーと値のペアを渡すことで、それらに直接アクセスできます。
{
"key1": "value1",
"key2": "value2"
}でそれらを割り当てる方法を調べてみましょう cypress.env.json ファイル。
{
"url" : "https://lambdageeks.com/",
"urlTechnology" : "https://lambdageeks.com/technology/"
}
上記のように、新しいファイルを作成しました。 cypress.env.json、および追加しました URL プロパティ。 環境変数にアクセスする方法は、前のセクションで前述したものと同じです。
サイプレスJSONレポーター
ご存知のように、サイプレスはモカの上に構築されています。 モカ用に作成されたレポーターならどれでも使用できます。 JSONファイルでレポーターをグローバルに構成できます cypress.json ファイル。
reporter | spec | ここでは、ヒノキの実行中に生成するレポーターを指定できます。 に設定されています spec デフォルトのレポーターとして。 |
reporterOptions | null | これは、レポーターでサポートされているオプションを指定するためのものです。 |
上記のオプションは、デフォルトでレポーターに設定されている構成です。 加えて spec レポーターはデフォルトで設定されています。 したがって、レポーターでは、モカと互換性のある任意のレポーターを設定できます。 reporterOptions 構成しているレポーターに応じて、サポートされているオプションを指定することです。
でレポーターを構成する方法を見てみましょう cypress.json ファイル。
マルチレポーターを私たちのレポーターとしてmochawesomeと考えてみましょう。 最初にレポーターをインストールし、それらを cypress.json ファイル。
npm install --save-dev mocha cypress-multi-reporters mochawesome上記のコマンドをコマンドラインで渡して、レポーターをインストールします。 今、私たちの cypress.json ファイルに、次のプロパティを追加します。
"reporter": "cypress-multi-reporters",
"reporterOptions": {
"reportDir": "cypress/reports/multireports",
"overwrite": false,
"html": false,
"json": true
}それぞれの特性を詳しく理解していきます。
レポーター：プロジェクトで構成しているレポーターの名前
レポートディレクトリ：結果を出力するディレクトリ。
上書きする：このフラグは、以前のレポートを上書きするように要求します。
HTML：テストの完了に関するレポートを生成します。
JSON：テストの完了時にJSONファイルを生成するかどうか。
サイプレスパッケージ-lock.json
世界 パッケージロック.json npmがノードモジュールまたはpackage.jsonファイルを変更すると、すべての操作に対してファイルが自動的に作成されます。 オプションを追加するときまたは サイプレスに新しい依存関係をインストールします パッケージJSONファイルを作成すると、Cypresspackage-lock.jsonが自動的に更新されます。
Cypes package.lock JSON ファイルはすべてのパッケージとそのバージョンをトレースするため、npmのインストールがグローバルに行われるたびにインストールが維持および更新されます。 そのため、サイプレスパッケージのJSONファイルでは、バージョンを更新したり、依存関係を追加したりすると、package-lock.jsonも更新されるため、変更を加えたくありません。
