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