Selenium あるある

Transcript

1. Selenium 失敗あるある
   @D‑Cube 【自動化】ワーストプラクティス ～まずはやってみる～
   

   View Slide

2. 自己紹介
   

   View Slide

3. E2E自動化、やってますか？
   

   View Slide

4. 私はやったことがあります
   

   View Slide

5. １ヶ月半かけてSeleniumの勉強 + 設計と実装
   を経て
   

   View Slide

6. ついに完成！！！
   

   View Slide

7. しかし…
   

   View Slide

8. ものの数ヶ月で使われなくなり、私が初めて
   作った自動テストスイートはゴミと化しまし
   た。
   

   View Slide

9. 本日は当時を振り返って失敗の原因と
   そこから得られる教訓を語ります。
   

   View Slide

10. 原因１. 信頼性のないテスト
    

    View Slide

11. Seleniumのテストは "タイミング次第" で落
    ちる。
    

    View Slide

12. 前提としてSeleniumでテストを書く際には様々な状況でDOMを選択す
    る必要があります。
    この時問題になるのが、まだ存在していないDOMを選択しようとしてテ
    ストが失敗することで、これがまた結構な頻度で起こる。
    

    View Slide

13. これを防ぐためには、起きる可能性がある部分（大抵はページ遷移後の
    タイミング）にそのDOMがマウントするまで待つような処理を挟む
    browser.waitUntil(
    () => browser.isExisting(".search-field");
    );
    

    View Slide

14. しかし疲れてきた私は…
    

    View Slide

15. browser.pause(300);
    

    View Slide

16. それでも…
    

    View Slide

17. View Slide

18. ↓ 私
    

    View Slide

19. 結論
    信頼性のないテストはゴミ
    

    View Slide

20. 教訓
    ページロードや非同期処理を待つことが手軽にできる
    Cypressなどのツールを検討してみよう。
    

    View Slide

21. 原因2. マルチブラウザ対応を頑張ってしまう
    

    View Slide

22. 対応しようとしたブラウザ
    

    View Slide

23. EdgeのDriverで click が動作しない
    Excpetion "org.openqa.selenium.WebDriverException:
    Element is obscured "
    

    View Slide

24. clickイベントを注入するJSでwrapすること
    によって無事解決
    browser.click = selector =>
    browser.selectorExecute(selector,
    element => element[0].click());
    

    View Slide

25. FirefoxでActionクラスが存在しない
    要するにDrag & Dropとかができない。
    

    View Slide

26. Drag & Dropイベントを注入するJSで(ry
    browser.execute(function (selectorDrag, selectorDrop) {
    // function for triggering mouse events
    var fireMouseEvent = function (type, elem, centerX, centerY
    var evt = document.createEvent('MouseEvents');
    evt.initMouseEvent(type, true, true, window, 1, 1, 1, centerX
    elem.dispatchEvent(evt);
    };
    var elemDrag = document.querySelector(selectorDrag);
    var elemDrop = document.querySelector(selectorDrop);
    if (!elemDrag || !elemDrop) return false;
    var pos = elemDrag.getBoundingClientRect();
    var center1X = Math.floor((pos.left + pos.right) / 2);
    ・
    ・
    ・
    

    View Slide

27. 信じられるのはChromeだけ…
    

    View Slide

28. 教訓
    マルチブラウザテストで見たい観点は何かを考えよう。
    違うブラウザでJSの挙動が違うということは最近ではあまりなくなっ
    た。自動テストは一ブラウザだけで、ブラウザ間の差異を見るのはシナ
    リオテストを手動で見る、みたいなキリであれば現実的かもしれない。
    

    View Slide

29. 原因3. メンテナンスコストをなめてた
    

    View Slide

30. メンテナンスはとても大変
    テストケースのアップデート
    テストコードのアップデート
    selectorが変わった時壊れまくる…
    変更の影響範囲をちゃんと連携しないクソ開発者(私)
    

    View Slide

31. 業務にちゃんと組み込ませることを最初から意識する。
    経験ある人がいないのであれば、スモールスタートで始めるのでも価値
    があると思う。
    (よくいじられるところ１ページ選んで、そこだけ導入するとか)
    慣れてきてハマりそうだと確信したら対象範囲を増やすとか。
    

    View Slide

32. あと
    E2Eの自動化はとても片手間でできるものでは
    ない
    

    View Slide

33. 教訓
    優秀なテストエンジニアを雇おう！
    

    View Slide

34. ご静聴ありがとうございました。
    

    View Slide