wpceptを使おう

Transcript

1. wpceptΛ࢖͓͏ 2016.09.19 WordBenchژ౎

2. ࣗݾ঺հ • ֯ాɹҰฏʢεϛμɹΠοϖΠʣ • ϑϦʔϥϯε • PHP, iOS, AndroidΤϯδχΞ •

   CoderDojoຕํओ࠻ • CoderDojo੢ٶɾകాɹੈ࿩ਓձ

3. ࣗݾ঺հ @ippey_s ippeisumida

4. ΞδΣϯμ • wpceptͷલʹ • Codeception • AcceptanceTest

5. ΞδΣϯμ • wpceptͱ͸ʁ • جຊతͳઃఆ • جຊతͳςετͷॻ͖ํ • ςετ࣮ߦ

6. Codeception

7. Codeception • PHPͰಈ࡞͢ΔςεςΟϯάϑϨʔϜϫʔΫ • Unit - PHPUnitςετ • Functional -

   ػೳςετ • Acceptance - ड͚ೖΕςετɹˡϒϥ΢βςετ • CIͱ࿈ܞՄʂ

8. Why Codeception? • ຖ౓໨ࢹͰϒϥ΢βͰςετΛߦ͏ͷ͸େม • (WebDriverར༻࣌͸)ීஈར༻͍ͯ͠Δϒϥ΢βͰςετͰ͖Δ • ଞͷPCͰ΋֬ೝ͕Ͱ͖Δ • ϓϥάΠϯɺςʔϚߋ৽࣌ͷ૝ఆ֎ͷӨڹʹؾͮ͘͜ͱ͕Ͱ͖

   Δ • WordpressຊମΞοϓάϨʔυ࣌ʹ҆৺Ͱ͖Δ

9. How to install Codeception composer require "codeception/codeception"

10. How to install Codeception vendor/bin/codecept bootstrap vendor/bin/codecept generate:cept acceptance IndexCept

    vendor/bin/codecept generate:cest acceptance IndexCest

11. Acceptance Test • ϒϥ΢βΛར༻ͨ͠ৼΔ෣͍ςετΛߦ͏ɻ • ઃఆʹΑΓɺ֤छϒϥ΢βΛར༻Ͱ͖Δɻ • ΢ΥʔλʔϑΥʔϧతʹهड़Ͱ͖ΔCeptɺΫϥεͰهड़Ͱ͖Δ Cest͕͋Δɻ •

    ςετ࣮ߦ࣌ʹɺDBΛૢ࡞Ͱ͖Δɻ • ςετ಺ͰDBͷૢ࡞͕Ͱ͖ͳ͍ɻ

12. Acceptance Test • PHPBrowser - PHPͰಈ࡞͢Δ؆қϒϥ΢βɻ JavaScript͕࢖͑ͳ͍ɻ • Phantom.js -

    JSͰಈ࡞͢Δϒϥ΢βɻBasicೝূ͕࢖͑ ͳ͍ɻ • WebDriver - ֤छϒϥ΢βΛར༻͢ΔυϥΠόɻσϑΥ ϧτ͸Firefox

13. ஫ҙ఺ʂ • WebDriver(selenium)ͷόʔδϣϯʹΑͬͯѻ͑ͳ ͍Firefoxͷόʔδϣϯ͕͋Δɻ • Firefox͸ࣗಈతʹ࠷৽ʹͳΔ͕ɺselenium͸ࣗ ಈͰ࠷৽ʹͳΒͳ͍ͨΊɺselenium͕ಈ͔ͳ͘ ͳΔɻ

14. How to write AcceptanceTest /** * ςετϝιου࣮ߦલʹݺ͹ΕΔ * @param AcceptanceTester

    $I */ public function _before(AcceptanceTester $I) { }

15. How to write AcceptanceTest /** * ςετϝιου࣮ߦޙʹݺ͹ΕΔ * @param AcceptanceTester

    $I */ public function _after(AcceptanceTester $I) { }

16. How to write AcceptanceTest /** * ςετϝιου * @param AcceptanceTester

    $I */ public function tryToTest(AcceptanceTester $I) { $this->_notTest($I); }

