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

TestCaféでE2Eテスト!

 TestCaféでE2Eテスト!

Azusa Okamoto

May 28, 2022
Tweet

More Decks by Azusa Okamoto

Other Decks in Programming

Transcript

  1. TestCaféでE2Eテスト!
    あずにゃん
    20220528_とにかくほめる!マウントなしのLT会

    View full-size slide

  2. 自己紹介
    ・フロントエンドエンジニア

    ・気づけば、2年目...
    【言語】

    JavaScript, TypeScript


    【FW・ライブラリ】

    React, Vue.js

    @azunyan_eng

    View full-size slide

  3. 今日お話しすること
    1. E2Eテストとは?

    2. TestCaféとは?

    3. 主な使い方

    4. 実践!

    5. 感想や学び

    6. 参考資料

    View full-size slide

  4. 1. E2Eテストとは?

    2. TestCaféとは?

    3. 主な使い方

    4. 実践!

    5. 感想や学び

    6. 参考資料

    View full-size slide

  5. E2Eテストとは?
    システム全体をテストする。

    ユーザが利用する時のように、ブラウザ操作をしながら
    テスト。

    View full-size slide

  6. 1. E2Eテストとは?

    3. 主な使い方

    4. 実践!

    5. 感想や学び

    6. 参考資料
    2. TestCaféとは?

    View full-size slide

  7. TestCaféとは?
    ・E2Eテスト自動化フレームワーク。


    ・JavaScript/TypeScriptで記述。


    ・複数のブラウザに対応


    ・複数のブラウザで同時実行できる。

    View full-size slide

  8. TestCaféとは?
    const
    const
    homeTab
    = ( ). ( ). ( );


    = . ( ). ( );


    . ( . ). ( );
    tabs
    homeTab tabs
    Selector find nth
    child nth
    expect eql
    '#root' 'div'
    'a'
    'Home'
    2
    0
    awaitt innerText
    (例)

    View full-size slide

  9. 手動でポチポチ...。 手動の操作不要!
    TestCaféなし TestCaféあり

    View full-size slide

  10. 1. E2Eテストとは?

    2. TestCaféとは?

    4. 実践!

    5. 感想や学び

    6. 参考資料
    3. 主な使い方

    View full-size slide

  11. 主な使い方
    ①要素関係(取り出してくるなど...)


    ②テスト関係

    View full-size slide

  12. innerText value
    要素のテキストを取得。
    input要素のテキストを

    取得。

    View full-size slide

  13. (例)
    // innerText

    // value

    const
    const
    = . ( ). ;


    =
    . ( ). ;
    pageTitle pageContents
    inputForm
    form $ formName
    child
    find
    'h1'
    `input[name=" "]`
    innerText
    value
    { }

    View full-size slide

  14. getStyleProperty()
    要素が持つ、指定したCSSのプロパティの値を取得。

    View full-size slide

  15. (例)
    // 背景色を取ってくる。

    const =
    . ( );
    activeBG
    homeTab getStyleProperty 'background-color'

    View full-size slide

  16. hasAttribute()
    その要素が指定した属性を持っているかどうかを返す。

    View full-size slide

  17. (例)
    const = . ( );
    btnWithDisabled submitBtn hasAttribute 'disabled'

    View full-size slide

  18. click()
    要素をクリックする。

    View full-size slide

  19. click()
    (例)
    const
    const
    = ( ). ( ). ( );


    = . ( ). ( );


    . ( );
    navTabs
    formTab navTabs
    formTab
    Selector find nth
    child nth
    click
    '#root' 'div'
    'a'
    2
    1
    await t

    View full-size slide

  20. typeText()
    テキストを入力する。

    View full-size slide

  21. click()
    (例)
    const
    true
    .
    await
    inputForm form
    inputForm
    = ( );


    find
    typeText
    `input[name="name"]`
    'テスト花子'
    . ( , , : );
    t { }
    replace

    View full-size slide

  22. eql() notEql()
    値が合っているか。 値が異なっているか。

    View full-size slide

  23. click()
    (例)
    // クラス名で指定することも可能

    // await t.expect(対象要素).eql(想定している結果);

    const
    const
    = ( ). ( );


    = . ( ). ;


    . ( ). ( );
    modal
    modalText modal
    modalText
    Selector child
    child
    expect eql
    '.test-modal' 'div'
    'p'
    'Modalが出現!!'
    innerText
    t
    await

    View full-size slide

  24. ok() notOk()
    値がtrueであるか。 値がfalseであるか。

    View full-size slide

  25. click()
    (例)
    // ok()

    // notOk()

    await
    await
    . ( . ( )). ();


    . ( . ( )). ();
    t
    t
    expect hasAttribute ok
    expect hasAttribute notOk
    submitBtn
    submitBtn
    'disabled'
    'disabled'

    View full-size slide

  26. takeScreenshot()
    スクリーンショットを撮影。

    指定したパスに保存される。

    View full-size slide

  27. click()
    (例)
    await . (
    : ,

    :
    );
    t takeScreenshot {

    'result/checkHomeTabContents.png'
    }
    path
    fullPage true

    View full-size slide

  28. 1. E2Eテストとは?

    2. TestCaféとは?

    3. 主な使い方

    5. 感想や学び

    6. 参考資料
    4. 実践!

    View full-size slide

  29. 実践!
    表示されている内容や要素が持つ属性などを利用して、
    テストしていく!

    View full-size slide

  30. 実践! 〜主なテスト内容〜
    ・Homeタブが表示されているか。

    View full-size slide

  31. 実践! 〜主なテスト内容〜
    ・Formタブが表示されているか。


    ・初期状態で、送信ボタンが無効になっているか。


    ・初期値が合っているか。


    ・フォームに入力できるか。


    ・フォーム入力後、送信ボタンが有効になっているか。

    View full-size slide

  32. 実践! 〜主なテスト内容〜
    ・Buttonsタブが表示されているか。


    ・モーダルが表示されるか。


    ・モーダルを消すことができるか。

    View full-size slide

  33. 動かしてみる!!

    View full-size slide

  34. 1. E2Eテストとは?

    2. TestCaféとは?

    3. 主な使い方

    4. 実践!

    6. 参考資料
    5. 感想や学び

    View full-size slide

  35. 感想や学び
    ・「現状」だけでなく、「今後」のことも考慮して要素
    を指定!


    ・色関係や改行ありテキスト判定において、制約がある
    のになかなか気がつけずて手間取った。


    ・画面仕様をじっくり見る機会になり、プロジェクトに
    途中から参画しても仕様把握に繋がって助かった!

    View full-size slide

  36. 感想や学び
    ・コマンドを実行すると、ブラウザが立ち上がって、自
    動でテストできるのは便利!


    ・テストコード作成初心者でも、メソッドを組み合わせ
    ていくことで問題なく扱えた!

    View full-size slide

  37. 1. E2Eテストとは?

    2. TestCaféとは?

    3. 主な使い方

    4. 実践!

    5. 感想や学び

    6. 参考資料

    View full-size slide

  38. 参考資料
    TestCafé公式ドキュメント

    View full-size slide

  39. ご清聴ありがとう

    ございました!

    View full-size slide