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

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

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 | miya@example.com |
    | 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