ngrokでURLを発行しBrowserstackを使いTestCafeを実行する処理の自動化
記事の目的
BrowserstackとTestCafeの連携させて
複数の端末やOS、ブラウザ環境でE2Eテストを実行する
記事を書くまでの経緯
1)2020 Vue/Vuetify WEB開発 TestCafeを使ったE2Eテスト 基礎編
TestCafeを使ったE2Eテストを作成した。
TestCafeはBrowserstackと連携して
複数の端末やOS、ブラウザでE2Eテストを実行することができる。
2)ngrokでローカルサーバー起動と同時にBASIC認証付き外部URLを発行する方法【Nuxt / vue】
BrowserstackはローカルホストのURLは指定できないため
ngrokサービスを利用してhttpで外部公開する処理を検証
上記2つの記事で作成した環境を利用し
BrowserstackとTestCafeの連携を行う。
開発環境
- MacBook Pro (Retina, 13-inch, Early 2015)
- OS:macOS Mojava 10.14.6
- サーバサイドJavaScript:node v12.14.1
- パッケージマネージャー: yarn v1.22.4
- フレームワーク: nuxt v2.0.0
- JavaScriptライブラリ: Vue v2.6.11
- UIライブラリー: @nuxtjs/vuetify v1.11.2
参考
Browserstack公式ドキュメント
https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs/testcafe
Node.js 初めてのファイル書き込み
https://qiita.com/PianoScoreJP/items/8598e028a2cb8f23014b
シェルコマンドを実行する方法(child_process)
https://www.wakuwakubank.com/posts/728-nodejs-child-process/
手順
前提
「記事を書くまでの経緯」で紹介した記事で
testcafe実行環境と、ngrokの認証設定が済んでいる。
準備
ngrokで取得したURLを使って、テストコードを実行するスクリプトを作成します。
1)必要なmoduleのインストール
ngrok
https://www.npmjs.com/package/ngrok
前記事ではNuxtで起動したかったため「@nuxtjs/ngrok」をインストールしたが、
本記事ではオリジナルの起動スクリプトを作成したいため、
通常の「ngrok」をインストールする。
$ yarn add -D ngrok
dotenv
https://www.npmjs.com/package/dotenv
アクセストークンなどはそれぞれの環境下に「.env」ファイルで
環境変数として設定してある前提
これを読み込むためdotenvを使用する
$ yarn add -D dotenv
2)スクリプトを作成
「ngrok.js」を、プロジェクトのルートに作成する。
/ngrok.js
require('dotenv').config();
const ngrok = require('ngrok');
(async () => {
// Ngrokを起動
const url = await ngrok.connect({
// .envファイルに設定した ngrokのauthtoken
authtoken: process.env.NGROK_AUTHTOKEN,
// .envファイルに設定した basic認証の設定
auth: process.env.NGROK_AUTH,
// ローカルで起動する際のポート番号
addr: '3000',
region: 'jp',
});
// URLにBasic認証Passを設定
const domain = url.match(/^https?:\/{2,}(.*?)(?:\/|\?|#|$)/)[1];
urltmp = 'https://' + process.env.NGROK_AUTH + '@' + domain;
// 環境変数に書き込み
process.env.TEST_URL = urltmp;
console.log('ngrok url:', process.env.TEST_URL);
// Testcafeの実行
const {exec} = require('child_process');
exec('yarn testcafe chrome test/e2e/**.js', (err, stdout, stderr) => {
if (err) {
console.log(`stderr: ${stderr}`);
return;
}
console.log(`stdout: ${stdout}`);
});
})();
3)テストコードで環境変数を利用する
TestCafeのテストコードで、開始ページのURLを指定している箇所を
(2)で設定した「TEST_URL」を使う形に変更する
例
fixture`Getting Started`.page`${process.env.TEST_URL}/login/`;
4)実行・確認
package.jsonでローカル環境を起動する
$ yarn run dev
Nuxtが起動したらnodecommandでスクリプトを実行する
$ node ngrok.js
ngrokで取得した外部URLを使って、テストコードを実行することに成功!
browserstackの処理の作成
公式サイトでTestCafeとの連携について記載がある
これを参考に進める
https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs/testcafe
1) 環境変数に「BROWSERSTACK_USERNAME」と「BROWSERSTACK_ACCESS_KEY」を設定する
envに変数を追記
.env
BROWSERSTACK_USERNAME=[あなたのBROWSERSTACK_USERNAME]
BROWSERSTACK_ACCESS_KEY=[あなたのBROWSERSTACK_ACCESS_KEY]
2)process.envで読み込んでスクリプト内で環境変数に書き込む処理を追加する
dotenvプラグインを使って.envファイルの変数を読み込む
ngrok.jsに以下を追記
process.env.BROWSERSTACK_USERNAME = process.env.BROWSERSTACK_USERNAME;
process.env.BROWSERSTACK_ACCESS_KEY = process.env.BROWSERSTACK_ACCESS_KEY;
3) testcafe-browser-provider-browserstackをインストール
yarn add -D testcafe-browser-provider-browserstack
3)testcafeの実行ブラウザをbrowserstackに変更
ngrok.js全文
require('dotenv').config();
const ngrok = require('ngrok');
(async () => {
// Ngrokを起動
const url = await ngrok.connect({
// .envファイルに設定した ngrokのauthtoken
authtoken: process.env.NGROK_AUTHTOKEN,
// .envファイルに設定した basic認証の設定
auth: process.env.NGROK_AUTH,
// ローカルで起動する際のポート番号
addr: '3000',
region: 'jp',
});
// URLにBasic認証Passを設定
const domain = url.match(/^https?:\/{2,}(.*?)(?:\/|\?|#|$)/)[1];
const urltmp = 'https://' + process.env.NGROK_AUTH + '@' + domain;
// console.log(urltmp);
// 環境変数に必要な情報を書き込み
process.env.TEST_URL = urltmp;
process.env.BROWSERSTACK_USERNAME = process.env.BROWSERSTACK_USERNAME;
process.env.BROWSERSTACK_ACCESS_KEY = process.env.BROWSERSTACK_ACCESS_KEY;
console.log('ngrok url:', process.env.TEST_URL);
// const browser = 'chrome';
const browser = '"browserstack:[email protected]:Windows 10"';
// Testcafeの実行
const {exec} = require('child_process');
exec('yarn testcafe '+ browser +' test/e2e/**.js',
(err, stdout, stderr) => {
if (err) {
console.log(`stderr: ${stderr}`);
return;
}
console.log(`stdout: ${stdout}`);
});
})();
実行・確認
ローカル環境を起動してからngrok.jsを実行
$ yarn run dev
$ node ngrok.js
Products > Automata を開くと
現在実行中のタスクが表示されている
成功すると「PASSED」、失敗すると「FAILED」が返ってくる
コンソール画面はこのようになる
以上が、ngrokでURLを発行しBrowserstackを使い
TestCafeを実行する処理の自動化方法となる
Author And Source
この問題について(ngrokでURLを発行しBrowserstackを使いTestCafeを実行する処理の自動化), 我々は、より多くの情報をここで見つけました https://qiita.com/shiho_hoshino/items/8f9c1da79511cdd608b5著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .