Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Behatを使ってWordPressの構成をテストする

 Behatを使ってWordPressの構成をテストする

PHPカンファレンス 2016のスライドです。

Takayuki Miyauchi

November 03, 2016
Tweet

More Decks by Takayuki Miyauchi

Other Decks in Technology

Transcript

  1. #FIBUΛ࢖ͬͯ

    8PSE1SFTTͷߏ੒ͷςετΛ

    ࣗಈԽ͢Δ

    QIQDPO
    5BLBZVLJ.JZBVDIJ
    UXJUUFS!NJZB

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. #FIBUʹ͍ͭͯ

    View Slide

  7. IUUQCFIBUPSH

    View Slide

  8. w #FIBUͱͷग़ձ͍͸81$-*΁ͷߩݙ͕͖͔͚ͬ
    w 81$-*Ͱ͸ɺ๲େͳόϦΤʔγϣϯͷίϚϯυ
    ͷ૊Έ߹ΘͤΛ#FIBUͰ࣮ࡍʹ࣮ߦ͠ɺͦͷग़ྗ
    ΛνΣοΫ͢Δ͜ͱͰςετ͍ͯ͠·͢ɻ

    View Slide

  9. Scenario: wp say

    When I run `wp say hello`
    Then STDOUT should be:
    ```
    Success: hello
    ```
    81$-*ίϚϯυͷςετίʔυͷྫ

    View Slide

  10. 8PSE1SFTTΛ
    #FIBUͰςετ͢Δ

    View Slide

  11. ͜ͷςετͷΰʔϧ
    w $44΍+BWB4DSJQUͳͲ΋ؚΊͨ8PSE1SFTTαΠ
    τશମʹର͢Δཁٻ࢓༷ʹج͍ͮͨςετΛߦ͏ɻ

    View Slide

  12. ඞཁͳ΋ͷ
    $PNQPTFS ໨త
    CFIBUCFIBU #%%ςετ༻ϑϨʔϜϫʔΫ
    CFIBUNJOLFYUFOTJPO ϒϥ΢βͱ#FIBUΛڮ౉͠
    CFIBUNJOLTFMFOJVNESJWFS .JOLͱϒϥ΢βΛ઀ଓ͢ΔυϥΠό

    View Slide

  13. 8PSE1SFTT༻ͷΤΫεςϯγϣϯΛ։ൃத
    IUUQTHJUIVCDPNWDDXUFBNXPSEQSFTTFYUFOTJPO

    View Slide

  14. σϞͷιʔε
    https://github.com/miya0001/phpcon2016-demo

    View Slide

  15. CFIBUZNM͸ઃఆϑΝΠϧ

    View Slide

  16. features/
    !"" 01-login.feature
    !"" 02-responsive.feature
    !"" 03-session.feature
    !"" 04-mouseover.feature
    !"" 05-screenshot.feature
    !"" 06-form.feature
    GFBUVSFͱ͍͏ϑΝΠϧ͸ςετɻ

    View Slide

  17. ςετͷجຊతͳจ๏
    Feature: Button Tests
    Scenario: I should see "Hello"
    Given I am on "/"
    When I press "#button"
    Then I should see "Hello"
    Scenario: ...
    ...

    View Slide

  18. Scenario: Showing the Homepage
    When I am on "/"
    Then I should see "Welcome"
    ΋͠ 8IFO
    ͳΒ
    5IFO
    Ͱ͋Δ΂͖

    View Slide

  19. Scenario: Click a button
    Given I am on "/"
    When I push ".button"
    Then I should see "Welcome"
    (JWFO͸લఏͱͳΔ৚݅

    View Slide

  20. bin/behat -di --lang=en
    ҎԼͷίϚϯυͰఆٛࡁΈͷ

    $POUFYUͷϦετΛݟΔ͜ͱ͕Ͱ͖·͢ɻ
    ࣮͸೔ຊޠͰ΋ॻ͚·͕͢ࠓ೔͸লུ͠·͢ɻɻɻ

    View Slide

  21. Scenario: Showing the Homepage
    When I am on "/"
    And I push ".button"
    Then I should see "Welcome"
    And I should see "Hello World"
    "OEͰෳ਺ࢦఆ͕ՄೳͰ͢ɻ

    View Slide

  22. ͞Βʹ۩ମతʹ
    Ҏ߱ͷྫͰ͸8PSE1SFTT&YUFOTJPOͷ
    ػೳ΋ؚ·Ε·͢ɻ

    View Slide

  23. @javascript
    Scenario: Login as Administrator
    When I login as the "administrator" role
    And I am on "/"
    Then I should see "Howdy, admin"
    When I logout
    And I am on "/"
    Then I should not see "Howdy, admin"
    ϩάΠϯϢʔβʔʹରͯ͠؅ཧόʔ͕දࣔ͞Ε͍ͯΔ͔ʁ
    ϩάΞ΢τͨ࣌͠ʹඇදࣔʹͳ͍ͬͯΔ͔ʁ

    View Slide

  24. @javascript
    Scenario: PC and Mobile
    Given I login as the "administrator" role
    And I am on "/wp-admin/"
    When the screen size is 1440x900
    Then I should see "Dashboard" \

    in the "#adminmenu" element
    When the screen size is 320x400
    Then I should not see "Dashboard" \

    in the "#adminmenu" element
    ϞόΠϧͰ؅ཧը໘ͷϝχϡʔ͕ඇදࣔʹͳ͍ͬͯΔ͔ʁ

    View Slide

  25. @javascript
    Scenario: PC and Mobile
    Given I login as the "administrator" role
    And I am on "/wp-admin/"
    When I am on "/"
    Then I should see "Welcome"
    When I am on "/wp-admin/plugins.php"
    Then I should see "Contact Form 7"
    ηογϣϯΛ࣋ͬͯา͘͜ͱ΋Ͱ͖·͢ɻ

    View Slide

  26. @javascript
    Scenario: I hover over the specific element
    Given the screen size is 1440x900
    And I login as the "administrator" role
    And I am on "/"
    When I hover over the \
    "#wp-admin-bar-my-account" element
    And I wait for 3 seconds
    Then I should see "Edit My Profile"
    +BWB4DSJQUͷNPVTFPWFSͷςετ

    View Slide

  27. @javascript
    Scenario: I hover over the specific element
    Given the screen size is 1440x900
    And I login as the "administrator" role
    And I am on "/"
    When I hover over the \
    "#wp-admin-bar-my-account" element
    And I wait for 3 seconds
    Then I should see "Edit My Profile"
    And take a screenshot and save it to \
    "~/Desktop/screenshot-1.png"
    εΫϦʔϯγϣοτ΋ࡱΕ·͢ɻ

    View Slide

  28. @javascript
    Scenario: Send message from contact form
    Given I am on "/contact"
    When I fill in the following:
    | your-name | miya |
    | your-email | [email protected] |
    | your-subject | Hello |
    | your-message | ͜Μʹͪ͸ʂ |
    And I press "Send"
    And I wait for 3 seconds
    Then I should see "Thank you"
    ϑΥʔϜͷςετ΋؆୯

    View Slide

  29. https://github.com/vccw-team/wordpress-
    extension/tree/master/features
    ͦͷଞͷྫ͸ҎԼͷ63-Ͱʂ

    View Slide

  30. Ϣʔεέʔε

    View Slide

  31. w ೲ඼௚લͷςετ
    w 8PSE1SFTTຊମ΍ϓϥάΠϯͷΞοϓσʔτʹ൐
    ͏֬ೝ࡞ۀͷࣗಈԽ
    w ಛఆͷΠϯϑϥͰͷಈ࡞֬ೝ
    w ςʔϚϨϏϡʔ

    View Slide

  32. ࢀߟ

    View Slide

  33. • https://blog.hanhans.net/2015/06/26/
    behat-extension-create/
    • https://pantheon.io/docs/guides/
    wordpress-automated-testing/
    • https://github.com/jhedstrom/
    drupalextension

    View Slide

  34. 5IBOLT

    View Slide