행위

Selenium CSS Selector

DB CAFE

1 CSS Selectors 속성( in JAVA)

android HTML 태그 id, class, name, value


<input type="text" id="fistname" name="first_name" class="myForm">
  1. 적절한 ID 나 이름이 없는 경우 CSS Selector 를 선택하는게 좋다
  2. Selector 는 트리의 요소와 일치하는 패턴이며 XML 문서에서 노드를 선택하는 데 사용할 수있는 여러 기술 중 하나

1.1 " > " 의 의미

  1. CSS에서 ">"는 요소 간의 직접적인 자식 관계를 정의하는 데 사용
  2. 예시
html> body
  • body 태그는 html 태그의 직계 자식입니다.

1.1.1 직계 자식이 아닌경우 (하위 하위) 공백으로 정의

  1. 요소가 현재 요소의 자식 또는 자식의 자식이지만 CSS의 직접 자식이 아닌 경우 공백으로 정의됩니다.
div img
  • img 태그는 div 태그의 자손이지만 직계 자식은 아닙니다.

1.1.2 일반 엘리먼트 속성

android css = element_name[='<value>']


WebElement firstName = driver.findElement(By.cssSelector("input[name='first_name']"));

1.2 ID 속성(# 샵)

android "#" 은 ID


driver.findElement(By.cssSelector("input#firstname"));
//or
driver.findElement(By.cssSelector("#firstname"));

1.3 Class 속성( . 점)

android class 속성은 "." 점을 사용


driver.findElement(By.cssSelector("input.myForm"));
//or
driver.findElement(By.cssSelector(".myForm"));

1.4 다중 속성

AJAX 호출로 none” or “block”에 표기

<div class="ajax_enabled" style="display:block">
driver.findElement(By.cssSelector("div[class='ajax_enabled'] [style='display:block']"))
driver.findElement(By.cssSelector("img[title='English'][alt='United States']"))

HTML 예:

<div class="day past calendar-day-2017-02-13 calendar-dow-1 unavailable">
<div class="day today calendar-day-2017-02-14 calendar-dow-2 unavailable">
<div class="day calendar-day-2017-02-15 calendar-dow-3">
<div class="day calendar-day-2017-02-16 calendar-dow-4">
  • 4개의 div 모두 "calendar-day-"를 포함하지만 처음 두개 div에는 원하지 않는 "unavailable"도 포함되어 있습니다.
driver.findElement(By.cssSelector("div[class*=calendar-day-]:not([class*='unavailable'])"));"

1.5 자식 엘리먼트

<div id="logo">
    <img src="./logo.png" />
</div>
  • 이미지 태크 선택
driver.findElement(By.cssSelector("div#logo img"));


1.6 다중 자식 엘리먼트

리스트 엘리먼트와 같은 동일한 상위 엘리먼트 내에 여러개의 하위 엘리먼트 가있는 경우

<ul id="fruit">
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>
  • 'Orange' 찾기 => nth-of-type 사용.
driver.findElement(By.cssSelector("ul#fruit li:nth-of-type(2)"));
  • 'Banana' 찾기
driver.findElement(By.cssSelector("ul#fruit li:last-child"));
  • 자동으로 생성되는 ID 인경우

=> 공통으로 존재하는 'random' 문자열이 존재

<div id="123_randomId">
<div id="randomId_456">
<div id="123_pattern_randomId">
    • 첫번째 div element를 선택 하려면 ^= 를 사용 (~로 시작하는것)
driver.findElement(By.cssSelector("div[id^='123']"));
    • 두번째 div element를 선택 하려면 $= 를 사용 (~로 끝나는것)
driver.findElement(By.cssSelector("div[id$='456']"));

1.7 “^”, “$” , “*”. 문자열 속성

1.7.1 “*” 는 '포함하는 문자'

driver.findElement(By.cssSelector("div[id*='문자열패턴']"));
driver.findElement(By.cssSelector("img[id*='n_U']"));
1.7.1.1 contains을 사용해도 됨.
driver.findElement(By.cssSelector("div:contains('문자열패턴')"));

1.7.2 “^” 는 '시작하는 문자'

driver.findElement(By.cssSelector("img[title^='En']"));

1.7.3 “$” 는 '끝나는 문자'

driver.findElement(By.cssSelector("img[title$='sh']"));