【C#】bUnitでHTMLタグのidを指定して対象を取得する方法

初めに

Blazor用の単体テストフレームワークのbUnitを使用した際に気になったことを備忘をかねてまとめます。

追記 2024/10/18
bUnit公式のメソッド仕様の欄にIDを用いた絞り込み方法について記載がありました。
解決方法の部分を修正しました。
@albireo 様。教えてくださりありがとうございます。

問題

bUnitの公式チュートリアルを見てみるとテスト対象のテキストを取得する際には<p>タグでのみ絞り込みを行っています。

実際のプロジェクトでは同じHTMLタグを複数回使用するケースが普通であるためIDを指定して要素を取得する方法を調査しました。

解決方法

こちらにあるようにcssSelectorで指定することができます。

[TestMethod]
public void OnButtonClick_InitialState_ByValue()
{
    // Arrange
    var calc = Render(@<Calculator />);
    var ele = calc.Find("div#test");

    // Assert
    Assert.AreEqual("", ele.TextContent);
    }

上記の例ではdivタグのIDがtestの要素を取得しています。
もちろんタグとIDを修正すれば別の要素の指定も可能です。

LINQを使用する方法(旧バージョン)

(上に空行が必要)

puts 'Hello, World'

IDはプロパティとして保持しているためLINQを使用して取得可能です。

[TestMethod]
public void OnButtonClick_InitialState_ByValue()
{
    // Arrange
    var calc = Render(@<Calculator />);
    var ele = calc.FindAll("div", false).First(o => o.Id == "test");

    // Assert
    Assert.AreEqual("", ele.TextContent);
    }

div要素のうちIDが「test」のものを指定取得しています。First()メソッドを使用している理由はそのままだとIEnumerableクラスの値が返ってくるため先頭１つを指定しています。

FindAll()メソッドでdivタグ絞り込まなくても、IDで一意に取得できます。ただしこちらのほうが、取得した要素の種類をコード上から読み取れイメージがしやすくなります。

おわりに

bUnitのポテンシャルが徐々に見えてきた気がします。

参考