Playwrightでデザインや検索アルゴリズムのテスト Kyoto Tech Talk #4

Kyoto Tech Talk #4 Playwrightを使いながら デザインや検索アルゴリズムのテスト 株式会社Helpfeel エンジニア 秦 友幸 @hata6502 1

Profile ⾃⼰紹介 秦 友幸（はた ともゆき） ● 株式会社Helpfeel エンジニア ○ インフラ基盤、顧客受け⼊れ ○ Cloudflare、EV SSL証明書、SAML認証、 脆弱性対応、アクセシビリティ対応など ● - ムギュウ @hata6502 ○ BlueHoodというお絵かきアプリを運営し ていました 2

Products プロダクト紹介 情報からナレッジを作り、磨き上げ、届けるところまで、All-in-Oneで⾏うことができるSaaSプラットフォーム 積極 採⽤中 Helpfeel Scrapbox Gyazo 知識を届ける 知識を磨き上げる 情報を知識にする エンタープライズサーチ アイディエーションツール メディアキャプチャー 3

Playwrightを使ってデザインのテスト 4

Playwrightを使ってデザインのテスト Helpfeelは2019年サービス開始 ● 既存システムの磨き上げもやっていきたい ○ デザイン ○ 検索アルゴリズム 5

Playwrightを使ってデザインのテスト 案件ごとにデザインをカスタマイズしている ● 6

Playwrightを使ってデザインのテスト ⽬⽴たない想定の⼩さいデザイン修正 ● フォーカスリングを付けた ● コントラスト担保のため⾊を変えた ○ ⽔⾊リンク ⇨ ⻘⾊リンク ● 驚かせないようにデザイン修正するには ○ デザイン崩れはないか? ○ 案件ごとのデザインカスタマイズへの影響は? ■ CSSレベルで⾃由に書いてるけど 7

Playwrightを使ってデザインのテスト Playwrightを使ってみた ● ユーザー視点でのテストならE2Eテスト ● ヘッドレスブラウザ ● Visual Regression Test 8

Playwrightを使ってデザインのテスト 変わったPlaywrightの使い⽅かも ● テスト差分を⾒ていくのが主な⽬的 ○ テストは毎回落ちる前提で ● 公開された⼤量の実データをとにかく投⼊ ○ ヘッドレスブラウザ ✕ ⼤量データ ● CIには組み込まない ○ デザイン修正したいときだけテスト実⾏ 9

Playwrightを使ってデザインのテスト 落ちる前提のテスト? ● テスト結果 = デザインが変わる箇所 ● ⼈間がデザイン変更差分を⾒ていく 10

Playwrightを使ってデザインのテスト 落ちる前提のテスト? ● テスト結果 = デザインが変わる箇所 ● ⼈間がデザイン変更差分を⾒ていく 11

Playwrightを使ってデザインのテスト 落ちる前提のテスト? ● テスト結果 = デザインが変わる箇所 ● ⼈間がデザイン変更差分を⾒ていく 12

Playwrightを使ってデザインのテスト 落ちる前提のテスト? ● テスト結果 = デザインが変わる箇所 ● ⼈間がデザイン変更差分を⾒ていく 13

Playwrightを使ってデザインのテスト 落ちる前提のテスト? ● テスト結果 = デザインが変わる箇所 ● ⼈間がデザイン変更差分を⾒ていく 14

Playwrightを使ってデザインのテスト ⼤量のテストデータ ● 公開されているFAQ数百案件のCSS 15

Playwrightを使ってデザインのテスト その場限りのテスト実⾏ ● not 継続的テスト ● がテスト結果を全部⾒た ● 数百案件のテスト結果でも、⼈間が⾒ていける ○ デザイン修正したいモチベーション ○ 差分ピクセル数で分類する 16

Playwrightを使ってデザインのテスト 差分ピクセル数で分類する ● FAQ案件ごとにCSSはカスタマイズされている ● テスト結果の差分ピクセル数で、FAQ案件を分類する ● 差分ピクセル数が同じなら、デザインの変わり⽅も同じはず 17

Playwrightを使ってデザインのテスト focus-visible状態でスクリーンショットを撮る ● CDP(Chrome Devtools Protocol)でCSS.forcePseudoStateする 18

Playwrightを使ってデザインのテスト 差分ピクセル数を取得する ● report.jsonlから正規表現で採ってくる ● /(\d+) pixels/ 19

Playwrightを使ってデザインのテスト テストの流れ詳細 ● 公開されているFAQのCSSを全件ダウンロード ● mainブランチでローカル環境のHelpfeelを起動 ○ Playwrightで全CSSを当てながらスクショを撮っていく ● デザイン修正ブランチでHelpfeel再起動 ○ Playwrightで全CSSを当てながらVisual Regression Test ○ テスト結果はエラーになる前提で ● テスト結果を差分ピクセル数で分類 ● がデザイン差分を全部⾒る 20

