cyclope
v2.7.1
Cypress DOM スナップショットとクラウド内の一貫したイメージの差分
テスト失敗時にページを保存する
Cyclope: Cypress テストが失敗した場合にスタイルを含むページ全体を保存する
Cypress Test の LocalStorage を使用して初期データを設定する
アイテムのドラッグをテストする
cy.session コマンドの概要
ボーナス 39: テスト失敗時に HTML ページ全体を保存する
このプラグインをプロジェクトに追加します。 Cypress が開発依存関係であると仮定する
$ npm i -D cyclope# または、yarn$ を使用したい場合は -D cyclope を追加します
サポート ファイルまたは個別の仕様ファイルからプラグインを含めます
// cypress/support/index.js 内// https://github.com/bahmutov/cyclopeimport 'cyclope'
// cypress.config.jsconst {defineConfig} = require('cypress')module.exports =defineConfig({
e2e: {setupNodeEvents(on, config) { // https://github.com/bahmutov/cyclope require('cyclope/plugin')(on, config) // 変更された構成オブジェクトを返すことが重要 //環境変数は設定を返します}、
},})プラグイン ファイルからプラグインを含めます
// cypress/plugins/index.jsmodule.exports = (on, config) => {
// https://github.com/bahmutov/cyclope
require('cyclope/plugin')(on, config)
// 設定オブジェクトを返すことが重要です
// 変更された環境変数を使用して
構成を返す}現在の Web アプリケーション ページをリソースも含めて保存する必要がある場合
// cypress/integration/spec.jsit('ページを保存', () => {
// 通常の Cypress コマンド
cy.contains('.some-selector', 'some text').Should('be.visible')// アプリが望ましい状態に達したら// ページをフォルダー「page」に保存します。savePage('ページ'）}）画像や CSS などのローカル リソースはすべてローカル ファイルとして保存する必要があります。 zip アーカイブを作成できます
// .zip 拡張子を使用して、フォルダーを filecy.savePage('page.zip') に圧縮しますzip を保存すると、この関数はファイル名、幅、高さのプロパティを持つオブジェクトを生成します。
removeIframes (デフォルトでは false) は、保存する前にページからすべての<iframe>要素を削除します。
cy.savePage('name', {removeIframes: true }) ignoreFailedAssets (デフォルトでは false) は、アセットの一部をロードできない場合に失敗を無視します。
cy.savePage('name', {ignoreFailedAssets: true })このモジュールには、テストが失敗した場合にページを保存するユーティリティ関数が含まれています。この関数は、おそらくサポート ファイルからafterEachフックとして使用できるため、すべてのテストに適用されます。
// cypress/support/index.js 内// https://github.com/bahmutov/cyclopeimport { savePageIfTestFailed } from 'cyclope'afterEach(() => {
savePageIfTestFailed()
// プロジェクト内のアセットの一部が壊れた場合に備えて
savePageIfTestFailed({ignoreFailedAssets: true })})デフォルトでは、ページは非対話モードcypress runでのみ保存されます。 cypress openモードで実行している場合でもページを保存したい場合は、 saveInteractiveオプションを使用します。
savePageIfTestFailed({ saveInteractive: true })すべてのページはcypress/failed/<spec name>/<test name>フォルダーに保存されます。
ヒント: cypress/failedテスト アーティファクトとして CI に保存します。テストが失敗した場合は、 folder/index.htmlダウンロードして開き、失敗時のアプリケーションの構造を検査します。
別名clope
外部の Cyclope イメージ サービスを使用して一貫した PNG イメージを生成します。 Cypress を実行する場合は、 CYCLOPE_SERVICE_URLおよびCYCLOPE_SERVICE_KEY環境変数が必要です。ホバーをサポート
cy.get('#theme-switcher').realHover().cyclope('hover-over-sun.png')// 生成された「hover-over-sun.png」画像を保存します//equivalentcy.get(' #テーマスイッチャー').realHover()cy.clope() Cyclope サービスが構成されていない場合に DOM アップロードとイメージ生成を単にスキップしたい場合は、たとえばcypress.jsonファイルを使用して Cypress 環境オプションを設定します。
{ "env": {"cyclope": { "skipUploadWithoutUrl": true}
}
}環境変数DEBUG=cyclopeを指定してテストを実行することで、デバッグ モジュールを使用してターミナルで詳細なデバッグ メッセージを有効にできます。
$ DEBUG=cyclope npx cypress run
Cyclop用todoアプリ
sudoku-mock-モジュール
著者: グレブ・バフムトフ <[email protected]> © 2021
@バフムトフ
glebbahmutov.com
ブログ
ビデオ
プレゼンテーション
サイプレスのヒント
ライセンス: MIT - コードを使って何でもできますが、うまくいかなくても私を責めないでください。
サポート: このモジュールに問題が見つかった場合は、電子メールでツイートするか、Github で問題をオープンしてください。
著作権 (c) 2021 グレブ・バフムトフ <[email protected]>
本ソフトウェアおよび関連ドキュメント ファイル (以下「ソフトウェア」) のコピーを入手した人には、使用、コピー、変更、マージする権利を含むがこれらに限定されない、制限なくソフトウェアを取り扱う許可が、ここに無償で与えられます。 、以下の条件を条件として、本ソフトウェアのコピーを出版、配布、サブライセンス、および/または販売すること、および本ソフトウェアが提供される人物にそれを許可すること。
上記の著作権表示およびこの許可通知は、ソフトウェアのすべてのコピーまたは主要部分に含まれるものとします。
ソフトウェアは「現状のまま」提供され、明示的か黙示的かを問わず、商品性、特定目的への適合性、および非侵害の保証を含むがこれらに限定されない、いかなる種類の保証も行われません。いかなる場合においても、作者または著作権所有者は、契約行為、不法行為、またはその他の行為であるかどうかにかかわらず、ソフトウェアまたはソフトウェアの使用またはその他の取引に起因または関連して生じる、いかなる請求、損害、またはその他の責任に対しても責任を負わないものとします。ソフトウェア。
