Selenium あるある - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ついに完成！！！

Slide 7

Slide 7 text

しかし…

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

しかし疲れてきた私は…

Slide 15

Slide 15 text

browser.pause(300);

Slide 16

Slide 16 text

それでも…

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

↓ 私

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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); ・・・

Slide 27

Slide 27 text

信じられるのはChromeだけ…

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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