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 ( '바인딩')

매개 변수

매개 변수 세부
CSS 선택기 '.class-name' 과 같은 CSS 선택기는 클래스 이름의 기본 요소를 선택합니다.
신분증 이드의 돔 요소
모델 DOM 요소에 사용되는 모델
제본 특정 요소에 바인딩하는 데 사용되는 바인딩 이름

비고

CSS 선택기를 작성하는 방법?

CSS 선택기를 작성하는 가장 중요한 속성은 dom의 클래스 및 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 locator를 만들 수 있습니다 :
by.css("button[type='submit']") //or
by.css("button[id='signin-button']")

CSS 셀렉터 관련 예