新しい/既存の角度プロジェクトにサイプレスを加えます

このブログ記事では、サイプレスを角度で設定する手順を示します.サイプレスは、@briebug/cypress-schematic または手動で.アップロードされたソースコードを見てくださいGithub
自動初期化@ briebug/サイプレス回路図

まず、アングルプロジェクトで次のコマンドを使用してサイプレスをインストールします

npm i -D cypress

2 . cypressの初期化と設定@briebug/cypress-schematic プラグイン.これはcypressディレクトリを生成します.JSONとアップデートパッケージ.JSONファイル

ng add @briebug/cypress-schematic

This will ask to remove Protractor from project with prompt “Would you like to remove Protractor from the project?”, enter Y if want to do so.

サイプレス/統合ディレクトリの下に新しいテストを作成します

describe('Home Page Test', () =>{    
beforeEach(function () {      
cy.visit('/');    
});it('Show Error If failed to show Welcome message', () =>   
{       
    // Check if the word Welcome exists      
     cy.contains('Welcome');          

    // Visit Angular Website and Angular Blog      
    cy.contains('Learn Angular').click();      
    cy.contains('Angular Blog').click();    
});   
});

3 .次のコマンドを使用して、サイプレス/統合の下で作成されたテストを実行します

ng e2e

ホームページe 2 eテスト
マニュアル初期設定

まず、アングルプロジェクトで次のコマンドを使用してサイプレスをインストールします

npm i -D cypress

2 .最小限のサイプレスを作成します.JSONファイルの下に示すようにホームディレクトリの下に

{    
   "integrationFolder": "cypress/integration",     
   "baseUrl": "http://localhost:4200",  
   "env": {  
     "username": "username",  
     "password": "password"  
   }  
}

プロジェクトディレクトリ内のサイプレス、サイプレス/統合ディレクトリを作成します.とtsconfigを作成します.サイプレスディレクトリの下のJSONファイル

{  
  "extends": "../tsconfig.json",  
  "include": \["../node\_modules/cypress", "\*\*/\*.ts"\],  
  "compilerOptions": {  
    "sourceMap": false  
  }  
}

サイプレス/統合ディレクトリの下に新しいテストを作成します

describe('Home Page Test', () =>{    
beforeEach(function () {      
cy.visit('/');    
});it('Show Error If failed to show Welcome message', () =>   
{       
    // Check if the word Welcome exists      
     cy.contains('Welcome');          

    // Visit Angular Website and Angular Blog      
    cy.contains('Learn Angular').click();      
    cy.contains('Angular Blog').click();    
});   
});

次のコマンドを使用して、サイプレス/統合の下で作成されたテストを実行します

ng e2e

コードアップロードGithub 参考に