17. How to write AcceptanceTest /** * ςετϝιουͰͳ͍৔߹͸ϝιου໊ઌ಄ʹͰ”_”Λ͚ͭΔ * @param AcceptanceTester

    $I */ public function _notTest(AcceptanceTester $I) { }

18. How to execute AcceptanceTest vendor/bin/codecept build # શ࣮ߦ vendor/bin/codecept run

    acceptance # ࢦఆϑΝΠϧ͚࣮ͩߦ vendor/bin/codecept run acceptance IndexCest

19. WPCept

20. wpcept • WordPress༻ʹΧελϚΠζ͞ΕͨCodeception • CodeceptionͰར༻Ͱ͖ͨϝιουʴWP༻ͷϝ ιου

21. How to install wpcept composer require codeception/codeception --dev composer require

    lucatume/wp-browser --dev

22. How to install Codeception vendor/bin/wpcept bootstrap vendor/bin/wpcept generate:cept acceptance IndexCept

    vendor/bin/wpcept generate:cest acceptance IndexCest

23. Acceptance Test • WPBrowser - PHPͰಈ࡞͢Δ؆қϒϥ΢βɻJavaScript ͕࢖͑ͳ͍ɻ • WPWebDriver(Phantom.js) -

    JSͰಈ࡞͢Δϒϥ΢βɻ Basicೝূ͕࢖͑ͳ͍ɻ • WPWebDriver(Selenium) - ֤छϒϥ΢βΛར༻͢Δυ ϥΠόɻσϑΥϧτ͸Firefox

24. How to configure wpcept • acceptance.suite.ymlͱ͍͏ϑΝΠϧͰઃఆ • Codeceptionͷ৔߹͸Ͳͷϒϥ΢βΛར༻͢Δ ͔ɺσϑΥϧτͷURL͸Կ͔ʁͳͲΛઃఆ •

    wpceptͷ৔߹͸ɺ͜͜ʹwp-adminͷύεɺ؅ ཧऀͷID,PWͳͲΛઃఆͰ͖Δɻ

25. How to configure wpcept # Codeception Test Suite Configuration #

    Suite for WordPress acceptance tests. # Perform tests using or simulating a browser. class_name: AcceptanceTester modules: enabled: - \Helper\Acceptance - WPBrowser: url: 'http://wb-kyoto-201609.local' adminUsername: admin adminPassword: adminp adminPath: /wp-admin acceptance.suite.yml

26. How to configure wpcept class_name: AcceptanceTester modules: enabled: - \Helper\Acceptance

    - WPWebDriver config: WPWebDriver: url: 'http://wb-kyoto-201609.local' browser: 'firefox' window_size: '1024x768' adminUsername: admin adminPassword: adminp adminPath: /wp-admin acceptance.suite.yml

27. How to configure wpcept env: wpbrowser: modules: enabled: - WPBrowser

    disabled: - WPWebDriver config: WPBrowser: url: 'http://wb-kyoto-201609.local' adminUsername: admin adminPassword: adminp adminPath: /wp-admin chrome: modules: config: WPWebDriver: browser: 'chrome' acceptance.suite.yml

28. How to execute wpcept vendor/bin/wpcept build # શ࣮ߦ vendor/bin/wpcept run

    acceptance # ࢦఆϑΝΠϧ͚࣮ͩߦ vendor/bin/wpcept run acceptance IndexCest # ؀ڥΛࢦఆ࣮ͯ͠ߦ vendor/bin/wpcept run acceptance —env=chrome

29. How to write test case • CodeceptionͷυΩϡϝϯτʹهࡌͷ͋Δϝιο υʴwpceptಠࣗͷϝιουΛར༻ͯ͠ςετΛ هड़ •

    ཁૉͷࢦఆ͸XPath, CSS SelectorͰߦ͏ɻ

