파이썬 웹 자동화 - 셀레늄 활용을 위한 CSS 선택자

여는 글

CSS 선택자는 셀레늄을 통해 홈페이지의 특정 구성요소를 선택하는데 유용하게 사용됩니다.

 

사실 CSS 말고도 ID, 클래스, 태그 등등 여러가지 사용방법이 있지만 결국은 CSS_Selector가 범용적으로 사용 가능하므로 CSS_Selector를 활용하는 방법의 하위호환이나 다름없다고 생각합니다.

 

저는 특히 값/인자를 통해 찾는 방법과 속성 간 관계를 이용하여 선택하는 방법을 개인적으로 선호하는 편인데요. 상위 태그 1~2개만 특수하게 지정해도 원하는 대로 선택이 가능해져서 꽤나 편리하더라구요.

 

 

기본

1. 전체 선택자 : ‘*’
2. 태그를 통해 선택하기 : 태그 // 태그명만 그대로 사용하라는 의미이다.
3. 속성(Attribute)을 통해 선택하기
   • 클래스 : 태그.클래스명
   • 아이디 : #아이디
   • 그 외 속성 : 태그[속성] // '값’유무와 무관하게 속성의 존재여부만 판단
4. 값(Value) / 인자(Argument) : 태그[속성 : ‘값’] // 셀레늄에서 특정 컨텐츠를 선택할때 가장 많이 사용하게 될 방법이므로 필히 익혀두어야 한다.

 

응용 - 값을 구체적으로 설정하여 선택하는 방법

1. 단어단위 구분
   • 값이 정확히 일치하는 속성 선택 : 속성=‘값’
   • 앞뒤 빈칸으로 구분된 특정 '값’을 지닌 속성 찾기 : 속성~=‘값’
     • 예시) [title~=‘flower’]
     • 해 당 : title=“flower”, title=“summer flower”, title=“flower new”
     • 미해당 : title=“my-flower”, title=“flowers” (앞뒤 빈칸 부재)
   • 빈칸 혹은 하이픈으로 구분된 특정 '값’으로 시작하는 속성 찾기 : 속성|=‘값’
     • 예시) [title|=‘flower’]
     • 해 당 : title=“flower”, title=“flower summer”, title=“flower-new”
     • 미해당 : title=“my-flower”, title=“flowers”
2. 글자단위 구분(와일드카드 기능)
   • 특정 글자를 포함하는 값 선택 : 속성*=‘값’
   • 특정 글자로 시작하는 값 선택 : 속성^=‘값’
   • 특정 글자로 끝나는 값 선택 : 속성$=‘값’

 

 

응용 - 속성 간 관계를 이용하여 선택

CSS를 통해 요소를 선택할 경우, 해당 요소를 다른 요소와 구분지어 선택하기 위해서는 이러한 방법이 필수적이다(매우 중요한 내용).

728x90

 

관계무관 - 속성1의 구성요소와 속성2의 구성요소를 모두 선택 : 속성1, 속성2

[p태그 br태그 모두 선택] p, br

 

 

상하위 - 속성1의 자손인 속성2 태그 선택(1차 자손이 아니어도 무방) : 속성1 속성2

[본문에 있는 a태그를 선택하는 경우] : body a

 

 

상하위 – 속성1의 1차 자손인 속성2를 선택 : 속성1 > 속성2

[바로 위의 태그가 div인 img만 선택] div > img

 

 

병렬/수평 - 코드 순서상 속성1 바로 다음 줄에 나오는 속성2 선택 : 속성1 + 속성2

[ul 이후 나오는 p를 딱 한번만 선택(목록 1번만 선택]] ul + p

 

 

병렬/수평 – 코드 순서상 속성1 다음에 나오는 모든 속성2를 선택 : 속성1 ~ 속성2

[ul 이후 나오는 모든 p를 선택(목록 1~n 번 모두 선택]] ul + p