E2Eテストの保守性を高めるための工夫

>100 Views

March 28, 24

スライド概要

竹内俊暁

@toshiaki

スライド一覧

ユニークビジョン株式会社のエンジニアです

関連スライド

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

ue4 ue5 ue-beginner

エピックゲームズジャパン 1M

Unreal Engine5 Lumenの仕組みと肝心なところ

ue5 ue-rendering ue-lumen

エピックゲームズジャパン 893.9K

SQL滅ぶべし

株式会社ホクソエム 793.3K

SPAセキュリティ超入門

security php javascript

徳丸浩 696.7K

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】

ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer

エピックゲームズジャパン 603.3K

各ページのテキスト

E2Eテストの保守性を高めるための工夫 2024年03月19日ユニークビジョン株式会社⽵内俊暁

⾃⼰紹介 ‧CRMチーム所属(Customer Relationship Management) ‧アンケートデータなどを活⽤して、企業と顧客の関係強化を⽀援する部⾨ ‧技術について ‧仕事柄、SQLに慣れ親しんでます ‧データ分析とE2Eテストが最近のトレンドです ‧趣味について ‧ボルダリングをかれこれ2年やってます Copyright ©Unique Vision Company, All Rights Reserved.

イントロ ‧UVではリードタイム短縮を⽬指して実験的にE2Eテストの導⼊を⾏っている。 ‧ユーザビリティーのテストというよりは、テスト⾃動化に重点を置いている。 ‧ツールとしてはPlaywrightを使っている。 ‧CI/CDにも導⼊することができ、安定して稼働できるようになってきた。 ‧今回は、E2Eテストの安定化に有⽤だと感じた⼯夫を紹介したいと思います。 Copyright ©Unique Vision Company, All Rights Reserved.

テストコード

UIモードでのテスト

10.

11.

12.

13.

TestIDの活⽤ ‧ボタンの名前などでDOM要素を取得しようとしても、⼀意に決まらない場合がある e.g. ⼀覧画⾯のフォームやボタン ‧要素にIDを割り当てて取得するのがよい。そのためのメソッドをPlaywrightが提供してくれている。 <button data-testid=”LOGOUT_BUTTON”> ログアウト </button> logoutButton = page.getByTestId(“LOGOUT_BUTTON”) await logoutButton.click() Copyright ©Unique Vision Company, All Rights Reserved.

14.

TestIDの⾃動⽣成 ‧TestIDを管理するのが少し⾯倒くさい。 ‧社内で使われている⾃動⽣成ツールを使って、TestIdをまとめたファイルを⽣成する仕組みを導⼊した。 ‧TypescriptオブジェクトとしてTestIDを⽣成すると、補完が効いて便利 “kbns”: [ “lname”: “ヘッダー”, “pname”: “header”, “values”:[ { “lname”: “ログアウトボタン ”, “pname”: “logout-button” } ] export const TESTID = { HEADER_LOGOUT_BUTTON: ‘header-logout-button’, } Copyright ©Unique Vision Company, All Rights Reserved.

15.

16.

データベースの操作 ‧画⾯の操作だけに限定すると、データの状態に依存してテストが不安定になってしまう ‧単体テストではデータのCRUDを⾏うので、E2Eテストでも同様のことを⾏えばよいと考えている。 ‧テスト環境で実施するのであれば、⽔平分割できる範囲でデータの初期化やCRUDを⾏えばよい。 ‧UVのシステムでは、企業という単位で(少なくとも意味的に)⽔平分割されている Copyright ©Unique Vision Company, All Rights Reserved.

17.

[beta]

Fixtureの活⽤
‧DBクライアントを扱うときには、playwrightのFixtureという機能を活⽤するのが良い
‧ブラウザやページと同様に、テストケースごとに初期化されたDBクライアントを⽤意してく
れる

test(‘ユーザー取得 ’, async({page, client} => {
.
.
.
await getUser( {id: 1}, client );
.
.
})

Copyright ©Unique Vision Company, All Rights Reserved.

18.

19.

最後に ‧E2Eテストも⼯夫をすれば安定したテストとして稼働できるはず ‧ざっくりとした⼯数 ‧PageObjectモデル作成やヘルパー関数の作成: 2h / ページ ‧テストコード作成: 20m 〜 30m /個 ‧テスト⾃動化に重点をおいて話したが、他にも有⽤な使い⽅がありそう e.g. ページごとのアクセス権限のテスト Copyright ©Unique Vision Company, All Rights Reserved.