TestCafe現在選択されているもの以外を選択したい!【sibling】

2 min読了の目安(約1800字TECH技術記事

概要

セレクトボックスで現在選択されているもの以外を選択したい!

というのが今回実装したいことでした。

テストシナリオに

セレクトボックスの選択を変更できる。

というテストシナリオがありました。

テスト対象のセレクトボックスがこちら


検証画面ではこのようになっています。


現在は勤務中が選択されているので、

await t.click("select")
          .child("option")
	  .withText("内定")

上記のコードのように勤務中以外の何かを1つ指定してやればいいか。(コード上では内定を指定)

と軽く考えていたのですが、
テストする状況は常に変動するので、
勤務中が選択されている場合もあれば、内定が選択されている場合もあります。

"現在選択されているもの以外を選択する"
という処理をしないと、テストが落ちる。正しくテストが書けていないことになります。

つまり何が言いたいのかと言うと、

内定となっているものを→内定に選択する場合が発生し、
変更できていないので、落ちる可能性があると言うことです。

結論

TestCafeが用意してくれているsiblingというオプションを使用します。

参考:sibling

sibling

siblingは兄弟要素を指定する時に重宝します。

今回実装したコードがこちら。

await t.click("select")
          .child("option")
          .withAttribute("selected", "selected")
          .sibling()

selectの子要素のoption
selected(選択されている)状態の兄弟要素をクリックするという処理です。

つまり、現在選択されているもの以外を選択となるわけです。

検証画面をもう一度確認すると


await t.click("select")
          .child("option")
          .withAttribute("selected", "selected")//勤務中

上記のコードの兄弟要素は、selectedされていないoption(勤務中以外)となる。

変更前に選択されているのがなんであろうと、それ以外を選んでくれるというテストが書けました。

ちなみに

await t.click("select")
          .child("option")
          .withAttribute("selected", "selected")
          .sibling(0)

のように、siblingの引数にインデックス番号を指定したりもできます。

まとめ

siblingを知る前までは、
一番被る可能性の低い"産休・育休中"を選択するようにするか?
いや、万が一、変更前の状況が"産休・育休中"ならテスト落ちる。どないしよ。。。

と葛藤していました。笑

無事実装できてよかったです!