次世代E 2 E試験・インテグレーションの基礎js

👋 こんにちは、Fellas!記事を投稿してから久しぶりです.

開発者として、我々は常にユーザーに最高の製品を提供したい.そして、テストはこのプロセスの重要な部分です.よく使われるテスト技術の1つはE 2 Eテストです.

💡 E 2 E試験—基本
エンドツーエンドのテスト(またはE 2 Eテスト短い)は、アプリケーションフローが予想通りに動作することを保証するために、ソフトウェア全体の製品を最初から最後までテストするテクニックです.
E 2 Eテストの主な意図は、実際のユーザーシナリオをシミュレートし、エンドユーザーの経験からテストすることです.

📃 E 2 E試験の利益

リスク低減

増加した信頼

コスト削減

⚡ E 2 E試験方法

水平E 2 E試験
水平方向のテストは、エンドユーザーの視点から行われます.これは、ユーザーがソフトウェアを移動し、適切にその機能を使用できるかどうかを評価します.また、ユーザーがいくつかのソフトウェア機能を使用するのを防ぐかもしれないバグを検出するのに役立ちます.

垂直E 2 E試験
このメソッドは、テストが連続した、階層的な順序で起こることを意味する、層でのテストを指します.システムの各々のサブコンポーネントは、品質を確実にするために始めから終わりまでテストされます.
システムがUIを持っていないか、UIが高いレベルの技術を持っていて、重要なコンポーネントをテストするのに使用されるとき、それはほとんど行われます.

❓ E 2 Eテストを行う方法

すべての要件を分析する.アプリは何をすべきかについての明確なアイデアがあります.

要件に従ってテスト環境を設定します.

これらの応答をテストするために必要なすべてのテストメソッドを一覧表示します.

テストケースのデザイン.

テストを実行し、結果を書き込んでください.

⚡ E 2 E試験枠組み
E 2 Eテストフレームワークは、アプリケーション内のすべての可動部分が正しく構成されるように使用されます.
ここではいくつかの最も人気のあるものです

セレン

サイプレス

キュウリ

証言

E 2 Eテストの基本的な考え方に精通しているので、次はサイプレスを使ってE 2 Eテストを統合する方法を見てみましょう.js

👨‍💻 サイプレスと次のインテグレーション.E 2 E試験のためのJS

Now that you're familiar with the Basics of E2E Testing, let's take a look at how to get started with Cypress in Next.js

次.js
場合は、次に精通していない場合.JS、それは反応のフレームワークの両方の開発者とクライアントを助けるためにいくつかの余分な機能が満載です.

サイプレス
サイプレスは、ウェブのE 2 Eテストのためのテストランナーです.

プロジェクトの設定
使えますcreate next-app とcypress すぐに始めることの例.

npx create-next-app@latest --example with-cypress with-cypress-app 

既存のプロジェクトでは、cypress パッケージ.

npm install --save-dev cypress

それから、サイプレスをscripts セクションpackage.json ファイル.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "cypress": "cypress open",
}

次に、サイプレスを実行して推奨フォルダ構造を使用する例を生成します.

npm run cypress

最初のサイプレス統合テストの作成
あなたが2ページを持っていると言いましょう

// pages/index.js

import Link from 'next/link'

export default function Home() {
  return (
    <nav>
      <Link href="/about">
        <a>About</a>
      </Link>
    </nav>
  )
}

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  )
}

次に、ナビゲーションが正しく動作していることをテストします.

// cypress/integration/app.spec.js

describe('Navigation', () => {
  it('should navigate to the about page', () => {
    // Start from the index page
    cy.visit('http://localhost:3000/')

    // Find a link with an href attribute containing "about" and click it
    cy.get('a[href*="about"]').click()

    // The new url should include "/about"
    cy.url().should('include', '/about')

    // The new page should contain an h1 with "About page"
    cy.get('h1').contains('About Page')
  })
})

ヒント:する代わりにcy.visit('http://localhost:3000/') , 君だけができるcy.visit('/') あなたがセットするならばbaseUrl to http://localhost:3000 にcypress.json 設定ファイル.

// cypress.json 
{
  "baseUrl": "http://localhost:3000"
}

この時点で、簡単なテスト設定を行います.サイプレスは次の本当のテストです.JSアプリケーションは、次が必要です.サーバーを開始する前に実行するJSサーバー.
ファーストランnpm run build and npm run start , その後、実行npm run cypress もう一つのターミナルウィンドウでサイプレスを開始します.
今、サイプレスが起動され、結果を表示することができます.

連続積分(CI)のための更なるステップ
この時点で、あなたは今までのサイプレスを実行していることは、CIの環境に最適ではないインタラクティブなブラウザを開いていることに気づいているでしょう.
を使用してヘッドキーを実行することができますcypress run コマンド.
にpackage.json ファイル

// package.json

"scripts": {
  // ...
  "cypress": "cypress open",
  "cypress:headless": "cypress run"
}

それはこの記事のためです!ここでいくつかの反応をドロップして、お客様のサポートを見ることができます!
著者について

Github

Portfolio

Blog