Playwrightを使ってデザインのテスト デザインが崩れそうなFAQを事前に対策しておく ⼀例 borderの⾊がズレている 21

Playwrightを使ってデザインのテスト デザインが崩れそうなFAQを事前に対策しておく ⼀例 borderの⾊を合わせる 22

Playwrightを使ってデザインのテスト デザインが崩れそうなFAQを事前に対策しておく ⼀例 borderの⾊がズレている 23

Playwrightを使ってデザインのテスト デザインが崩れそうなFAQを事前に対策しておく ⼀例 borderの⾊を合わせる 24

Playwrightを使ってデザインのテスト デザイン修正していくフローが整った ● 既存顧客も巻き込んでデザイン修正 ○ not 新規案件からデザイン改訂 ● デザイン変更箇所を事前にテスト ● 影響箇所を⾒つけて事前に対策できるようになった ○ デザイン修正による驚きを最⼩に 25

Playwrightを使って検索アルゴリズムのテスト 26

Playwrightを使って検索アルゴリズムのテスト ローマ字でも検索したい ● IME英語モードのまま⽇本語⼊⼒しても、検索できるようにした ● seihin ⇨ 製品 27

Playwrightを使って検索アルゴリズムのテスト 副作⽤がどのくらいあるか？ ● まずは控えめに検索アルゴリズムを変更する ● 英単語に⼲渉するかも ○ 「IE」は、「家」か「Internet Explorer」か？ ● 意図どおりの検索結果が増えるか？ ○ IME⼊⼒モード間違いを察して、検索ヒットするのが⽬標 ○ 関係ない記事が⼤量に検索ヒットしても無意味 28

Playwrightを使って検索アルゴリズムのテスト Playwrightを検索アルゴリズムのテストにも応⽤ デザイン 検索アルゴリズム テストデータ源 公開されているFAQ 数百案件のCSS BigQueryに蓄積した 数⼗万件の検索クエリ※ テスト対象 全部テストする ランダム選択 テスト結果の形式 スクリーンショット 検索結果のリスト 定性評価 デザイン崩れないか 全部⾒る IME⼊⼒モードの間違いを 察してるか20テスト⾒る 定量評価 ― 1000テスト中何テストで 検索結果が変わるか ※https://www.helpfeel.com/landing-team 29

Playwrightを使って検索アルゴリズムのテスト 定性評価と定量評価 20テスト テストデータ 数⼗万件 Playwright IME⼊⼒モード の間違いを 察してるか Playwright 何件 検索結果が 変わったか ランダム選択 1000テスト 30

Playwrightを使って検索アルゴリズムのテスト 重み付けランダムで頻出検索クエリを選択 ● 数⼗万件の検索クエリ全部をテストするのは難しい ● 各検索クエリデータを、検索された回数で重み付け ● よく検索されるクエリほど、テスト対象に選ばれやすくする 31

Playwrightを使って検索アルゴリズムのテスト テキストもスナップショットテスト ● 実はテキストデータでも、スナップショットテストできる ○ スクリーンショットだけではない 32

Playwrightを使って検索アルゴリズムのテスト 定性評価して作り込む ● 20件のテスト結果を、⼈間が⾒て評価する ○ 良くなった 11件 ○ 変化なし 6件 ○ 微妙だね 3件 ● 実データを眺めると、その場で気づくこともある ○ ⼤⽂字の場合…… ○ ⼦⾳が…… ● 検索アルゴリズムを作り込んで、再度テストしていく 33

Playwrightを使って検索アルゴリズムのテスト 影響度を調整 ● 検索アルゴリズムを作り込みながら、影響度を調査 ○ 1000テスト中何テストで、検索結果が変わるか ○ 10分~15分で機械的に結果を出すため、試⾏錯誤しやすい ● まずは控えめに、検索アルゴリズムを修正リリースした 34

事前に影響調査してから修正リリース ● 丁寧にプロダクト改善していけそうです ○ デザイン崩れが起きないかテスト ○ IME⼊⼒モードを間違えても検索できるかテスト 35

Playwrightを使って検索アルゴリズムのテスト Playwrightの使い⽅まとめ デザイン 検索アルゴリズム テストデータ源 公開されているFAQ 数百案件のCSS BigQueryに蓄積した 数⼗万件の検索クエリ※ テスト対象 全部テストする ランダム選択 テスト結果の形式 スクリーンショット 検索結果のリスト 定性評価 デザイン崩れないか 全部⾒る IME⼊⼒モードの間違いを 察してるか20テスト⾒る 定量評価 ― 1000テスト中何テストで 検索結果が変わるか ※https://www.helpfeel.com/landing-team 36

個⼈開発祭り #3 やります ● 銀座でオフライン & 配信 ● 2024年4⽉12⽇ 19:00〜21:30 ○ 3⽇後、週末、⾦曜⽇です ● も参加します ○ アルバムと地図の話をします ○ カレンダーの話も ● みてね 37