jsでのnightwatchの自動テストの詳細説明

この記事では、js での nightwatch の自動テストの方法をマスターできるように、js での nightwatch の自動テストについて紹介します。困っている友人は参考にしていただければ幸いです。

nightwatch.js は、vue-cli に深く統合された Web-UI 自動テスト フレームワークです。プロジェクトが vue-cli に基づいて構築されている場合、基本的にはそのまま使用できます。

しかし、vue-cli を常に使用できるわけではありません。カスタマイズされたニーズを満たせないことが多いからです。多くの場合、ビルド フレームワークをカスタマイズしたり、完全に再構築したりします。現時点では、夜間監視を統合することは困難です。この記事は、そのようなテスト フレームワークの構築を始めるのに役立ちます。

必要な環境

最初にプロジェクトに nightwatch をインストールし、プロジェクト ディレクトリに切り替えます。

npm intall nightwatch -D

これをインストールするだけでは不十分です。selenium-server もインストールする必要があります。 npm を使用してインストールすることもできます。

npm install selenium-server -D

selenium-server は Java に基づいて開発され、ブラウザへの接続に使用されます。したがって、selenium-server をインストールする前に Java をインストールする必要があります。 Java をインストールするにはどうすればよいですか?

さらに、ブラウザ ドライバもインストールする必要があります。通常、テストには Chrome を使用します。

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedrive -D

Chromedriver を直接インストールすると、インストールを促すメッセージが表示されます。失敗したため、ミラー アドレスを手動で指定する必要があります

ダウンロードする必要がある部分はダウンロードされました。

プロジェクト構成

nightwatch は、デフォルトでプロジェクトのルート ディレクトリにある nightwatch.conf.js を構成ファイルとして使用します。公式 Web サイトには、nightwatch.json という別の構成ファイル形式もあります。ここでは、形式がより柔軟であるため、js 構成メソッドを使用します。

以下は簡単な構成ファイルです。

module.exports = {
    'src_folders': [
        'e2e/case'
    ],
    'output_folder': 'reports',
    'custom_commands_path': '',
    'custom_assertions_path': '',
    'page_objects_path': '',
    'globals_path': require('./e2e/config/global.config').path,
    'selenium': {
        'start_process': true,
        'server_path': require('selenium-server').path,
        'log_path': '',
        'host': '127.0.0.1',
        'port': 4444,
        'cli_args': {
            'webdriver.chrome.driver': require('chromedriver').path
        }
    },
    'test_settings': {
        'default': {
            'launch_url': 'http://localhost',
            'selenium_port': 4444,
            'selenium_host': 'localhost',
            'silent': true,
            'screenshots': {
                'enabled': false,
                'path': ''
            },
            'desiredCapabilities': {
                'browserName': 'chrome',
                'marionette': true
            }
        },
        'chrome': {
            'desiredCapabilities': {
                'browserName': 'chrome'
            }
        },
        'edge': {
            'desiredCapabilities': {
                'browserName': 'MicrosoftEdge'
            }
        }
    }
}

src_folders: ケースが配置されているフォルダーを表します

output_folder: レポート出力のフォルダーを表します

server_path under selenium: selenium-server を表します インストール パス

selenium の start_process: selenium-server を自動的に起動するかどうかを表します。投資が false に設定されている場合、サーバーは自動的に起動されません。

"cli_args" : {
      "webdriver.chrome.driver" : "",
      "webdriver.gecko.driver" : "",
      "webdriver.edge.driver" : ""
    }

cli_args の下のドライバーは、いくつかのドライバーのインストール パスを表します。

test_settings は、ここで複数の環境を構成できます。必要に応じて、その他の環境は自分で用意できます。

nightwatch --env default

次に、プロジェクトで上記のコマンドを実行します。

Windows でエラーが見つかり、実行できませんでした。正常に実行できるように、package.json の下に

"scripts": {
    "e2e": "nightwatch --env default",
  },

を構成する必要があります。

実際の効果を確認する必要がある場合は、ケース フォルダーの下にいくつかのケースを作成するだけです。

例:

module.exports = {
    'Test login': function (browser) {
        browser
            .windowMaximize()
            .url('https://trans.qa.17u.cn/saas')
            .waitForElementVisible('.login', 3000)
            .assert.urlContains('/saas/login')
    }
    
}

要約: 上記は記事全体です。内容もコードもとてもシンプルなので、ぜひ試してみてください。皆様の学習にお役に立てれば幸いです。その他の関連チュートリアルについては、JavaScript ビデオ チュートリアル、jQuery ビデオ チュートリアル、bootstrap チュートリアルをご覧ください。

以上がjsでのnightwatchの自動テストの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。