"Selenium CSS Selector"의 두 판 사이의 차이

1.1 일반적인 엘리먼트 속성[편집]

css = element_name[='<value>']

예:

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

1.2 ID 속성[편집]

• # 은 ID

예:

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

1.3 Class 속성[편집]

• 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']"))

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 포함된 문자열 속성[편집]

==> *= 는 '포함하는 문자'의 의미

driver.findElement(By.cssSelector("div[id*='문자열패턴']"));

==> contains을 사용해도 됨.

driver.findElement(By.cssSelector("div:contains('문자열패턴')"));