Blazor.WebAssemblyを実案件で使ってみた
SeleniumでE2Eのテストも作ったよ

石川達也
Codeer代表取締役
→社員募集中
プログラマ(C, C++, C#)
テスト自動化ライブラリ/ツール開発
Microsoft MVP 2014～
趣味はギターとOSSライブラリ作成
Twitter: @StoneGuitar777
自己紹介

家にギターがあるのに弾かない娘・・・
ぼざろを娘に布教中

Windowsアプリを意のままに操作するためのライブラリ
弊社製品FriendlyはMicrosoft MVP Showcaseで2位になりました。
http://blogs.msdn.com/b/mvpawardprogram/archive/2014/11/04/mvp-showcase-winners.aspx
IPAの「先進的な設計・検証技術の適用事例報告書 2015年度版」に掲載。
http://www.ipa.go.jp/sec/reports/20151118.html
Friendly

Seleniumのラッパーライブラリ
使いやすさの向上
待ち処理
便利な要素特定機能
Selenium.StandardControls

// TestAssitantPro
Windows App
Web
Code と Tool のシナジー効果！
あなたのプロジェクトに Just Fit！

【メリット】
・C#で書ける!
・Visual Studioだけでいける!
Blazor
【デメリット】
JavaScript連携が面倒
（Reactと比べちゃうとね・・・)
↓
JavaScriptの既存ライブラリを使うのは大変
（現実的にはあんまりやりたくない）
結局はメンバーのスキルセット次第
ただ、C#技術者が多い場合の選択肢としてかなりアリ

・いくつかはJavaScriptライブラリのラッパーが提供されている
・Blazor独自のも多々ある
・おなじみのGrapecityさん、Infragisticsさん
今回使ったのは
・Blazored.LocalStorage
・Sotsera.Blazor.Toaster
Blazor
Nugetで沢山のライブラリが公開されている

Blazor
フロントでDIとC#のイベント使えたのは良かった
例えばHttp通信の時のローディング出したいとき
LoadingComponent HttpService
LoadingService
event
DI
サンプルコード

サイドバーとかヘッダーと
Pageの通信にも使える
Blazor

認証が社内システムで使うには重厚すぎる・・・
そしてフロントがWebAssemblyではない
Cookie認証とCRLF
↓
@jsakamoto
https://qiita.com/jsakamoto/items/bb57cff432af3db866c8
Burikaigiサンプル
https://github.com/Ishikawa-Tatsuya/Burikaigi2023
Blazor

最終的にはDOMになるので問題なくテストできる
Seleniumでテスト
スクショ
E2EのテストもC#で書ける
VisualStudioでいける

Seleniumの代替
今回使ってないけど流行り
流行には逆らえないので調査の必要あり
Seleniumでテスト
デモ

【Webアプリは基本ステートレス】
・データ変更系(Write)のテスト
・参照、検索系(Read)のテスト
のどちらなのかを明確にする
Writeはできるだけシンプルなデータ構成にして書き込みがある部分は毎回クリア
Readは作って触らないという戦略もあり
（毎回入れ直しももちろんあり、プロジェクトに合わせて）
Seleniumでテスト
データ戦略

Readの方がデータが複雑になりがち
アプリで入れた方が簡単な場合も多い
データのBkはとっておいて復元可能にしておく
データが不変なので同時に実行しても問題ない
Seleniumでテスト
データ戦略
R W

時間に関するもの
→仕様でてスタビリティを確保しておくことが大事
Seleniumでテスト
例えば今日から5日間とか
可変にできる仕様にしておくとデータの作り直しがいらない
画面表示時にデフォルトで今日から5日になるように入れればOK
→

Selenium.StandardControls
public class 魚一覧 : PageBase
{
LabelDriver Label_名前 => ByText("label", "名前").Wait();
LabelDriver Label_網 => ByText("label", "綱").Wait();
LabelDriver Label_目 => ByText("label", "目").Wait();
LabelDriver Label_科 => ByText("label", "科").Wait();
LabelDriver Label_属 => ByText("label", "属").Wait();
LabelDriver Label_星 => ByText("label", "星").Wait();
public ButtonDriver 検索 => ByText("検索").Wait();
public ButtonDriver 新規登録 => ByText("新規登録").Wait();
public TextBoxDriver 名前 => Label_名前.FindNext(By.TagName("input")).Wait();
public TextBoxDriver 網 => Label_網.FindNext(By.TagName("input")).Wait();
public TextBoxDriver 目 => Label_目.FindNext(By.TagName("input")).Wait();
public TextBoxDriver 科 => Label_科.FindNext(By.TagName("input")).Wait();
public TextBoxDriver 属 => Label_属.FindNext(By.TagName("input")).Wait();
public TextBoxDriver 星 => Label_星.FindNext(By.TagName("input")).Wait();
public ItemsControlDriver<魚一覧のリスト一行> テーブル => ByTagName("tbody").Wait();
public 魚一覧(IWebDriver driver) : base(driver) { }
}
特定と待ち

public class 魚一覧のリスト一行 : ComponentBase
{
public IWebElement 名前 => ByXPath("td[1]").Wait().Find();
public IWebElement 網 => ByXPath("td[2]").Wait().Find();
public IWebElement 目 => ByXPath("td[3]").Wait().Find();
public IWebElement 科 => ByXPath("td[4]").Wait().Find();
public IWebElement 属 => ByXPath("td[5]").Wait().Find();
public IWebElement 生息環境 => ByXPath("td[6]").Wait().Find();
public IWebElement 食性 => ByXPath("td[7]").Wait().Find();
public IWebElement 星 => ByXPath("td[8]").Wait().Find();
public ButtonDriver 編集 => ByXPath("td[9]").ByTagName("button").Wait();
public 魚一覧のリスト一行(IWebElement element) : base(element) { }
public static implicit operator 魚一覧のリスト一行(ElementFinder finder) => finder.Find<魚一覧のリスト一行>();
}
Selenium.StandardControls

デモ