"Selenium CSS Selector"의 두 판 사이의 차이
DB CAFE
(→CSS Selectors 속성( in JAVA)) |
(→Class 속성( . 점)) |
||
(같은 사용자의 중간 판 22개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
− | + | ||
− | {{틀: | + | == CSS Selectors 속성( in JAVA) == |
− | + | {{틀:고지 상자 | |
+ | |내용= HTML 태그 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> | ||
+ | # 적절한 ID 나 이름이 없는 경우 CSS Selector 를 선택하는게 좋다 | ||
+ | # Selector 는 트리의 요소와 일치하는 패턴이며 XML 문서에서 노드를 선택하는 데 사용할 수있는 여러 기술 중 하나 | ||
− | === | + | === " > " 의 의미 === |
− | <source lang=html> | + | # CSS에서 ">"는 요소 간의 직접적인 자식 관계를 정의하는 데 사용 |
− | + | # 예시 | |
+ | <source lang=xml> | ||
+ | html> body | ||
+ | </source> | ||
+ | * body 태그는 html 태그의 직계 자식입니다. | ||
+ | ==== 직계 자식이 아닌경우 (하위 하위) 공백으로 정의 ==== | ||
+ | # 요소가 현재 요소의 자식 또는 자식의 자식이지만 CSS의 직접 자식이 아닌 경우 공백으로 정의됩니다. | ||
+ | <source lang=xml> | ||
+ | div img | ||
</source> | </source> | ||
+ | * img 태그는 div 태그의 자손이지만 직계 자식은 아닙니다. | ||
− | <source lang= | + | ==== 일반 엘리먼트 속성 ==== |
+ | {{틀:고지 상자 | ||
+ | |내용= css = element_name[ | ||
+ | |||
+ | }} | ||
+ | <source lang=java> | ||
WebElement firstName = driver.findElement(By.cssSelector("input[name='first_name']")); | WebElement firstName = driver.findElement(By.cssSelector("input[name='first_name']")); | ||
</source> | </source> | ||
− | === ID 속성 === | + | === ID 속성(# 샵) === |
+ | {{틀:고지 상자 | ||
+ | |내용= '''"#"''' 은 ID | ||
− | + | }} | |
− | + | <source lang=java> | |
− | <source lang= | ||
driver.findElement(By.cssSelector("input#firstname")); | driver.findElement(By.cssSelector("input#firstname")); | ||
//or | //or | ||
26번째 줄: | 44번째 줄: | ||
</source> | </source> | ||
− | === Class 속성 === | + | === Class 속성( . 점) === |
− | + | {{틀:고지 상자 | |
− | <source lang= | + | |내용= class 속성은 "." 점을 사용 |
+ | |||
+ | }} | ||
+ | <source lang=java> | ||
driver.findElement(By.cssSelector("input.myForm")); | driver.findElement(By.cssSelector("input.myForm")); | ||
//or | //or | ||
41번째 줄: | 62번째 줄: | ||
</source> | </source> | ||
− | <source lang= | + | <source lang=java> |
driver.findElement(By.cssSelector("div[class='ajax_enabled'] [style='display:block']")) | driver.findElement(By.cssSelector("div[class='ajax_enabled'] [style='display:block']")) | ||
+ | </source> | ||
+ | <source lang=java> | ||
+ | driver.findElement(By.cssSelector("img[title='English'][alt='United States']")) | ||
</source> | </source> | ||
54번째 줄: | 78번째 줄: | ||
* 4개의 div 모두 "calendar-day-"를 포함하지만 처음 두개 div에는 원하지 않는 "unavailable"도 포함되어 있습니다. | * 4개의 div 모두 "calendar-day-"를 포함하지만 처음 두개 div에는 원하지 않는 "unavailable"도 포함되어 있습니다. | ||
− | <source lang= | + | <source lang=java> |
driver.findElement(By.cssSelector("div[class*=calendar-day-]:not([class*='unavailable'])"));" | driver.findElement(By.cssSelector("div[class*=calendar-day-]:not([class*='unavailable'])"));" | ||
</source> | </source> | ||
66번째 줄: | 90번째 줄: | ||
* 이미지 태크 선택 | * 이미지 태크 선택 | ||
− | <source lang= | + | <source lang=java> |
driver.findElement(By.cssSelector("div#logo img")); | driver.findElement(By.cssSelector("div#logo img")); | ||
</source> | </source> | ||
84번째 줄: | 108번째 줄: | ||
* 'Orange' 찾기 => nth-of-type 사용. | * 'Orange' 찾기 => nth-of-type 사용. | ||
− | <source lang= | + | <source lang=java> |
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' 찾기 | * 'Banana' 찾기 | ||
− | <source lang= | + | <source lang=java> |
driver.findElement(By.cssSelector("ul#fruit li:last-child")); | driver.findElement(By.cssSelector("ul#fruit li:last-child")); | ||
</source> | </source> | ||
102번째 줄: | 126번째 줄: | ||
** 첫번째 div element를 선택 하려면 ^= 를 사용 (~로 시작하는것) | ** 첫번째 div element를 선택 하려면 ^= 를 사용 (~로 시작하는것) | ||
− | <source lang= | + | <source lang=java> |
driver.findElement(By.cssSelector("div[id^='123']")); | driver.findElement(By.cssSelector("div[id^='123']")); | ||
</source> | </source> | ||
108번째 줄: | 132번째 줄: | ||
** 두번째 div element를 선택 하려면 $= 를 사용 (~로 끝나는것) | ** 두번째 div element를 선택 하려면 $= 를 사용 (~로 끝나는것) | ||
− | <source lang= | + | <source lang=java> |
driver.findElement(By.cssSelector("div[id$='456']")); | driver.findElement(By.cssSelector("div[id$='456']")); | ||
</source> | </source> | ||
− | === | + | === “^”, “$” , “*”. 문자열 속성 === |
− | == | + | ==== “*” 는 '포함하는 문자' ==== |
− | <source lang= | + | <source lang=java> |
driver.findElement(By.cssSelector("div[id*='문자열패턴']")); | driver.findElement(By.cssSelector("div[id*='문자열패턴']")); | ||
</source> | </source> | ||
− | ==> contains을 사용해도 됨. | + | <source lang=java> |
− | <source lang= | + | driver.findElement(By.cssSelector("img[id*='n_U']")); |
+ | </source> | ||
+ | ===== contains을 사용해도 됨. ===== | ||
+ | <source lang=java> | ||
driver.findElement(By.cssSelector("div:contains('문자열패턴')")); | driver.findElement(By.cssSelector("div:contains('문자열패턴')")); | ||
</source> | </source> | ||
+ | |||
+ | ==== “^” 는 '시작하는 문자' ==== | ||
+ | <source lang=java> | ||
+ | driver.findElement(By.cssSelector("img[title^='En']")); | ||
+ | </source> | ||
+ | ==== “$” 는 '끝나는 문자' ==== | ||
+ | <source lang=java> | ||
+ | driver.findElement(By.cssSelector("img[title$='sh']")); | ||
+ | </source> |
2021년 6월 4일 (금) 14:20 기준 최신판
thumb_up 추천메뉴 바로가기
- DBA { Oracle DBA 명령어 > DBA 초급 과정 > DBA 고급 과정 }
- 튜닝 { 오라클 튜닝 목록 }
- 모델링 { 데이터 모델링 가이드 }
목차
1 CSS Selectors 속성( in JAVA)[편집]
android HTML 태그 id, class, name, value
<input type="text" id="fistname" name="first_name" class="myForm">
- 적절한 ID 나 이름이 없는 경우 CSS Selector 를 선택하는게 좋다
- Selector 는 트리의 요소와 일치하는 패턴이며 XML 문서에서 노드를 선택하는 데 사용할 수있는 여러 기술 중 하나
1.1 " > " 의 의미[편집]
- CSS에서 ">"는 요소 간의 직접적인 자식 관계를 정의하는 데 사용
- 예시
html> body
- body 태그는 html 태그의 직계 자식입니다.
1.1.1 직계 자식이 아닌경우 (하위 하위) 공백으로 정의[편집]
- 요소가 현재 요소의 자식 또는 자식의 자식이지만 CSS의 직접 자식이 아닌 경우 공백으로 정의됩니다.
div img
- img 태그는 div 태그의 자손이지만 직계 자식은 아닙니다.
1.1.2 일반 엘리먼트 속성[편집]
android
css = element_name[
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']"));