wpceptを使おう

WordBench京都9月で発表したスライドです。

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ʹͳΔͱେม
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