【Vagrant】WordPressのBDDテスト用環境構築

2018.04.02
この記事は最新更新日から、4年以上経過しています。

必要に迫られて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/
vccw.test



http://192.168.33.10/
192.168.33.10

起動まで少し時間がかかりました。
rootのパスワードなんかはVCCW公式サイトのEnvironmentsの項目に書いてあるので確認しましょう

ボイラーテンプレートのインストール

https://webtatan.com/blog/wordpress/vccw-bdd-windows
webtatan.com

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)
———————–

これで無事スクリーンショットも撮れました。
すごいぞボイラーテンプレート。