30. Commonly Used methods ϝιου උߟ ࢦఆͷϖʔδʹҠಈ *BN0O1BHF l63-z  BDDFQUBODFTVJUFZNMʹࢦఆ

    ͨ͠63-ʹ௥Ճ͞ΕͯΞΫη εɻ ϖʔδʹࢦఆͷจࣈ͕͋Δ͔ *TFF lจࣈྻz 
    *TFF lจࣈྻz
    lཁૉz 
    *DBO4FF lจࣈྻz  DBOΛ͚ͭΔͱݟ͔ͭΒͳ͘ ͯ΋ςετ͕ࢭ·Βͳ͍ ϖʔδʹࢦఆͷจࣈ͕ͳ͍͔ *EPOU4FF lจࣈྻz 
    *EPOU4FF lจࣈྻz
    lཁ ૉz 
    *DBOU4FF lจࣈྻz  DBOΛ͚ͭΔͱݟ͔ͭΒͳ͘ ͯ΋ςετ͕ࢭ·Βͳ͍ ΫϦοΫ *DMJDL lϩάΠϯz 
    *DMJDL lMPHJOz  จࣈྻ 9QBUI $44
    4FMFDUPS Ͱࢦఆ

31. ϝιου උߟ ςΩετϘοΫεʹॻ͘ *pMM'JFME lOBNFz
    lWBMVFz 
    *pMM'JFME lOBNFz
    

    lWBMVFz  ϑΟʔϧυ໊ 9QBUI $44
    4FMFDUPSͰࢦఆ ϥδΦϘλϯબ୒ *DIFDL0QUJPO lOBNFz
    lWBMVFz
    *DIFDL0QUJPO lOBNFz
    lWBMVFz  ϑΟʔϧυ໊ 9QBUI $44
    4FMFDUPSͰࢦఆ ηϨΫτϘοΫεɺνΣοΫ ϘοΫεબ୒ *TFMFDU0QUJPO lOBNFz
    lWBMVFz 
    *TFMFDU0QUJPO lOBNFz
    lWBMVFz  ϑΟʔϧυ໊ 9QBUI $44
    4FMFDUPSͰࢦఆ Commonly Used methods

32. ϝιου උߟ ؅ཧϢʔβϩάΠϯ͢Δ *MPHJO"T"ENJO  *% 18͸ઃఆϑΝΠϧʹ ϓϥάΠϯҰཡϖʔδ΁ *BN0O1MVHJOT1BHF 

    ϓϥάΠϯ༗ޮԽ * BDUJWBUF1MVHJO bQMVHJO4MVH` ϝιουલʹ BN0O1MVHJOT1BHF ΛݺͿ ϓϥάΠϯແޮԽ * EF"DUJWBUF1MVHJO bQMVHJO4M VH`  ϝιουલʹ BN0O1MVHJOT1BHF ΛݺͿ ඞཁ͋Γ Commonly Used methods

33. How to write test case public function indexWithLoginTest(AcceptanceTester $I)
 {


    $I->wantToTest('ϩάΠϯͯ͠Δͱ͖ͷTOPςετ');
 $I->loginAsAdmin();
 $I->amOnPage("/");
 // αΠτͷͲ͔͜ʹ֘౰ͷจࣈྻ͕͋Δ͔֬ೝ
 $I->canSee("wb-kyoto-201609");
 // CSS SelectorͰࢦఆͯ֘͠౰ͷจࣈྻ͕͋Δ͔֬ೝ
 $I->canSee('Just another WordPress site', '#masthead > div > div > p');
 // XPathͰࢦఆͯ֘͠౰ͷจࣈྻ͕͋Δ͔֬ೝ
 $I->canSee('͜Μʹͪ͸ɺadmin ͞Μ !', '//*[@id="wp-admin-bar- my-account"]/a');
 }


34. XPath, CSS Selector • جຊతʹCodeception,wpcept͸XPath, CSS SelectorΛར༻ͯ͠ཁૉΛऔಘ͠ɺνΣοΫɻ • ͍͔ʹςετʢऔಘʣ͠΍͍͢Α͏ʹɺHTML, CSSΛ࡞Δ͔͕ॏཁɻ

35. ͦ΋ͦ΋XPathͬͯʁ

36. XPath XML Path Language ʢXPathʢΤοΫεύεʣʣ ͸ɺϚʔΫΞοϓݴޠ XML ʹ४ڌͨ͠จॻͷಛఆͷ෦෼Λࢦఆ͢Δݴޠߏจ Ͱ͋Δɻ XPathࣗମ͸؆ܿͳߏจ

    ʢࣜݴޠʣ Ͱ͋ΓɺXMLʹ४ڌͨ͠ϚʔΫΞοϓݴޠͰ͸ͳ͍ɻ ඪ४Խஂମ W3C (World Wide Web Consortium) Ͱ։ൃ͞Εɺ1999೥11݄16೔ʹ XML Path Language (XPath) 1.0 ͕ XSL Transformations (XSLT) 1.0 ͱ ಉ࣌ʹקࠂͱͯ͠ެද͞Εͨ[1][2]ɻ XPath͸ɺXSLT ͱ XSL-FO ͱͱ΋ʹελΠϧγʔτٕज़ XSL ͷߏ੒ཁૉͱҐஔ͚ͮΒΕͯ ͍Δɻ 2007೥1݄23೔ɺW3C Ͱ XPath 1.0 ͷ࣍ظόʔδϣϯ੍͕ఆ͞ΕɺXPath 2.0 ͕ XSLT 2.0 ͱಉ࣌ʹקࠂ͞Εͨɻ ·ͨ W3C ͸ XPath 2.0 Λ֦ுٕͨ͠ज़ͱͯ͠ XQuery 1.0 Λ։ൃ͠ɺ2007೥1݄23೔ͷ XPath 2.0 / XSLT 2.0 ͷקࠂͱಉ࣌ʹ XQuery 1.0 ͕קࠂ͞Εͨɻ2014೥4݄8೔ʹ XPath 3.0 ͕קࠂ͞Εͨɻ XPath 1.0 ͕ެද͞ΕΔͱɺXMLจॻʹର͢Δ؆୯ͳ໰͍߹Θͤݴޠͱͯ͠ɺٸ଎ʹXMLΛѻ͏ιϑτ΢ΣΞ։ൃऀ ʢϓϩάϥ Ϛʣ ͨͪʹड͚ೖΕΒΕ͍ͯͬͨɻ ΋ͱ΋ͱ͸XPathͷ։ൃ͸ɺXSL (XSLT) ͱ XPointer ʹڞ௨͢ΔߏจͱৼΔ෣͍ͷϞσϧΛ ։ൃ͢Δ͜ͱΛ໨ඪͱ͍ͯͨ͠ɻ ࣮ࡍʹXSLTͰ͸ɺXMLจॻͷಛఆͷ෦෼Λࢦఆ͢ΔύλʔϯΛɺXPathΛجʹͨ͠ߏจͰࢦఆ ͢Δɻ ҰൠʹXSLTॲཧܥͷ࣮૷͸ɺXPathॲཧܥͷ࣮૷ΛؚΜͰ͍Δɻ XPath 1.0͸2007೥ʹ຋༁͞ΕJIS X 4160ͱͯ͠JISن֨Խ͞Ε͍ͯΔɻ
 
 ˞WikipediaΑΓ

37. Get XPath <div id="page" class="site"> <div class="site-inner"> <a class="skip-link screen-reader-text"

    href=“#content”> ίϯςϯπ΁εΩοϓ</a> ←͜͜͸ //*[@id="page"]/div/a

38. Get XPath? <section id="meta-2" class="widget widget_meta"><h2 class="widget-title">ϝλ৘ใ</ h2> <ul> <li><a

    href=“http://wb-kyoto-201609.local/wp-admin/">αΠτ؅ཧ</a></li> <li><a href="http://wb-kyoto-201609.local/wp-login.php? action=logout&#038;_wpnonce=c3c4a7821f">ϩάΞ΢τ</a></li> <li><a href="http://wb-kyoto-201609.local/feed/">౤ߘͷ <abbr title="Really Simple Syndication”>RSS←͜͜͸ʁ</abbr></a></li> <li><a href="http://wb-kyoto-201609.local/comments/feed/">ίϝϯτͷ <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="https://ja.wordpress.org/" title="Powered by WordPress, state- of-the-art semantic personal publishing platform.">WordPress.org</a></li> </ul> </section> ??? ※ෳࡶͳHTMLʹͳΔͱେม
39. None

40. How to get XPath, CSS Selector

41. How to get XPath, CSS Selector

42. How to get XPath, CSS Selector

43. How to execute wpcept