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 Slide

  2. 自己紹介

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. ついに完成!!!

    View Slide

  7. しかし…

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide