도전

html 요소를 하나만 선택하고 싶지만 할 수없는 경우 해결하고 싶습니다.

하는 방법

◆ Chrome을 시작하고 오른쪽의 설정 버튼을 클릭하여 북마크 툴바를 표시


◆ 아래 URL을 열고 파란색 "CasperJS Utils"버튼을 툴바로 드래그하십시오.
htp // // cs. 또는 sperjs. 오 rg / 엔 / ㅁ st / 모즈 ぇ s / ぃ 엔 츠치 ls. html # 어서 x-2


◆ HTML 요소를 선택하고 싶은 페이지로 이동한다.
　※　 이하, 예로서 이미 열어둔 Google Analytics 페이지를 사용한다


◆ 북마크 툴바로 드래그 한 CasperJS Utils를 클릭하십시오
※※ 클릭하는 것만으로 좋다.

◆ 선택하고 싶은 html 요소를 표시시킨다.
※※이하, 예로서 아래 화면의 커서가 쓰여져 있는 체크 박스를 선택시키고 싶다고 한다


◆ 체크 박스에 커서를 맞추고 오른쪽 클릭 → 「요소 검증」을 클릭합니다

◆ Chrome 개발자 도구가 시작되고 선택한 요소의 부분이 파란색으로 표시됩니다.


◆ 개발자 도구 오른쪽의 톱니 바퀴 아이콘 왼쪽 아이콘을 클릭합니다.


◆ 콘솔이 표시되므로 아래 문장을 입력하고 Enter 키를 누릅니다.__utils__.findAll('input[type="checkbox"][class="ACTION-toggle TARGET-view"]')

◆ 복수의 요소가 나왔다(이번은 4개).


◆ 이 중에서 특정 요소를 선택한다. id 태그로 선별하면 좋을 것 같은 느낌이지만, 이 id 태그는 아무래도 페이지가 로드될 때마다 동적으로 숫자가 변화하는 것 같기 때문에 사용할 수 없다. 따라서 요소를 식별하는 데 사용할 수있는 속성을 선택합니다.
개발자 도구의 오른쪽 창 Properties 탭을 클릭합니다.


◆ 맨 위 왼쪽 삼각형을 클릭하여 확장


◆ 전개한 부분을 찾아 가면, offsetParent의 값이 아무래도 체크 박스가 속하고 있는 다이얼로그인 것 같은 것을 알 수 있다. id도 고정과 같기 때문에, 여기를 지정해 주면 일의로 선택할 수 있을 것 같다.


◆ offsetParent의 값을 선택하기 위해 앞서 콘솔에 입력한 문장을 다음과 같이 다시 쓴다__utils__.findAll('div.ID-compareConceptSelector._GAn1 input[type="checkbox"][class="ACTION-toggle TARGET-view"]')
◆ 다시 작성한 문장을 콘솔에 입력하고 Enter 키를 누르십시오.


고유한 요소가 선택되었는지 확인합니다.

시험에 다음을 콘솔에 입력하여 확인란을 확인해 봅니다.__utils__.mouseEvent('click', 'div.ID-compareConceptSelector._GAn1 input[type="checkbox"][class="ACTION-toggle TARGET-view"]')


확인할 수 있었다.

CasperJS로 클릭 전이시킬 경우는 문법을 바꿀 필요도 있지만, 특정 요소를 지정할 때 비교적 쉽게 할 수 있으므로 시험할 가치가 있습니다.

불명점이 있으면 코멘트란까지.