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

nds_8_reftest.pdf

ooooooo_q
November 14, 2015

 nds_8_reftest.pdf

ooooooo_q

November 14, 2015
Tweet

More Decks by ooooooo_q

Other Decks in Programming

Transcript

  1. REFTEST-RUNNERͰ
    UIͷREVIEWΛ
    NDS in Niigata #8
    @ooooooo_q
    1

    View full-size slide

  2. !PPPPPPP@Rʢͳͳ͓͘ʣ
    झຯͰηΩϡϦςΟ
    େମKT
    ϑϩϯτΤϯυ
    αʔόαΠυ
    2

    View full-size slide

  3. ։ൃٕज़
    +4ʹΑΔ41"ͷ։ൃ
    .7ʹΑΔઃܭ
    ࣗಈςετ
    ։ൃϑϩʔ
    ίʔυϨϏϡʔ
    $*ʢܧଓతΠϯςάϨʔγϣϯʣ
    (*5'-08 (*5)6#'-08
    લఏ஌ࣝ
    3

    View full-size slide

  4. 6*ͷϨϏϡʔ
    Ͳ͏ͯ͠·͔͢ʁ
    4

    View full-size slide

  5. ʼ6*ͷϨϏϡʔͲ͏ͯ͠·͢ʁ
    ΩϟϓνϟΛͷͤͯ΋Β͏
    ίʔυελΠϧͱಈ࡞ΛνΣοΫ
    ίʔυελΠϧͷΈνΣοΫ
    ϨϏϡʔ͍ͯ͠ͳ͍PS͢ΔจԽ͕ͳ͍
    ʜʜ
    5

    View full-size slide

  6. ίʔυελΠϧͷνΣοΫ͸Ͱ͖Δ
    ίʔυͷมԽͱ6*ͷมԽ͸Ͳ͏݁ͼ͍͍ͭͯΔʁ
    $44͸ଞͷͱ͜ΖʹӨڹ͠ͳ͍ʁ
    Ϋϩεϒϥ΢βͰͪΌΜͱಈ͘ʁ
    6

    View full-size slide

  7. Ωϟϓνϟͷ%*''Ͱ
    ݟ͍ͨʂʂ
    7

    View full-size slide

  8. 3&'5&45
    36//&3
    8

    View full-size slide

  9. 3&'5&4536//&3
    OQNͰ഑෍͞Ε͍ͯΔOPEFKT༻Ϟδϡʔϧ
    !B[V͞Μ࡞
    OQNHJOTUBMMSFGUFTUSVOOFS
    OPEFKTWܥҎ্͕ඞཁ
    9

    View full-size slide


  10. SFGUFTUSVOOFSͱ͍͏ϒϥ΢βͰඳը಺༰΍ϨΠΞ΢
    τͱ͍ͬͨදࣔ݁ՌΛςετ͢ΔͨΊͷϥΠϒϥϦΛ
    ࡞Γ·ͨ͠ɻ
    ཁૉٕज़ͱͯ͠͸ϒϥ΢βɺ8FC%SJWFS"1*ɺϨϯμ
    ϦϯάΩϟϓνϟɺը૾%J⒎ͱ͍͏ײ͡Ͱ͢ɻ
    ϒϥ΢βͰϏδϡΞϧςετΛ͢Δreftest-runnerΛ࡞ͬͨ
    http://efcl.info/2015/05/14/reftest-runner/
    10

    View full-size slide

  11. \
    OBNFSFGUFTUSVOOFS
    BVUIPSB[V
    FNBJMB[VDJBP!HNBJMDPN
    IPNFQBHFIUUQTHJUIVCDPNB[VSFGUFTUSVOOFS
    MJDFOTF.*5
    WFSTJPO
    EFTDSJQUJPO3FGUFTUSVOOFSXJUI8FC%SJWFS"1*z
    ʜ
    11
    QBDLBHFKTPO͔Βൈਮ

    View full-size slide

  12. ʜ
    EFQFOEFODJFT\
    CMJOLEJGG?
    CMVFCJSE?
    EBUFGPSNBU?
    ʜ
    ʜ
    PQUJPOBUPS?
    SFGUFTUMJTUQBSTFS?
    TFMFOJVNEPXOMPBE?
    TFMFOJVNXFCESJWFS?
    ^
    12

    View full-size slide

  13. #-*/,%*''
    :BIPPࣾ੡ͷը૾ൺֱπʔϧ
    ̎ͭͷը૾Λൺֱͯ͠ɺEJ⒎͕͋Δͱ͜Ζ͸੺͘ͳΔ
    13
    https://github.com/yahoo/blink-diff

    View full-size slide

  14. 8%3*7&3
    㲈TFMFOJVN
    OPEFKTͳͲ͔Βϒϥ΢βΛૢ࡞Ͱ͖Δ
    *&ɺ'JSFGPYɺ$ISPNFɺ4BGBSJɺ0QFSBɺ
    1IBOUPN+4ͳͲͷϒϥ΢βΛαϙʔτ
    14

    View full-size slide

  15. 15
    reftest-runner
    browser A browser B
    capture A
    (canvas)

    output png
    webdriver webdriver
    static server
    blink-diff
    capture B
    (canvas)

    URL A, URL B

    View full-size slide


  16. ΩϟϓνϟΛऔΔλΠϛϯάΛඇಉظʹͰ͖Δ
    IUNMλάʹΫϥεΛ͚͓͍ͭͯͯɺ֎͢
    ֎෦63-΋ࢦఆͰ͖Δ
    ŠVTF&YUFSNBM4FSWFS
    DMJ͔ΒΑΓ΋OPEFKT͔Βͷݺͼग़͠ਪ঑
    CMJOLEJ⒎ͷPQUJPO΋౉ͤΔΑ͏ʹͳΔ
    17

    View full-size slide

  17. 3&'5&45
    ϦϑΝϨϯεςετ
    ϒϥ΢β։ൃ޲͚ͷٕज़
    ςετ༻ͱϦϑΝϨϯε༻ͷϑΝΠϧΛͦΕͧΕ༻ҙ
    ผʑͷػೳΛ࢖ͬͯɺಉ͡ද͕ࣔग़Δ͜ͱΛ֬ೝ͢Δ
    IUUQBEPCFHJUIVCJPXFCQMBUGPSNQSFTFOUBUJPOT
    UFTUUXGIPXUPXSJUFBSFGUFTUKQ
    19

    View full-size slide


  18. ը૾ൺֱϕʔεͷςετ͸มԽʹऑ͘อक͕େม
    ͳͷͰɺҰ೥΄Ͳલʹ3FGUFTUTͱݺ͹ΕΔ৽͠
    ͍λΠϓͷςετ͕αϙʔτ͞Εͨ
    -- ୸޵ͷఉࢣ - steps to phantasien
    http://steps.dodgson.org/b/2012/05/20/gardening-with-canaries/
    20

    View full-size slide

  19. 3&'5&4536//&3
    '03
    6*3&7*&8
    21

    View full-size slide

  20. 22
    reftest-runner
    git push
    ci runner
    pull request
    add png files
    output png

    View full-size slide

  21. ݟ͍ͨ΋ͷ͸ϒϥϯνؒͷ%*''
    ϚʔδઌͷϒϥϯνͱͷEJ⒎͕ཉ͍͠
    ෳ਺ϒϥϯν͕ಉ࣌ʹଘࡏ͠ͳ͍ͱ͍͚ͳ͍
    $*্Ͱ͸Ұͭͷϒϥϯν͔͔͋ͭ͑͠ͳ͍
    ࣗ෼ࣗ਎Λίϐʔͤ͞Α͏
    STZODHJUJHOPSFHJUDIFDLPVU
    24

    View full-size slide

  22. ࣮ԋ
    (BACKBONE.JS+GITHUB+CIRCLECI)
    https://github.com/ooooooo-q/reftest-branch-sample
    25

    View full-size slide

  23. ςετ͍ͨ͠
    STATE͸Ұͭʁ
    26

    View full-size slide

  24. 45"5&Λ੾Γସ͑Δʹ͸
    %#αʔόͷσʔλΛςετͷͨͼʹ੾Γସ͑
    "1*ͷϞοΫαʔόΛཱͯͯ੾Γସ͑
    ςετίʔυΛೖΕͯϏϧυ࣌ʹ੾Γସ͑
    ʜ
    27

    View full-size slide

  25. ݟ͍ͨͷ͸
    7*&8ͱ45"5&ͷ
    ૊Έ߹Θͤ
    ʜ'-69
    28

    View full-size slide

  26. 3&'5&4536//&3
    8*5)'-69
    '03
    6*3&7*&8
    29

    View full-size slide

  27. FLUXͱͷ૊Έ߹Θͤ
    ඞཁͳͷ͸63-ͱςετσʔλͷ૊Έ߹Θͤ
    'MVYͰ͋Ε͹σʔλ͕Ͳ͔͜Βདྷ͍ͯΔ͔͸໰Θͳ͍
    SFUFTUSVOOFSతʹ͸63-͔Β౉ͤΔͱָ
    MPDBUJPOIBTI
    l EBUBAFODPEF63*$PNQPOFOU +40/4USJOHJGZ EBUB

    Az
    30

    View full-size slide

  28. ࣮ԋʢؒʹ߹͍·ͤΜͰͨ͠ʣ
    react.js
    31

    View full-size slide

  29. 6*૚
    Πϕϯτ૚
    υϝΠϯ૚
    VOJUUFTU VOJUUFTU
    SFGUFTU
    SFWJFX
    &&UFTU

    View full-size slide

  30. 3&(3&44*0/
    33

    View full-size slide

  31. ςετͷੑ࣭
    VOJUUFTUͱҧͬͯಉ͡౴͑Λอূ͠ͳ͍
    SFGUFTUͦͷ΋ͷͱ͸࢖͍ํ͕ҧ͏
    6*͕ͪΐͬͱมΘΔͨͼʹςετΛॻ͖௚͢ͷ͸ਏ͍
    ਓ͕ݟͯ0,ͳΒେମ0,ʁ
    34

    View full-size slide

  32. 3&'5&4536//&3
    '03
    6*3&7*&8
    "/%(*5'-08
    35

    View full-size slide

  33. 36
    master development
    feature
    branch A
    feature
    branch B
    ػೳ͝ͱͷϚʔδ
    ϦϦʔεϚʔδ

    View full-size slide

  34. ϦϦʔε಺༰͕೺Ѳ͠΍͍͢
    ʜΤϯδχΞ͡Όͳͯ͘΋
    ϨϏϡʔʹࢀՃͰ͖Δʜ
    37

    View full-size slide

  35. ςετͮ͠Β͍಺༰
    Ϛ΢εΦʔό࣌ͷσβΠϯมߋͳͲ
    $44Ξχϝʔγϣϯͷಈ࡞
    ςετ࣌ͷॲཧΛ+4ଆʹॻ͘
    SFGUFTUSVOOFSΛಈըʹରԠͤ͞Δʜʁ
    ςετͱͯ͠ΦʔόεϖοΫʹͳΓ͕ͪ
    39

    View full-size slide

  36. ؀ڥߏங
    $*αʔό༻ͷ؀ڥߏங೉͍͠
    ̎ͭͷϒϥϯνΛڞଘ͢Δϊ΢ϋ΢͕ಛघ
    +4ͷϏϧυ΍γεςϜߏ੒͕བྷΉ
    ෳ਺ϒϥ΢βͷ؀ڥߏங
    "NB[PO-BNEB΍XFCIPPLͰઐ༻αʔόʹඈ͹͢
    TFMFOJVN(SJEͱ͔4BVDF-BCTͱ͔
    40

    View full-size slide

  37. ςετͷอक
    '-69ͷͱ͖ɺશମͷTUBUFΛຖճهड़͢Δʁ
    ࢖͏ςετσʔλ͸ϚʔδݩʁϚʔδઌʁ
    σʔλߏ଄͕มΘΔͱ࣮ߦͰ͖ͳ͍
    $PNQPOFOU͝ͱʹςετͰ͖Ε͹
    ʜʜ·ͩΘ͔Βͳ͍
    41

    View full-size slide

  38. REFTEST-RUNNERΛ࢖ͬͯ
    UI REVIEWָ͕ʹͳΔ͔΋
    ͠Εͳ͍
    ͕·ͩͪΐͬͱԕ͍
    42

    View full-size slide