wpceptを使おう - Speaker Deck

wpceptを使おう

by Ippei Sumida

Slide 1

Slide 1 text

wpceptΛ࢖͓͏ 2016.09.19 WordBenchژ౎

Slide 2

Slide 2 text

ࣗݾ঺հ • ֯ాɹҰฏʢεϛμɹΠοϖΠʣ • ϑϦʔϥϯε • PHP, iOS, AndroidΤϯδχΞ • CoderDojoຕํओ࠻ • CoderDojo੢ٶɾകాɹੈ࿩ਓձ

Slide 3

Slide 3 text

ࣗݾ঺հ @ippey_s ippeisumida

Slide 4

Slide 4 text

ΞδΣϯμ • wpceptͷલʹ • Codeception • AcceptanceTest

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Codeception

Slide 7

Slide 7 text

Codeception • PHPͰಈ࡞͢ΔςεςΟϯάϑϨʔϜϫʔΫ • Unit - PHPUnitςετ • Functional - ػೳςετ • Acceptance - ड͚ೖΕςετɹˡϒϥ΢βςετ • CIͱ࿈ܞՄʂ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

How to install Codeception composer require "codeception/codeception"

Slide 10

Slide 10 text

How to install Codeception vendor/bin/codecept bootstrap vendor/bin/codecept generate:cept acceptance IndexCept vendor/bin/codecept generate:cest acceptance IndexCest

Slide 11

Slide 11 text

Acceptance Test • ϒϥ΢βΛར༻ͨ͠ৼΔ෣͍ςετΛߦ͏ɻ • ઃఆʹΑΓɺ֤छϒϥ΢βΛར༻Ͱ͖Δɻ • ΢ΥʔλʔϑΥʔϧతʹهड़Ͱ͖ΔCeptɺΫϥεͰهड़Ͱ͖Δ Cest͕͋Δɻ • ςετ࣮ߦ࣌ʹɺDBΛૢ࡞Ͱ͖Δɻ • ςετ಺ͰDBͷૢ࡞͕Ͱ͖ͳ͍ɻ

Slide 12

Slide 12 text

Acceptance Test • PHPBrowser - PHPͰಈ࡞͢Δ؆қϒϥ΢βɻ JavaScript͕࢖͑ͳ͍ɻ • Phantom.js - JSͰಈ࡞͢Δϒϥ΢βɻBasicೝূ͕࢖͑ ͳ͍ɻ • WebDriver - ֤छϒϥ΢βΛར༻͢ΔυϥΠόɻσϑΥ ϧτ͸Firefox

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

How to write AcceptanceTest /** * ςετϝιου࣮ߦલʹݺ͹ΕΔ * @param AcceptanceTester $I */ public function _before(AcceptanceTester $I) { }

Slide 15

Slide 15 text

How to write AcceptanceTest /** * ςετϝιου࣮ߦޙʹݺ͹ΕΔ * @param AcceptanceTester $I */ public function _after(AcceptanceTester $I) { }

Slide 16

Slide 16 text

How to write AcceptanceTest /** * ςετϝιου * @param AcceptanceTester $I */ public function tryToTest(AcceptanceTester $I) { $this->_notTest($I); }

Slide 17

Slide 17 text

How to write AcceptanceTest /** * ςετϝιουͰͳ͍৔߹͸ϝιου໊ઌ಄ʹͰ”_”Λ͚ͭΔ * @param AcceptanceTester $I */ public function _notTest(AcceptanceTester $I) { }

Slide 18

Slide 18 text

How to execute AcceptanceTest vendor/bin/codecept build # શ࣮ߦ vendor/bin/codecept run acceptance # ࢦఆϑΝΠϧ͚࣮ͩߦ vendor/bin/codecept run acceptance IndexCest

Slide 19

Slide 19 text

WPCept

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

How to install wpcept composer require codeception/codeception --dev composer require lucatume/wp-browser --dev

Slide 22

Slide 22 text

How to install Codeception vendor/bin/wpcept bootstrap vendor/bin/wpcept generate:cept acceptance IndexCept vendor/bin/wpcept generate:cest acceptance IndexCest

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

How to conﬁgure wpcept • acceptance.suite.ymlͱ͍͏ϑΝΠϧͰઃఆ • Codeceptionͷ৔߹͸Ͳͷϒϥ΢βΛར༻͢Δ ͔ɺσϑΥϧτͷURL͸Կ͔ʁͳͲΛઃఆ • wpceptͷ৔߹͸ɺ͜͜ʹwp-adminͷύεɺ؅ ཧऀͷID,PWͳͲΛઃఆͰ͖Δɻ

Slide 25

Slide 25 text

How to conﬁgure 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

Slide 26

Slide 26 text

How to conﬁgure 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

Slide 27

Slide 27 text

How to conﬁgure 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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

How to write test case • CodeceptionͷυΩϡϝϯτʹهࡌͷ͋Δϝιο υʴwpceptಠࣗͷϝιουΛར༻ͯ͠ςετΛ هड़ • ཁૉͷࢦఆ͸XPath, CSS SelectorͰߦ͏ɻ

Slide 30

Slide 30 text

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 $444FMFDUPS Ͱࢦఆ

Slide 31

Slide 31 text

ϝιου උߟ ςΩετϘοΫεʹॻ͘ *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

Slide 32

Slide 32 text

ϝιου උߟ ؅ཧϢʔβϩάΠϯ͢Δ *MPHJO"T"ENJO *% 18͸ઃఆϑΝΠϧʹ ϓϥάΠϯҰཡϖʔδ΁ *BN0O1MVHJOT1BHF ϓϥάΠϯ༗ޮԽ * BDUJWBUF1MVHJO bQMVHJO4MVH` ϝιουલʹ BN0O1MVHJOT1BHF ΛݺͿ ϓϥάΠϯແޮԽ * EF"DUJWBUF1MVHJO bQMVHJO4M VH` ϝιουલʹ BN0O1MVHJOT1BHF ΛݺͿ ඞཁ͋Γ Commonly Used methods

Slide 33

Slide 33 text

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');  } 

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

ͦ΋ͦ΋XPathͬͯʁ

Slide 36

Slide 36 text

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ΑΓ