STYLY Studioのテストをブラウザ自動操作で効率化する

2022年10月28日に開催された「XR勉強会 by STYLY」で登壇した際の資料です。

資料内で紹介している「STYLY Studio」はこちらから！
https://gallery.styly.cc/

★登壇の動画アーカイブはこちら
https://youtu.be/bIm0gr7gxkE

★XR勉強会 by STYLY の情報はこちら
https://styly.connpass.com/event/261100/

★せぎゅのTwitterはこちら
https://twitter.com/segur_vita

Transcript

1. STYLY Studioのテストを ブラウザ自動操作で 効率化する segur 2022-10-28
2. DEMO
3. Segur / せぎゅ STYLY Studio 開発リーダー @segur_vita
4. テストをしよう！
5. こういう経験ありますよね？ テストをしよう！ 新機能をリリースしました！ 今まで動いてたのに・・・ 〇〇が動かないんですがー
6. 手作業のテストはしんどい・・・
7. ブラウザを自動操作して テストを自動化しよう！
8. 自動テスト DEMO
9. 何が起きてるの？
11. Chromeを自動操作するツール
12. Jest 自動テストのライブラリ構成 GUIテストを自動化できた！ Puppeteer Chrome Node.js
13. 自動化の発案者はQAエンジニアのuechan氏 GUIテストを自動化しましょう！ Seleniumでの試作に成功！ Selenium ChromeDriver Mocha Uechan
14. 外部協力プログラマーのN氏が最適化 環境構築が簡単に！ Puppeteer Jest N氏 (匿名希望) Node.jsに特化した構成にしましょう！
15. Puppeteerの限界
16. Puppeteerはcanvas要素が不得意 WebGLで構築されたGUIのテストは不得意
17. React STYLY-StudioはWebGLとReactの組み合わせ
18. WebGL部分はSikuliXで対応 SikuliX React
19. SikuliXの導入 ブラウザ操作だけでなく、 PC操作全般を自動化できるツール 画像認識でUI部品を特定する WebGL製アプリでも自動テストできる！
20. DEMO
21. SikuliXの限界
22. 画像認識を利用したテストはGUI変更に弱い ログイン画面の刷新 ログイン操作の自動化処理 が動かなくなった！
23. Unity PlayMode test Unity EditMode test 強 弱 React hooks test React components test Puppeteer SikuliX 単体テストでカバー Redux test UI 変 更 へ の 強 さ React部分 WebGL部分
24. テストを自動化しよう！
25. 展望
26. VRアプリのテストも 自動化したい！
27. 補足資料
28. コード例 /** * ヘッダー部分のタイトル文字列を検証します * @param page ページ * @param headerTitle 期待する文字列 */ export async function assertHeaderTitle(page: Page, headerTitle: string) { const $header = await page.$('.header') if (!$header) { throw Error('class に "header" が指定された要素が見つかりませんでした ') } const value = await $header.evaluate((el) => el.textContent) await expect(value).toEqual(headerTitle) } CSSセレクター風な記述がわかりやすい！