2024년 10월 16일 (수) 23:44에 Devcafe님의 편집

2024-10-16T23:44:30Z

← 이전 판		2024년 10월 17일 (목) 08:44 판
1번째 줄:		1번째 줄:

	== CSS Selectors 속성( in JAVA) ==		== CSS Selectors 속성( in JAVA) ==
	{{틀:~~고지 상자~~		{{틀:고지상자
	\|내용= HTML 태그 id, class, name, value		\|내용= HTML 태그 id, class, name, value
	}}		}}
25번째 줄:		25번째 줄:

	==== 일반 엘리먼트 속성 ====		==== 일반 엘리먼트 속성 ====
	{{틀:~~고지 상자~~		{{틀:고지상자
	\|내용= css = element_name[<attribute_name>='<value>']		\|내용= css = element_name[<attribute_name>='<value>']

34번째 줄:		34번째 줄:

	=== ID 속성(# 샵) ===		=== ID 속성(# 샵) ===
	{{틀:~~고지 상자~~		{{틀:고지상자
	\|내용= '''"#"''' 은 ID		\|내용= '''"#"''' 은 ID

45번째 줄:		45번째 줄:

	=== Class 속성( . 점) ===		=== Class 속성( . 점) ===
	{{틀:~~고지 상자~~		{{틀:고지상자
	\|내용= class 속성은 "." 점을 사용		\|내용= class 속성은 "." 점을 사용

Devcafe: 새 문서: == CSS Selectors 속성( in JAVA) == {{틀:고지 상자 |내용= HTML 태그 id, class, name, value }} # 적절한 ID 나 이름이 없는 경우 CSS Selector 를 선택하는게 좋다 # Selector 는 트리의 요소와 일치하는 패턴이며 XML 문서에서 노드를 선택하는 데 사용할 수있는 여러 기술 중 하나 === " > " 의 의미 === # CSS에서 ">"는...

2024-10-14T17:09:15Z

새 문서: == CSS Selectors 속성( in JAVA) == {{틀:고지 상자 |내용= HTML 태그 id, class, name, value }} <source lang=html> <input type="text" id="fistname" name="first_name" class="myForm"> </source> # 적절한 ID 나 이름이 없는 경우 CSS Selector 를 선택하는게 좋다 # Selector 는 트리의 요소와 일치하는 패턴이며 XML 문서에서 노드를 선택하는 데 사용할 수있는 여러 기술 중 하나 === " > " 의 의미 === # CSS에서 ">"는...

새 문서

== CSS Selectors 속성( in JAVA) ==
{{틀:고지 상자
|내용= HTML 태그 id, class, name, value
}}
<source lang=html>
<input type="text" id="fistname" name="first_name" class="myForm">
</source>
# 적절한 ID 나 이름이 없는 경우 CSS Selector 를 선택하는게 좋다
# Selector 는 트리의 요소와 일치하는 패턴이며 XML 문서에서 노드를 선택하는 데 사용할 수있는 여러 기술 중 하나

=== " > " 의 의미 ===
# CSS에서 ">"는 요소 간의 직접적인 자식 관계를 정의하는 데 사용
# 예시
<source lang=xml>
html> body
</source>
* body 태그는 html 태그의 직계 자식입니다.
==== 직계 자식이 아닌경우 (하위 하위) 공백으로 정의 ====
# 요소가 현재 요소의 자식 또는 자식의 자식이지만 CSS의 직접 자식이 아닌 경우 공백으로 정의됩니다.
<source lang=xml>
div img
</source>
* img 태그는 div 태그의 자손이지만 직계 자식은 아닙니다.

==== 일반 엘리먼트 속성 ====
{{틀:고지 상자
|내용= css = element_name[<attribute_name>='<value>']

}}
<source lang=java>
WebElement firstName = driver.findElement(By.cssSelector("input[name='first_name']"));
</source>

=== ID 속성(# 샵) ===
{{틀:고지 상자
|내용= '''"#"''' 은 ID

}}
<source lang=java>
driver.findElement(By.cssSelector("input#firstname"));
//or
driver.findElement(By.cssSelector("#firstname"));
</source>

=== Class 속성( . 점) ===
{{틀:고지 상자
|내용= class 속성은 "." 점을 사용

}}
<source lang=java>
driver.findElement(By.cssSelector("input.myForm"));
//or
driver.findElement(By.cssSelector(".myForm"));
</source>

=== 다중 속성 ===

AJAX 호출로 none” or “block”에 표기
<source lang=html>
<div class="ajax_enabled" style="display:block">
</source>

<source lang=java>
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>

HTML 예:
<source lang=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">
</source>

* 4개의 div 모두 "calendar-day-"를 포함하지만 처음 두개 div에는 원하지 않는 "unavailable"도 포함되어 있습니다.
<source lang=java>
driver.findElement(By.cssSelector("div[class*=calendar-day-]:not([class*='unavailable'])"));"
</source>

=== 자식 엘리먼트 ===
<source lang=html>
<div id="logo">
<img src="./logo.png" />
</div>
</source>

* 이미지 태크 선택
<source lang=java>
driver.findElement(By.cssSelector("div#logo img"));
</source>

=== 다중 자식 엘리먼트 ===

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

<source lang=html>
<ul id="fruit">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
</source>
* 'Orange' 찾기 => nth-of-type 사용.

<source lang=java>
driver.findElement(By.cssSelector("ul#fruit li:nth-of-type(2)"));
</source>

* 'Banana' 찾기
<source lang=java>
driver.findElement(By.cssSelector("ul#fruit li:last-child"));
</source>

* 자동으로 생성되는 ID 인경우
=> 공통으로 존재하는 'random' 문자열이 존재
<source lang=html>
<div id="123_randomId">
<div id="randomId_456">
<div id="123_pattern_randomId">
</source>

** 첫번째 div element를 선택 하려면 ^= 를 사용 (~로 시작하는것)
<source lang=java>
driver.findElement(By.cssSelector("div[id^='123']"));
</source>

** 두번째 div element를 선택 하려면 $= 를 사용 (~로 끝나는것)

<source lang=java>
driver.findElement(By.cssSelector("div[id$='456']"));
</source>

=== “^”, “$” , “*”. 문자열 속성 ===
==== “*” 는 '포함하는 문자' ====
<source lang=java>
driver.findElement(By.cssSelector("div[id*='문자열패턴']"));
</source>
<source lang=java>
driver.findElement(By.cssSelector("img[id*='n_U']"));
</source>
===== contains을 사용해도 됨. =====
<source lang=java>
driver.findElement(By.cssSelector("div:contains('문자열패턴')"));
</source>

==== “^” 는 '시작하는 문자' ====
<source lang=java>
driver.findElement(By.cssSelector("img[title^='En']"));
</source>
==== “$” 는 '끝나는 문자' ====
<source lang=java>
driver.findElement(By.cssSelector("img[title$='sh']"));
</source>

Selenium CSS Selector - 편집 역사

2024년 10월 16일 (수) 23:44에 Devcafe님의 편집