必要に迫られてWPのBDD環境(振る舞い駆動環境)を構築しました
なんか会社でやってって言われたので…。
人間が目視で確認できることは全部できるという噂の振る舞い駆動のテスト環境です。
現場の目視テストをへらすために導入したいなと言われたので環境構築だけしました。
検証環境
●Windows8.1
●VCCW 3.16.1
●PHP 7.1.11
●Composer version 1.6.3 2018-01-31 16:28:17
●node v8.9.4
●npm 5.6.0
参考サイト
●WordPressに対してBDDなテストを行うためのボイラープレートをつくった
●WordPressの要件テストを自動化&スクリーンショットで保存出来るBDDテストがすごい!
●WordPressのBDDテストをWindows7で実行する方法
●VCCW
実作業
VCCWは公式サイトにしたがって構築します。といってもそんなにやることはないはずです。
VirtualBoxをインストールして、
Vagrantをインストールして、
コマンドプロンプトをクリックして、下記コマンドを入力して実行するとボックスファイルが追加されます
vagrant box add vccw-team/xenial64
下記コマンドを入力して実行するとvagrant-hostsupdaterプラグインがインストールされます
vagrant plugin install vagrant-hostsupdater
VCCWを公式サイトの[download.zip]ボタンからVVCCWをダウンロードして解凍
コマンドプロンプトで解凍したディレクトリに移動
vagrantを起動するために同じくコマンドプロンプトに下記を入力してEnter
vagrant up
これで特にIPなど書き換えていないのなら下記アドレスでアクセスできるはずです
http://vccw.test/http://192.168.33.10/
起動まで少し時間がかかりました。
rootのパスワードなんかはVCCW公式サイトのEnvironmentsの項目に書いてあるので確認しましょう
ボイラーテンプレートのインストール
MACだとそのまま動くらしいんですが、Windows環境で行ったので上記のページを参考にしました。とても助かりました。
上記ページに従って最後まで作業してみて下さい。
(省略します)
作業が終わったので下記コマンドを実行
composer install npm install npm test
npm testしてみたけどなぜかこういうエラーが出ました
———————-
> wordpress-behat@1.0.0 test C:\Users\■ユーザー名■\■ディレクトリパスなど■\vccw\boilerplate-behat-wordpress
> set NODE_ENV=production&&node bin/run-tests.js
In Inline.php line 296:
The reserved indicator “%” cannot start a plain scalar; you need to quote the
scalar at line 5 (near “- %paths.base%/features”).
npm ERR! Test failed. See above for more details.
———————-
boilerplate-behat-wordpress/vendor/bin/behat.bat
%paths.base%/featuresでパースエラーが起きていて、テストシナリオまでのパスにしないとだめみたいなので
この箇所を paths: - %paths.base%/features 以下のように書き換え paths: - features
これでnpm testしたら一応動いたけど、スクリーンショットが出力されてない…
————————-
> wordpress-behat@1.0.0 test C:\Users\■ユーザー名■\■ディレクトリパスなど■\vccw\boilerplate-behat-wordpress
vccw\boilerplate-behat-wordpress
> set NODE_ENV=production&&node bin/run-tests.js
Feature: Example Features
Scenario: Login as the “administrator” role # features\sample.feature:3
When I login as the “administrator” role # VCCW\Behat\Mink\WordPressExtension\Context\WordPressContext::login_as_the_role()
No html element found for the selector (‘#loginform’) (Exception)
And I am on “/wp-admin/” # Behat\MinkExtension\Context\MinkContext::visit()
Then I should see “Dashboard” # Behat\MinkExtension\Context\MinkContext::assertPageContainsText()
Scenario: Take a screenshot # features\sample.feature:9
Given the screen size is 1440×900 # VCCW\Behat\Mink\WordPressExtension\Context\WordPressContext::set_window_size()
And I login as the “administrator” role # VCCW\Behat\Mink\WordPressExtension\Context\WordPressContext::login_as_the_role()
No html element found for the selector (‘#loginform’) (Exception)
When I am on “/” # Behat\MinkExtension\Context\MinkContext::visit()
Then take a screenshot and save it to “_out/1440×900.png” # VCCW\Behat\Mink\WordPressExtension\Context\WordPressContext::take_a_screenshot()
When I am on “/wp-admin/” # Behat\MinkExtension\Context\MinkContext::visit()
Then take a screenshot and save it to “_out/1440×900-wp-admin.png” # VCCW\Behat\Mink\WordPressExtension\Context\WordPressContext::take_a_screenshot()
Given the screen size is 320×400 # VCCW\Behat\Mink\WordPressExtension\Context\WordPressContext::set_window_size()
When I am on “/” # Behat\MinkExtension\Context\MinkContext::visit()
Then take a screenshot and save it to “_out/320×400.png” # VCCW\Behat\Mink\WordPressExtension\Context\WordPressContext::take_a_screenshot()
When I am on “/wp-admin/” # Behat\MinkExtension\Context\MinkContext::visit()
Then take a screenshot and save it to “_out/320×400-wp-admin.png” # VCCW\Behat\Mink\WordPressExtension\Context\WordPressContext::take_a_screenshot()
— Failed scenarios:
features\sample.feature:3
features\sample.feature:9
2 scenarios (2 failed)
14 steps (1 passed, 2 failed, 11 skipped)
2m30.76s (12.10Mb)
npm ERR! Test failed. See above for more details.
—————————–
formが見つからないみたいなのでbehat.ymlを確認したらbase_urlの書き換えを忘れていました。
(ちゃんと書き換えた人は変更しなくて大丈夫です)
base_url: http://vccw.dev を、以下に変更 base_url: http://vccw.test
もう一度 npm test します
———————–
> wordpress-behat@1.0.0 test C:\Users\■ユーザー名■\■ディレクトリパスなど■\vccw\boilerplate-behat-wordpress
> set NODE_ENV=production&&node bin/run-tests.js
Feature: Example Features
Scenario: Login as the “administrator” role # features\sample.feature:3
When I login as the “administrator” role # VCCW\Behat\Mink\WordPressExtenson\Context\WordPressContext::login_as_the_role()
And I am on “/wp-admin/” # Behat\MinkExtension\Context\MinContext::visit()
Then I should see “Dashboard” # Behat\MinkExtension\Context\MinContext::assertPageContainsText()
Scenario: Take a screenshot # featurs\sample.feature:9
Given the screen size is 1440×900 # VCCW\Bhat\Mink\WordPressExtension\Context\WordPressContext::set_window_size()
And I login as the “administrator” role # VCCW\Bhat\Mink\WordPressExtension\Context\WordPressContext::login_as_the_role()
When I am on “/” # Behat\inkExtension\Context\MinkContext::visit()
Then take a screenshot and save it to “_out/1440×900.png” # VCCW\Bhat\Mink\WordPressExtension\Context\WordPressContext::take_a_screenshot()
When I am on “/wp-admin/” # Behat\inkExtension\Context\MinkContext::visit()
Then take a screenshot and save it to “_out/1440×900-wp-admin.png” # VCCW\Bhat\Mink\WordPressExtension\Context\WordPressContext::take_a_screenshot()
Given the screen size is 320×400 # VCCW\Bhat\Mink\WordPressExtension\Context\WordPressContext::set_window_size()
When I am on “/” # Behat\inkExtension\Context\MinkContext::visit()
Then take a screenshot and save it to “_out/320×400.png” # VCCW\Bhat\Mink\WordPressExtension\Context\WordPressContext::take_a_screenshot()
When I am on “/wp-admin/” # Behat\inkExtension\Context\MinkContext::visit()
Then take a screenshot and save it to “_out/320×400-wp-admin.png” # VCCW\Bhat\Mink\WordPressExtension\Context\WordPressContext::take_a_screenshot()
2 scenarios (2 passed)
14 steps (14 passed)
0m35.66s (12.24Mb)
———————–
これで無事スクリーンショットも撮れました。
すごいぞボイラーテンプレート。