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

Selenium あるある

seya
May 30, 2018

Selenium あるある

seya

May 30, 2018
Tweet

More Decks by seya

Other Decks in Programming

Transcript

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

    View full-size slide

  2. 自己紹介

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. ついに完成!!!

    View full-size slide

  7. しかし…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. browser.pause(300);

    View full-size slide

  16. それでも…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide