エレメントに関する情報を取得するにはSelectorを使用します。
ページ要素を識別し、それらに対してアクション(クリックやドラッグなど)を実行するか、アサーションでその状態を確認することができます。
Selector( init [, options] )
init：選択するDOMノードを識別します。(型：関数、文字列、他のセレクタ、スナップショット、プロミス)
options：オプションを設定します。 (型：オブジェクト)
セレクタの基本的な指定方法は主に以下のようなものがあります。
【セレクタから要素をフィルタリングするメソッド】
| メソッド | 説明 |
|---|---|
| nth(index) | インデックスで要素を検索。index番目 |
| withText | コンテンツに指定されたテキストが含まれる要素を検索 正規表現の場合、正規表現に一致するもの |
| withExactText | 指定されたテキスト(完全一致)を持つ要素を検索 |
| withAttribute | 指定された属性または属性値を持つ要素を検索 属性名も値も正規表現が使える |
| filterVisible | 表示されている要素を選択 [display:none]や[visibility:hidden]、幅や高さが0のものは対象外 |
| filterHidden | 非表示の要素を選択。filterVisible()の反対 |
| filter | 指定されたCSSセレクターまたは述語に一致する要素を検索 |
【選択した要素に関連するDOM要素を検索するメソッド】
| メソッド | 説明 |
|---|---|
| find | 子要素 |
| parent | 親要素 |
| child | 直下 |
| sibling | 兄弟要素(同一階層) |
| nextSibling | 自身以降の兄弟要素 |
| prevSibling | 自身以前の兄弟要素 |
【要素が存在するかどうかを確認するプロパティ】
要素が一致するか、一致する要素の数を確認することができる
| プロパティ | タイプ | 説明 |
|---|---|---|
| exists | Boolean | 少なくとも1つの一致する要素が存在する場合(true) |
| count | Number | 一致する要素の数 |
| childElementCount | Number | 子要素の数 |
| childNodeCount | Number | 子ノードの数 |
| hasChildElements | Boolean | このノードに子HTML要素がある場合(true) |
| hasChildNodes | Boolean | このノードに子ノードがある場合(true) |
| nodeType | Number | ノードのタイプ |
| textContent | String | ノードとその子孫のテキストコンテンツ |
| メソッド | タイプ | 説明 |
|---|---|---|
| hasClass(className) | Boolean | 指定されたクラス名を持つ場合(true) |
【指定した要素ノード固有の情報】
| プロパティ | タイプ | 説明 |
|---|---|---|
| attributes | Object | 要素の属性{name: value,...}形式で返す。getAttributeメソッドを使用して、属性値にアクセスすることもできます。 |
| boundingClientRect | Object | 要素のサイズとビューポートに対するその位置。left、right、bottom、top、width、heightが取得できます。getBoundingClientRectPropertyメソッドを使用しこれらのプロパティにアクセスすることも可能。 |
| checked | Boolean | チェックボックスおよびラジオボタンの場合、現在の状態を取得。他の要素についてはundefindになります。 |
| classNames | Array of String | 要素のクラスリストを取得 |
| clientHeight | Number | 要素の内側の高さを取得。paddingは含むが、水平スクロールバーの高さ、境界線、border、marginは含まれない。 |
| clientWidth | Number | 要素の内側の幅を取得。paddingは含むが、垂直スクロールバーの幅、境界線、border、marginは含まれない。 |
| focused | Boolean | 要素がフォーカスされている場合true |
| id | String | 要素のidを取得 |
| innerText | String | 「レンダリングされた」要素のテキストコンテンツを取得。 |
| offsetHeight | Number | 垂直方向のパディングと境界線を含む要素の高さを取得。 |
| offsetWidth | Number | 垂直パディングとボーダーを含む要素の幅を取得。 |
| selected | Boolean |
<option>要素で現在選択されているものがあるか。 |
| selectedIndex | Number |
<option>要素で現在選択されているもの要素のインデックス。 |
| scrollHeight | Number | オーバーフローのために画面に表示されないコンテンツを含む、要素のコンテンツの高さを取得。 |
| scrollWidth | Number | 要素のコンテンツのピクセル単位の幅または要素自体の幅のいずれか大きい方を取得。 |
| scrollTop | Number | 要素のコンテンツが上にスクロールされるピクセル数を取得。 |
| scrollLeft | Number | 要素のコンテンツが左にスクロールされるピクセル数を取得。 |
| style | Object | 要素に適用されているCSSプロパティ：値を取得。getStylePropertyメソッドを使用してCSSプロパティにアクセスすることもできます。 |
| tagName | String | 要素のタグ名 |
| value | String | input要素のvalueを取得。 |
| visible | Boolean | 要素のvisible状態を取得。display:noneやvisibility:hiddenではなく、幅や高さも0でない場合(true)、それ以外はfalse |
| メソッド | タイプ | 説明 |
|---|---|---|
| getStyleProperty(propertyName) | Object |
propertyNameのCSSプロパティを取得。styleプロパティを使用して、CSSプロパティのハッシュテーブルにアクセスすることもできます。 |
| getAttribute(attributeName) | String | 「attributeName」属性の値を取得。attributesプロパティを使用して、属性のハッシュテーブルにアクセスすることもできます。 |
| hasAttribute(attributeName) | Boolean | 「attributeName」の属性が設定されているかどうか |
まずは公式を見てもらうのが一番ですが、さっと確認できるといいな〜と思いまとめてみました！
次回はキャプチャの撮り方について書いていきたいと思います。