"Selenium CSS Selector"의 두 판 사이의 차이
DB CAFE
(→CSS Selectors 속성) |
(→CSS Selectors 속성) |
||
1번째 줄: | 1번째 줄: | ||
− | == CSS Selectors 속성 == | + | == CSS Selectors 속성(JAVA) == |
− | + | * id, class, name, value | |
+ | |||
<source lang=html> | <source lang=html> | ||
<input type="text" id="fistname" name="first_name" class="myForm"> | <input type="text" id="fistname" name="first_name" class="myForm"> | ||
</source> | </source> | ||
− | |||
+ | * 일반적인 엘리먼트 속성 | ||
<source lang=html> | <source lang=html> | ||
− | css = | + | css = element_name[ |
</source> | </source> | ||
− | + | 예: | |
<source lang=html> | <source lang=html> | ||
WebElement firstName = driver.findElement(By.cssSelector("input[name='first_name']")); | WebElement firstName = driver.findElement(By.cssSelector("input[name='first_name']")); | ||
17번째 줄: | 18번째 줄: | ||
=== ID 속성 === | === ID 속성 === | ||
− | + | * # 은 ID | |
− | + | 예: | |
<source lang=html> | <source lang=html> | ||
driver.findElement(By.cssSelector("input#firstname")); | driver.findElement(By.cssSelector("input#firstname")); | ||
− | |||
//or | //or | ||
− | |||
driver.findElement(By.cssSelector("#firstname")); | driver.findElement(By.cssSelector("#firstname")); | ||
</source> | </source> | ||
=== Class 속성 === | === Class 속성 === | ||
− | + | * class 속성 => . 점을 사용 | |
− | |||
− | . 점을 사용 | ||
<source lang=html> | <source lang=html> | ||
driver.findElement(By.cssSelector("input.myForm")); | driver.findElement(By.cssSelector("input.myForm")); | ||
− | |||
//or | //or | ||
− | |||
driver.findElement(By.cssSelector(".myForm")); | driver.findElement(By.cssSelector(".myForm")); | ||
</source> | </source> | ||
− | + | ||
− | + | * 다중 속성 | |
− | + | ||
+ | AJAX 호출로 none” or “block”에 표기 | ||
<source lang=html> | <source lang=html> | ||
<div class="ajax_enabled" style="display:block"> | <div class="ajax_enabled" style="display:block"> | ||
</source> | </source> | ||
− | |||
− | + | 예: | |
<source lang=html> | <source lang=html> | ||
− | driver.findElement(By.cssSelector("div[class='ajax_enabled'] [style='display:block']") | + | driver.findElement(By.cssSelector("div[class='ajax_enabled'] [style='display:block']")) |
− | + | </source> | |
− | |||
− | |||
+ | HTML 예: | ||
<source lang=html> | <source lang=html> | ||
<div class="day past calendar-day-2017-02-13 calendar-dow-1 unavailable"> | <div class="day past calendar-day-2017-02-13 calendar-dow-1 unavailable"> | ||
60번째 줄: | 54번째 줄: | ||
<div class="day calendar-day-2017-02-16 calendar-dow-4"> | <div class="day calendar-day-2017-02-16 calendar-dow-4"> | ||
</source> | </source> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | * 4개의 div 모두 "calendar-day-"를 포함하지만 처음 두개 div에는 원하지 않는 "unavailable"도 포함되어 있습니다. | ||
<source lang=html> | <source lang=html> | ||
driver.findElement(By.cssSelector("div[class*=calendar-day-]:not([class*='unavailable'])"));" | driver.findElement(By.cssSelector("div[class*=calendar-day-]:not([class*='unavailable'])"));" | ||
+ | </source> | ||
− | + | * 자식 엘리먼트 | |
− | |||
<source lang=html> | <source lang=html> | ||
<div id="logo"> | <div id="logo"> | ||
76번째 줄: | 66번째 줄: | ||
</div> | </div> | ||
</source> | </source> | ||
− | + | ||
+ | * 이미지 태크 선택 | ||
<source lang=html> | <source lang=html> | ||
driver.findElement(By.cssSelector("div#logo img")); | driver.findElement(By.cssSelector("div#logo img")); | ||
</source> | </source> | ||
− | + | ||
− | + | * 다중 자식 엘리먼트 | |
+ | |||
+ | 리스트 엘리먼트와 같은 동일한 상위 엘리먼트 내에 여러개의 하위 엘리먼트 가있는 경우 | ||
+ | |||
<source lang=html> | <source lang=html> | ||
<ul id="fruit"> | <ul id="fruit"> | ||
89번째 줄: | 83번째 줄: | ||
<li>Banana</li> | <li>Banana</li> | ||
</ul> | </ul> | ||
− | + | </source> | |
− | + | * 'Orange' 찾기 => nth-of-type 사용. | |
− | |||
+ | 예: | ||
<source lang=html> | <source lang=html> | ||
driver.findElement(By.cssSelector("ul#fruit li:nth-of-type(2)")); | driver.findElement(By.cssSelector("ul#fruit li:nth-of-type(2)")); | ||
</source> | </source> | ||
− | + | * 'Banana' 찾기 | |
− | |||
<source lang=html> | <source lang=html> | ||
driver.findElement(By.cssSelector("ul#fruit li:last-child")); | driver.findElement(By.cssSelector("ul#fruit li:last-child")); | ||
</source> | </source> | ||
− | + | * 자동으로 생성되는 ID 인경우 | |
− | + | => 공통으로 존재하는 'random' 문자열이 존재 | |
− | |||
− | |||
<source lang=html> | <source lang=html> | ||
<div id="123_randomId"> | <div id="123_randomId"> | ||
112번째 줄: | 103번째 줄: | ||
<div id="123_pattern_randomId"> | <div id="123_pattern_randomId"> | ||
</source> | </source> | ||
− | + | ||
− | + | ** 첫번째 div element를 선택 하려면 ^= 를 사용 (~로 시작하는것) | |
<source lang=html> | <source lang=html> | ||
− | driver.findElement(By.cssSelector("div[id^='123']") | + | driver.findElement(By.cssSelector("div[id^='123']")); |
</source> | </source> | ||
− | |||
− | + | ** 두번째 div element를 선택 하려면 $= 를 사용 (~로 끝나는것) | |
− | + | ||
<source lang=html> | <source lang=html> | ||
− | driver.findElement(By.cssSelector("div[id | + | driver.findElement(By.cssSelector("div[id$='456']")); |
</source> | </source> | ||
− | + | * 포함된 문자열 속성 | |
− | + | ==> *= 는 '포함하는 문자'의 의미 | |
+ | <source lang=html> | ||
+ | driver.findElement(By.cssSelector("div[id*='문자열패턴']")); | ||
+ | </source> | ||
+ | ==> contains을 사용해도 됨. | ||
<source lang=html> | <source lang=html> | ||
− | driver.findElement(By.cssSelector("div:contains(' | + | driver.findElement(By.cssSelector("div:contains('문자열패턴')")); |
</source> | </source> | ||
− |
2021년 5월 21일 (금) 11:34 판
thumb_up 추천메뉴 바로가기
- DBA { Oracle DBA 명령어 > DBA 초급 과정 > DBA 고급 과정 }
- 튜닝 { 오라클 튜닝 목록 }
- 모델링 { 데이터 모델링 가이드 }
1 CSS Selectors 속성(JAVA)[편집]
- id, class, name, value
<input type="text" id="fistname" name="first_name" class="myForm">
- 일반적인 엘리먼트 속성
css = element_name[='<value>']
예:
WebElement firstName = driver.findElement(By.cssSelector("input[name='first_name']"));
1.1 ID 속성[편집]
- # 은 ID
예:
driver.findElement(By.cssSelector("input#firstname"));
//or
driver.findElement(By.cssSelector("#firstname"));
1.2 Class 속성[편집]
- class 속성 => . 점을 사용
driver.findElement(By.cssSelector("input.myForm"));
//or
driver.findElement(By.cssSelector(".myForm"));
- 다중 속성
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'])"));"
- 자식 엘리먼트
<div id="logo">
<img src="./logo.png" />
</div>
- 이미지 태크 선택
driver.findElement(By.cssSelector("div#logo img"));
- 다중 자식 엘리먼트
리스트 엘리먼트와 같은 동일한 상위 엘리먼트 내에 여러개의 하위 엘리먼트 가있는 경우
<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']"));
- 포함된 문자열 속성
==> *= 는 '포함하는 문자'의 의미
driver.findElement(By.cssSelector("div[id*='문자열패턴']"));
==> contains을 사용해도 됨.
driver.findElement(By.cssSelector("div:contains('문자열패턴')"));