以下の内容はhttps://am1tanaka.hatenablog.com/entry/2017/10/28/230551より取得しました。

WebpackでSass+Codeception+Seleniumの環境を作る

JavaScript Selenium Web Webpack mac Sass Codeception

簡単なJavaScriptのプログラムを作る時の雛形プロジェクトを作ったのですが、Sassの組み込みで苦戦したので、備忘録として設定ファイルなどについて残しておきます。

  • 2017/11/3 index.htmlのテンプレートをsrcフォルダーに入れて、html-webpack-pluginでdistにビルドする手順を追加

目次

前提

プロジェクト用のフォルダーを作成して、cdで移動しておきます。例えば、test-webpackフォルダーに構築する場合は、ターミナルで以下を実行します。

mkdir test-webpack && cd test-webpack

Browsersync

Browsersync - Time-saving synchronised browser testing を参考に、インストール作業をします。

Browsersyncをインストール

ソースコードを変更したりした時に、ブラウザーを自動的に更新したいのでBrowsersyncをグローバルにインストールします。まずはターミナルを起動して、以下を実行してインストール済みか確認します。

browser-sync -v

エラーが表示されたら、以下を実行してグローバルにインストールします。要求されたら管理者パスワードを入力してください。

sudo npm i -g browser-sync

Browsersyncの設定ファイル

Browsersyncが動く様になったら、プロジェクトフォルダー内で以下を実行して設定ファイルを作成します。

browser-sync init

これでプロジェクトフォルダー内にbs-config.jsという設定ファイルが作成されます。Atomなどのテキストエディターで開いて、"files"の項目と、"server"の項目を以下のように設定してください。

    "files": ["./src/**/*"],
    "server": {
        "baseDir": "./dist"
    },

"files"は変更を監視するファイルやフォルダーのリストで、以上でプロジェクトフォルダー内のsrcフォルダー内のいずれかのファイルが変更されたらブラウザーをリロードします。

"server"は表示するブラウザーの基準フォルダーで、プロジェクトフォルダー内のdistフォルダーをドキュメントのベースディレクトリーに指定しています。

WebpackとSassのインストール

WebpackでSassが通るようにまとめてインストールします。情報源は以下のあたりです。

必要なパッケージをインストール

以下で、必要なパッケージをまとめてインストールします。

npm init -y
npm i --save-dev webpack node-sass css-loader sass-loader style-loader extract-text-webpack-plugin html-webpack-plugin
npm i --save lodash
  • 1行目：npmの設定ファイルであるpackage.jsonの生成
  • 2行目：WebpackとSass関連の各種パッケージを開発環境でインストール
  • 3行目：Webpackのサンプルで使われていたし、ランタイムであれこれ便利なのでlodashをついでに入れておく

プロジェクトフォルダー内を構築

簡単なJavaScriptプロジェクトの雛形を構築します。プロジェクトフォルダーを以下のようにしてください。

node_modulesフォルダーとbs-config.js、package.jsonは作成済みなので、それ以外を作ります。ひとまず、ファイルは空で良いです。

f:id:am1tanaka:20171028212735p:plain

src/index.htmlを開いて、以下の内容にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SimpleJavaScriptProject</title>
</head>
<body>
</body>
</html>

CSSやJavaScriptのエントリーポイントへのリンクは、ビルド時に自動的に差し込まれるので不要です。

src/sass/styles.scssを開いて、以下の内容にします。

$font-stack:    Helvetica, sans-serif;
$primary-color: red;

.hello {
    font: 100% $font-stack;
    color: $primary-color;
}

src/js/app.jsを開いて、以下の内容にします。

import _ from 'lodash';
import '../sass/styles.scss';

function component() {
    var element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

    return element;
}

document.body.appendChild(component());

JavaScriptのファイルで、importで必要なファイルを読み込むことが大切です。2行目でSassのscssファイルを読み込む指示をしておくことで、Webpackのビルド作業でそのファイルがビルド対象になります。

設定ファイルを設定

package.jsonを開いて、"scripts"の設定に以下のように"start"の行を追加してください。"test"の行の最後に,を追加するのを忘れないようにしてください。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch --config webpack.config.js & browser-sync start --config bs-config.js"
  },

プロジェクトフォルダー内にwebpack.config.jsを新しく作成して、以下のような内容にします。

Webpackの実行

ターミナルでnpm startで、ビルドの実行、監視の開始、Webブラウザーの起動が実行できます。以下のようにHello webpackと赤い文字で出力されれば成功です。

f:id:am1tanaka:20171028215404p:plain

試しに、src/app.jsの以下の行を変更してみてください。

    element.innerHTML = _.join(['Hello', 'webpack change'], ' ');

