Selenideのドキュメントを読んでみて

状態を確認する

要素の状態を確認するメソッド。要素がその状態になってくれるまで待ってくれる(デフォルト4秒)ので、非同期で変化する要素も良い感じに確認できる。

`$`("target").should(exist)
`$`("target").shouldNot(exist)

`$`("target").shouldBe(visible)
`$`("target").shouldNotBe(visible)

`$`("target").shouldHave(text("text"))
`$`("target").shouldNotHave(text("text"))

上記のメソッドは振る舞いとしては同じであり、Selenideの公式サイトでは以下のように説明されており、英語の文章として好ましいものを選択すると良さげ。

We recommend to choose the convenient alias so the line of code can be easily read like a common english phrase

https://selenide.org/documentation.html

existとvisible

existは要素が存在しているか、visibleは要素が表示されているかを確認できる。

存在しているかの確認なので、styleでvisibility: hiddenや、display: noneが指定されていてもexistは通過する。(visibleは通過しない)

visibility: hidden

<div class="target" style="visibility: hidden;">Hidden</div>

`$`(".target").should(exist)      // pass
`$`(".target").shouldBe(visible)  // not pass

display: none

<div class="target" style="display: none;">None</div>

`$`(".target").should(exist)      // pass
`$`(".target").shouldBe(visible)  // not pass

imgの確認

Condition.imageはimg要素が画像のロードに成功しているかを見てくれる。

<img class="exist-image" src="dog.png"/>
<img class="non-exist-image" src="non-image"/>

f:id:kentooooo:20210215004941p:plain

`$`(".exist-image").shouldBe(image)      // pass
`$`(".non-exist-image").shouldBe(image)  // not pass

styleの確認

`$`("target").shouldHave(cssValue("color","red"))

textとexactText

Condition.text()は文字列の部分一致、Condition.exactText()は文字列の完全一致を見てくれる。基本はexactTextの方を利用すると良さそう。

<p>ログインに成功しました</p>

`$`("p").shouldHave(text("ログイン"))                 // pass
`$`("p").shouldHave(exactText("ログインに成功しました")) // pass
`$`("p").shouldHave(exactText("ログイン"))            // not pass

複数の要素を一度にテストする

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
</ul>

`$$`("ul li").shouldHave(texts("aaa", "bbb", "ccc"))

By セレクター

Byを利用すると、cssSelectorでなく、 HTML要素の文字列や、name、id等で検索することができる。

`$`(byText("送信")).click()
`$`(byName("password")).setValue("inputPassword")

ドラッグアンドドロップ

`$`("from").dragAndDropTo("to")