testcafeで見えているelementを対象にテストしたい時

更新: 2020/12/31, 作成: 2020/11/22

みなさんこんにちは、かじりです。testcafeでinvisibleな要素(display none, visibility hidden)以外を対象にする方法を共有します

⭕️visibleな要素のみ

Selector().filterVisible()

❌invisibleな要素を含む

Selector()

reference

testcafe

解説

testcafe

The elements that do not have display: none or visibility: hidden CSS properties and have non-zero width and height are considered visible.

日本語にすると

display: noneまたはvisibility: hiddenのCSSプロパティを持たず、widthとheightが0ではない要素はvisibleとみなされます。

となるので、以下のいずれかを含む場合はSelector.filterVisible()では検出されないということになります。