変更して上書き保存をすると、自動的にWebブラウザーが更新されて画面が変わります。変更が確認できない場合、もう一度src/app.js上で[Ctrl]+[S]で上書き保存すると更新が確認できると思います。

f:id:am1tanaka:20171028215829p:plain

確認ができたら、次の作業のために[Ctrl]+[C]キーでWebpackの監視を停止してください。

Seleniumのインストール

CodeceptionでWebブラウザー上で動作確認をするAcceptanceテストを動かすために、最新のSelenium Standalone Serverをダウンロードしてプロジェクトフォルダーに入れておきます。

http://www.seleniumhq.org/download/ を開いて、最新版をダウンロードします。

f:id:am1tanaka:20171028221109p:plain

以下のような警告が表示されたら、構わないので[保存]してください。

f:id:am1tanaka:20171028221319p:plain

ダウンロードが完了したら、Finderなどを使って、selenium-server-standalone-3.6.0.jarをプロジェクトフォルダーに移動させてください。3.6.0の部分は、実際にダウンロードしたバージョンに読み替えてください。

SeleniumとCodeceptionの起動コマンドを作成

Selenium Standalone Serverの起動と、まだインストールはしていませんがCodeceptionによるテストを起動するコードをpackage.jsonの"scripts"欄に追加します。以下のように修正してください。

  "scripts": {
    "test": "composer exec codecept run -v",
    "start": "webpack --watch --config webpack.config.js & browser-sync start --config bs-config.js & java -jar ./selenium-server-standalone-3.6.0.jar"
  },

Codeception

最後に、テストのためにCodeceptionをインストールします。

以下を実行して、インストールとテスト用の環境を展開します。

composer require codeception/codeception --dev
composer exec codecept bootstrap

testsフォルダーが作成されて、その中にテスト用のファイルが作成されました。Acceptanceテスト用の設定をします。

Acceptanceテスト用の設定

tests/acceptance.suite.ymlを開いて、以下のように編集します。

actor: AcceptanceTester
modules:
    enabled:
        - WebDriver:
            url: http://localhost:3000/
            browser: chrome
        - \Helper\Acceptance

以上、Google Chromeでのテスト設定です。2017/10/27現在、Firefox56.0 ではうまく動かないようでした。

テストファイルの作成

ターミナルで以下を実行して、動作確認用のテストファイルを作成します。

composer exec codecept generate:cest acceptance CheckInst

tests/acceptance/CheckInstCest.phpを開いて、以下のようにします。

<?php

class CheckInstCest
{
    // tests
    public function tryToTest(AcceptanceTester $I)
    {
        $I->amOnPage('/');
        $I->see('Webpack and Test');
    }
}

ベースディレクトリーをWebページで表示して、画面にWebpack and Testと表示されるかを試すテストです。

開発とテストの実行

開発を始める時には、プロジェクトフォルダーで以下を実行します。

npm start

Webpackのビルドとファイル変更の監視、Browsersyncによるライブリロード、そしてSelenium Standalone Serverが起動します。

ターミナルは待機状態になって操作できなくなるので、もう一つターミナルを起動して、プロジェクトフォルダーを開きます。テストは以下で実行できます。

npm test

最初は以下のように失敗します。これは、期待している文字列Webpack and Testが画面に表示されていないからです。

f:id:am1tanaka:20171028224053p:plain

src/app.jsを開いて、表示内容を以下のように修正します。

    element.innerHTML = _.join(['Webpack', 'and', 'Test'], ' ');

上書き保存をしたら、npm testを再実行してください。表示内容が期待のものになったので、以下のようにテストが成功します。

f:id:am1tanaka:20171028224440p:plain

まとめ

以上で環境構築完了です。最初に表示されるWebページはdist/index.html、JavaScriptのコードはsrc/app.js、Sassのコードはsrc/sass/styles.scssに書きます。また、Webブラウザー上でのテストはtests/acceptance/CheckInstCest.phpに書き加えたり、新しくCestファイルやCeptファイルを作成して書きます。

Seleniumについて補足

このブログを書いた時点では、Firefox56.0をSeleniumで呼び出せていません。調査不足かも知れませんが、Releases · mozilla/geckodriver · GitHub で新しいgeckodriverが出てきたら動くようになるかも知れません。その際は、最新のgeckodriverをダウンロードしてプロジェクトフォルダーに保存して、package.jsonの"scripts"に以下の設定を追加します。

    "selenium-ff": "java -Dwebdriver.gecko.driver=./geckodriver -jar ./selenium-server-standalone-3.6.0.jar"

npm run selenium-ffでgeckodriverを指定したSelenium Standalone Serverが起動するので、これで動くようになるかも知れません。

参考URL



以上の内容はhttps://am1tanaka.hatenablog.com/entry/2017/10/28/230551より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます
不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14