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

2019-07 テスト自動化/2019-07 Test automation

2019-07 テスト自動化/2019-07 Test automation

Cybozu

May 31, 2019
Tweet

More Decks by Cybozu

Other Decks in Technology

Transcript

  1. 開運研修2019
    テスト自動化
    テストエンジニアリングチーム

    View full-size slide

  2. この講義の目的
    ▌テスト自動化の基本の「き」を知る
    ▌テスト自動化の演習を通して、
    ⚫ 自動テストのよい書き方を知る
    ⚫ 自動テストの動く仕組みを知る

    View full-size slide

  3. テスト自動化の基本

    View full-size slide

  4. 質問:手動テストは全部、自動化すればいいと思いますか?

    View full-size slide

  5. 質問:手動テストは全部、自動化すればいいと思いますか?
    ▌答え:NO!
    ▌全部自動化すればいい訳ではない
    ▌なぜ?
    ⚫ 自動テストの数だけ、メンテナンスコストがかかる
    ⚫ 実施頻度が少ないテストケースを自動化しても、
    自動化をすることに時間がかかる場合もある
    ▌実行頻度の多いテストケースのみを自動化するなど
    工夫が必要

    View full-size slide

  6. 参考:テストのピラミッドという考え方
    ▌テストのピラミッドは、Mike Cohnの"Succeeding with
    Agile"[Coh09]で最初に提唱されたモデル
    ⚫ UIテスト
    ⚫ いわゆる画面上で動作するテスト
    ⚫ テスト速度は遅い
    ⚫ UIの変更が入るとテストが動かなくなる
    ⚫ インテグレーション(統合)テスト
    ⚫ UI層の1つ下の層までをテスト
    ⚫ WebAPIのテスト
    ⚫ ユニットテスト
    ⚫ コードレベルのテスト
    ⚫ テスト速度は早い
    UIテスト
    インテグレーションテスト
    ユニットテスト
    テスト数
    速度


    View full-size slide

  7. 質問:どんなテストでも自動化できると思いますか?

    View full-size slide

  8. 質問:どんなテストでも自動化できると思いますか?
    ▌答え:NO!
    ▌画面の崩れや画像のテストは、自動化が難しい
    例)ボタンがずれていないことをチェックするテスト
    例)アイコンが「×」であることをチェックするテスト
    ▌人間の目でチェックした方が、格段に効率が良いことも
    ある

    View full-size slide

  9. 課題内容

    View full-size slide

  10. 課題の説明
    ▌課題:
    cybozu.comのログイン画面のテスト自動化

    View full-size slide

  11. 自動ブラウザテストの作成
    ▌TEが作成したTCB(Test Common Base, テスト共通基盤)の仕
    組みを利用しています。
    ⚫ テストの形式を共通化
    ⚫ PageObject
    ⚫ TestFlow
    ⚫ TestScript
    ⚫ ライブラリの共通化
    ⚫ tcb-util
    ⚫ tcb-eslint …
    ⚫ 簡単に自動テストを作成できる
    ▌言語:JavaScript(Node.js)

    View full-size slide

  12. Selenium WebDriverについて
    ▌Selenium WebDriver
    ⚫ OSSのソフトウエア
    ⚫ 自動でWebブラウザを操作してくれるツール
    ▌できる操作
    ⚫ ボタンをクリック
    ⚫ フォームに値を入れる
    ⚫ 値が表示されるまで待つ
    ⚫ 値を取得する
    ⚫ などなど…
    http://webdriver.io/api.html

    View full-size slide

  13. chaiについて
    ▌アサーションライブラリ:chai
    ⚫ OSSのソフトウエア
    ⚫ 動作結果の判定
    ▌http://www.chaijs.com/
    ▌実行結果と期待結果を比較
    ⚫ expect(実行結果).to.equal(期待結果)
    ほかにもいろいろな比較方法がある
    expect(‘foo’).to.be.a(‘string’) →型がstringであるかどうか
    expect('foobar').to.include('foo’) →fooが文字列の中に含まれるかどうか
    expect(実行結果).to.be.true →実行結果がtrueかどうか
    参考URL

    View full-size slide

  14. mochaについて
    ▌テストフレームワーク:mocha
    ⚫ OSSのソフトウエア
    ▌https://mochajs.org/
    ▌describe()→テストの説明
    ▌it()→テスト1ケース

    View full-size slide

  15. TCBの構成
    ▌PageObject
    ⚫ ページを構成している部品を記述(element)
    ⚫ 簡単な動作を記述(method)
    ▌TestFlow
    ⚫ PageObjectを使って複雑な動作を記述(method)
    ⚫ 動作結果の判定
    ▌TestScript
    ⚫ 実施するテストの具体的な手順

    View full-size slide

  16. PageObjectについて
    ▌PageObject
    ⚫ ページを構成している部品や、その簡単な動作を記述
    /src/pages/LoginPage.js
    「セレクタ」と呼ぶ
    $(“.class名”)
    $(“#id名”)
    でも利用可能。

    View full-size slide

  17. PageObjectについて
    ▌セレクタのいろいろな書き方
    セレクタ 書き方
    Id #product
    Class名 .entry
    CSS div.entry
    Xpath /html/body/div
    Tag名 div
    属性フィルター input[name=“pass”]









    View full-size slide

  18. PageObjectについて
    ▌PageObject
    ⚫ ページを構成している部品や、その簡単な動作を記述
    /src/pages/LoginPage.js
    WebDriverIOのAPIを利用
    http://webdriver.io/api/action/setValue.html
    他にも、クリックする、値を取得する…などもある

    View full-size slide

  19. TestFlowについて
    ▌TestFlow
    ⚫ PageObjectを使って複雑な動作を記述
    ⚫ 動作結果の判定
    /src/test_flows/Login.js

    View full-size slide

  20. TestScriptについて
    ▌TestScript
    ⚫ 実施するテストの具体的な手順

    View full-size slide

  21. TCBの構成
    ▌なぜこんな構成?
    ⚫ メンテナンスやテストの再利用、テスト修正がやりやすい
    Page Object1 Test Flow1
    Test Script1
    < name=username >
    Test Script2
    Page Object2 Test Flow2
    画面上の要素の値を使うのはPageObjectのみ
    例えば画面の要素名が変わっても、PageObjectのみ変更
    すればよい
    TestFlowのおかげで、同じ処理を何度も書く必要がなく
    より少ないコード行数でテストを作成することが可能

    View full-size slide

  22. 参考資料
    ▌初めての自動テスト
    ――Webシステムのための自動テスト基礎
    https://www.oreilly.co.jp/books/9784873118161/

    View full-size slide