Nightwatch を使用した Web テスト入門

はじめに

Nightwatch を使用した Web テストに関する連載

Nightwatch を使用して実際のブラウザで Web サイトや Web アプリをテストするブログシリーズへようこそ。テストについて段階的に学習していきます。

はじめに (ここが該当箇所です)
Web サイトの複雑なシナリオとテスト
Page Object Model (POM) に焦点を当てたテスト作成パターン
詳細な分析のためのDOM履歴付きHTMLレポートの生成
Nightwatch を使用したカスタムコマンドの作成

さらに、Nightwatch の 2 つの強力な機能について詳しく説明します。

グラフィカルインターフェイスを使用してテストを作成できるインスペクターツールと、
コードを記述せずにテストを作成できるChrome レコーダーです。これらのツールを効果的に使用するプロセスについて説明します。

包括的なテストを保証するために、以下についても説明します。

CI でのテスト実行 – GitHub Actions
BrowserStack を使用したクロスブラウザテスト
モバイルブラウザでのテスト実行

このシリーズを終える頃には、Nightwatch を使用した Web テストの確固たる基礎が確立され、Web プロジェクトの品質と信頼性を確保できるようになるでしょう。

この最初のブログ記事では、Nightwatch の開始に焦点を当てます。 Nightwatch のセットアップから最初のテストの作成とレポートの生成まで、Nightwatch を使用した Web テストの旅を始めるための段階的なガイドを提供します。この記事のビデオチュートリアルもご覧いただけます。

テスト領域の概要

ソフトウェアテストには、アプリケーションの品質と信頼性を確保するためのさまざまな種類のテストが含まれます。単体テストは個々のコードユニットを検証し、結合テストはコンポーネントの相互作用をチェックし、API テストは API の機能に焦点を当てます。ビジュアル回帰テストはビジュアルな変更を検出し、エンドツーエンドテストはアプリケーションフロー全体をカバーします。アクセシビリティテストは、包括的なユーザーエクスペリエンスを保証します。クロスブラウザテストは、さまざまなブラウザ間の互換性を保証し、モバイルテストは、モバイルデバイスでの最適なパフォーマンスを保証します。各種類のテストには特定の目的があり、高品質のソフトウェア製品を保証することに貢献します。

Nightwatch の概要 🦉

Nightwatch は、開発者向けの Web およびモバイルテストを簡素化する、妥協のないテスト自動化フレームワークです。 Nightwatch には、Web およびネイティブモバイルアプリケーション全体でテストを記述、実行、デバッグするための強力なツールセットが付属しています。一般的なテストツールおよびサービスとシームレスに統合されており、効率的なテスト実行と結果の分析を可能にします。

Nightwatch のセットアップ

始めましょう。まず、開発環境で Nightwatch をセットアップする必要があります。新規プロジェクトを開始する場合でも、既存のプロジェクトに Nightwatch を統合する場合でも、対応できます。

npm init nightwatch <project-name>

既存の Web アプリケーションがある場合は、ルートフォルダーに移動して、以下を実行します。

npm init nightwatch

Nightwatch は一連の質問をします。以下にお答えください。

? Select testing type to setup for your project 
    ❯◉ End-to-End testing
? Select language + test runner variant 
    ❯ JavaScript / default
? Select target browsers 
    ❯◉ Chrome
? Enter source folder where test files are stored 
    test
? Enter the base_url of the project 
    https://nightwatch.dokyumento.jp/
? Select where to run Nightwatch tests On 
    ❯ localhost
? Allow Nightwatch to collect completely anonymous usage metrics? 
    ❯ Yes
? Setup testing on Mobile devices as well? 
    ❯ No, skip for now

💡

注意: Nightwatch は、デフォルトで TypeScript、さまざまな種類のテスト、他のテストランナー、およびすべての主要ブラウザをサポートしています。このチュートリアルの範囲では、シンプルに保ち、Chrome でテストランナーを使用しない JavaScript を使用したエンドツーエンドテストに焦点を当てます。

Nightwatch のセットアップは非常に簡単です。質問に答えると、Nightwatch は必要なすべての依存関係をインストールし、テストを作成するための開発環境を準備します。新規プロジェクトでも既存のプロジェクトでも、まったく同じ手順です。インストールの詳細については、こちらガイドをご覧ください。

最初のテスト

いよいよ楽しい時間です。最初のテストを作成しましょう。 Nightwatch でテストスクリプトを作成する基本について説明します。

Nightwatch は、テストを作成するための一般的な BDD インターフェイスをサポートしています - describe および it 形式です。まず、最初のテストの仕様を定義しましょう。このテストでは、Nightwatch のホームページに移動し、タイトルが正しいかどうかを確認します →「Introducing Nightwatch v3」。

/test フォルダーの下に、次のコードを含むファイル home.spec.js を作成します。

describe('Nighwatch homepage', function() {
  it('Should have the correct title', function(browser) {
    browser.navigateTo('/').assert.textEquals('h1', 'Introducing Nightwatch v3')
  })
})

説明

browser.navigateTo('/') - インストール時に定義した起動 URL からパス '/' に移動するようにブラウザにリクエストします。これは、設定ファイル nightwatch.conf.js で編集できます。

.assert.textEquals('h1', 'Introducing Nightwatch v3') - セレクターが h1 の要素のテキストが textEquals 関数を使用して「Introducing Nightwatch v3」と等しいかどうかを確認します。

実行

テストスクリプトが保存されたら、Nightwatch で実行します。コマンドラインに移動して、次のコマンドを入力します。

npx nightwatch test

Chrome ブラウザが開き、Nightwatch ホームページに移動して閉じられるはずです。コマンドラインには次のものが表示されます。

おめでとうございます!! 👏👏 最初のテストを正常に実行しました。

レポートとデバッグ

テストを実行した後、Nightwatch は貴重な洞察を提供する詳細なレポートを生成します。 HTML レポートファイルのパスをコピーして、接頭辞 file:// を付けてブラウザに貼り付けると、次のレポートが表示されます。複雑なテストを作成して問題が発生したときに、このレポートでテストをデバッグできます。

次回の予定

複雑なテストユースケースと高度なテクニックの探求

Nightwatch を使用してテスト環境をセットアップし、エンドツーエンドテストを正常に作成する方法を学びました。次のブログ記事では、Web サイトテストの領域をより深く掘り下げます。マルチタブインタラクション、複雑なセレクター、iFrame、コピー/貼り付け、属性アサーション、async/await の使用、DOM 要素とのインタラクション、クライアント JS の実行などの複雑なテストシナリオを処理するための戦略です。近日公開予定の「Web サイトの複雑なテストシナリオ」に関するブログ記事にご期待ください。

コミュニティに参加してください 💬

ご不明な点がございましたら、お気軽に Discord サーバーにアクセスして、挨拶してください。コミュニティは常に、サポートの提供、洞察の共有、およびテスト関連のお問い合わせに関する支援を提供しています。皆様の積極的な参加を歓迎し、Discord コミュニティで皆様とつながることを楽しみにしています。

ハッピーテスティング！ 🎉

コミュニティに参加