Looking for protractor Answers? Try Ask4KnowledgeBase
Looking for protractor Keywords? Try Ask4Keywords

protractorCSSセレクタ


構文

  • by.css( 'css-selector')
  • by.id( 'id')
  • by.model( 'model')
  • by.binding( 'binding')

パラメーター

パラメータ詳細
CSSセレクター '.class-name'ようなcssセレクタは、クラス名の底にある要素を選択します。
id dom要素のID
モデル DOM要素に使用されるモデル
拘束特定の要素にバインドするために使用されるバインディングの名前

備考

cssセレクタを書くには?

CSSセレクタを書くための最も重要な属性はdomのclassとidです。インスタンスの場合、html domは以下のように見えます:

  <form class="form-signin">
      <input type="text" id="email" class="form-control" placeholder="Email">
      <input type="password" id="password" class="form-control" placeholder="Password">
      <button class="btn btn-block" id="signin-button" type="submit">Sign in</button>
  </form>

次に、電子メール入力フィールドを選択するには、次のようにcssセレクタを記述します。

  1. クラス名の使用 :CSSセレクターのクラス名は特殊文字(ドット)で始まります。そのためのCSSセレクターは、 .form-controlようになります。

    by.css('.form-control')

form-controlクラスは両方の入力要素で共有されるので、ロケータの二重性の懸念が生じます。したがって、このような状況では、idが利用可能な場合は、常にクラス名の代わりにidを使用する方がよいでしょう。

  1. IDの使用 :cssセレクターのidは、特殊文字#(ハッシュ)で始まります。したがって、電子メール入力要素のIDを使用するCSSセレクタは、次のように記述されます。

    by.css('#email')

  2. 複数のクラス名の使用 :dom要素に複数のクラスがある場合は、クラスの組み合わせでcssセレクタとして使用できます。たとえば、DOM要素が次のような場合

<input class="username-class form-control">
// css selector using multiple classes
by.css('.username-class.form-control')
  1. 他の属性でのタグ名の使用 :タグ名やその他の属性を使用してCSSセレクターを記述する一般的な式は、 tagname[attribute-type='attribute-vallue']です。したがって、式の後に、サインインボタンのCSSロケータを次のように作成できます。
by.css("button[type='submit']") //or
by.css("button[id='signin-button']")

CSSセレクタ 関連する例