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

今回は、 STYLY Studio の GUI テストの自動化の試みについて、ご紹介します。

本記事と同じ内容を、口頭で解説した動画がありますので、動画の方がお好みの方はこちらをご覧ください！

※2022 年 10 月 28 日に XR 勉強会 by STYLY で登壇した際の動画アーカイブです。

STYLY Studio とは

STYLY Studio は、3D 空間を制作できる Web アプリケーションです。

• https://gallery.styly.cc/

3DCG の描画用に WebGL を利用し、素材集の部分を React で開発しています。

どんな感じのツールか気になる方は、こちらの動画をご覧ください！

GUI テストについて

STYLY Studio の GUI テストの一部は、 Puppeteer と SikuliX という 2 種類のツールを使って自動化しています。

使い分けはこんな感じです。

ツール	テスト対象の UI
Puppeteer	React 部分の GUI テストに利用
SikuliX	WebGL 部分の GUI テストに利用

Puppeteer は、WebGL 製の UI を検出することが得意ではないので、そこを SikuliX でカバーするという構成です。

Puppeteer による GUI テストの自動化

React 部分は、Puppeteer で GUI テストを自動化しています。

ライブラリ構成は以下のような感じです。

以下がサンプルのコードです。

/**
 * ヘッダー部分のタイトル文字列を検証します
 * @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)
}

.header のように CSS セレクター風の記述で DOM を指定できるので、Web エンジニアとしては、とても使いやすいです！

ただ、WebGL 系の UI 部品を指定しずらい特徴があります。

SikuliX による GUI テストの自動化

WebGL 部分は、 SikuliX で GUI テストを自動化しています。

SikuliX は、ブラウザ操作だけでなく、PC 操作全般を自動化できるツールです。
画像認識で UI 部品を特定します。

これにより、WebGL 製のアプリケーションでも、自動操作ができます！

ただ、画像認識によって UI 部品を特定しますので、UI の見た目が仕様変更されてしまうと、自動操作処理が動かなくなってしまう難点があります。
そのため、メンテナンスコストが非常に高いです。

現状の構成

GUI テストの自動化のメンテナンスコストは非常に高いため、仕様変更に比較的強い単体テストを充実させる方針に、現在はしています。

（もっと良い方法があれば、コメント等でご意見・ご指摘よろしくお願いいたします。）

※WebGL 部分は、Unity で開発しているため、TestRunner を利用しています。

さいごに

今回紹介した自動 GUI テスト体制を構築するにあたり、 @uechan16 さんと N さんにご協力いただきました。

また、Umiさんに今回の登壇の記事を書いていただきました！
https://note.com/styly_note/n/na13642de55fa

この場を借りてお礼申し上げます。ありがとうございました！