행위

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

DB CAFE

(새 문서: == CSS Selectors 속성 == Let’s imagine we have a tag with the followi속성s [id, class, name, value] <source lang=html> <input type="text" id="fistname" name="first_name" class="...)
 
(→‎Class 속성( . 점))
 
(같은 사용자의 중간 판 31개는 보이지 않습니다)
1번째 줄: 1번째 줄:
−
== CSS Selectors 속성 ==
+
 
−
Let’s imagine we have a tag with the followi속성s [id, class, name, value]
+
== 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">
−
The generic way to locate elements 속성 is:
+
</source>
 +
# 적절한 ID 나 이름이 없는 경우 CSS Selector 를 선택하는게 좋다
 +
# Selector 는 트리의 요소와 일치하는 패턴이며 XML 문서에서 노드를 선택하는 데 사용할 수있는 여러 기술 중 하나
 +
 
 +
=== " > " 의 의미  ===
 +
# CSS에서 ">"는 요소 간의 직접적인 자식 관계를 정의하는 데 사용
 +
# 예시
 +
<source lang=xml>
 +
html> body
 +
</source>
 +
* body 태그는 html 태그의 직계 자식입니다.
 +
==== 직계 자식이 아닌경우 (하위 하위)  공백으로 정의 ====
 +
# 요소가 현재 요소의 자식 또는 자식의 자식이지만 CSS의 직접 자식이 아닌 경우 공백으로 정의됩니다.
 +
<source lang=xml>
 +
div img
 +
</source>
 +
* img 태그는 div 태그의 자손이지만 직계 자식은 아닙니다.
  
−
<source lang=html>
+
==== 일반 엘리먼트 속성 ====
−
css = element_nam속성_name>='<value>']
+
{{틀:고지 상자
 +
|내용= css = element_name[>='<value>']
  
−
Example:
+
}}
−
<source lang=html>
+
<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
  
−
In CSS, we can use # notation to select the 속성 of an element:
+
}}
−
 
+
<source lang=java>
−
Example:
 
−
<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 속성( . 점) ===
−
The same principle can be used to locate elements by their class 속성.
+
{{틀:고지 상자
 +
|내용= class 속성은 "." 점을 사용
  
−
. 점을 사용
+
}}
−
<source lang=html>
+
<source lang=java>
 
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>
−
Note: Take extra care when using the . notation as there could be many web elements on the HTML source with the same class 속성.
+
 
−
Multip속성s
+
=== 다중 속성 ===
−
Sometimes there is a need to be more specific with the selection criteria in order to locate the correct element.
+
 
 +
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>
−
The value of the display could either be “none” or “block” depending on the ajax call. In this situation, we have to locate the element by both class and style.
 
  
−
Example:
+
<source lang=java>
−
<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']")속성 NOT contain a specific value
+
</source>
−
In WebDriver, how do you find elements who속성 contain values which you don’t want to select? This CSS selector example shows how NOT to select by specif속성 value
+
<source lang=java>
−
 
+
driver.findElement(By.cssSelector("img[title='English'][alt='United States']"))
−
Suppose you have many elements which share the sa속성 a속성 value, but some of those elements have other variables appended to the value. e.g:
+
</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">
58번째 줄: 76번째 줄:
 
<div class="day calendar-day-2017-02-16 calendar-dow-4">
 
<div class="day calendar-day-2017-02-16 calendar-dow-4">
 
</source>
 
</source>
−
In the above snippet, we want to select an available day (i.e. the two last div elements)
 
−
 
−
As can be seen, all four divs contain “calendar-day-“ but the first two also contain “unavailable” which we don’t want.
 
−
 
−
The CSS selector for Not selecting the first two divs is
 
  
−
<source lang=html>
+
* 4개의 div 모두 "calendar-day-"를 포함하지만 처음 두개 div에는 원하지 않는 "unavailable"도 포함되어 있습니다.
 +
<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>
  
−
 
+
=== 자식 엘리먼트 ===
−
Locating Child Element
 
 
<source lang=html>
 
<source lang=html>
 
<div id="logo">
 
<div id="logo">
74번째 줄: 88번째 줄:
 
</div>
 
</div>
 
</source>
 
</source>
−
To locate the image tag, we use:
+
 
−
<source lang=html>
+
* 이미지 태크 선택
 +
<source lang=java>
 
driver.findElement(By.cssSelector("div#logo img"));
 
driver.findElement(By.cssSelector("div#logo img"));
 
</source>
 
</source>
  
−
Multiple Child Elements
+
 
−
There are occasions when there are multiple child elements within the same parent element such as list elements
+
=== 다중 자식 엘리먼트 ===
 +
 
 +
리스트 엘리먼트와 같은 동일한 상위 엘리먼트 내에 여러개의 하위 엘리먼트 가있는 경우
 +
 
 
<source lang=html>
 
<source lang=html>
 
<ul id="fruit">
 
<ul id="fruit">
87번째 줄: 105번째 줄:
 
     <li>Banana</li>
 
     <li>Banana</li>
 
</ul>
 
</ul>
−
As can be seen, the individual list elements don’t have any id associated with them. To locate the element with text ‘Orange’, we have to use nth-of-type.
+
</source>
 +
* 'Orange' 찾기 => nth-of-type 사용.
  
−
Example:
+
<source lang=java>
−
 
 
−
<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>
  
−
Likewise, to select the last child element, i.e. ‘Banana’, we use:
+
* 'Banana' 찾기
−
 
+
<source lang=java>
−
<source lang=html>
 
 
driver.findElement(By.cssSelector("ul#fruit li:last-child"));
 
driver.findElement(By.cssSelector("ul#fruit li:last-child"));
 
</source>
 
</source>
  
−
Dynamically Generated Ids
+
* 자동으로 생성되는 ID 인경우
−
We can use string matchers to locate elements with dynamically generated Ids.
+
=> 공통으로 존재하는 'random' 문자열이 존재
−
 
 
−
In this example, all the three div elements contain the word ‘random’.
 
 
<source lang=html>
 
<source lang=html>
 
<div id="123_randomId">
 
<div id="123_randomId">
110번째 줄: 124번째 줄:
 
<div id="123_pattern_randomId">
 
<div id="123_pattern_randomId">
 
</source>
 
</source>
−
속성 Starts with
+
 
−
To select the first div element, we would use ^= which means ‘starts with’:
+
** 첫번째 div element를 선택 하려면 ^= 를 사용 (~로 시작하는것)
−
<source lang=html>
+
<source lang=java>
−
driver.findElement(By.cssSelector("div[id^='123']")속성 Ends with
+
driver.findElement(By.cssSelector("div[id^='123']"));
 
</source>
 
</source>
−
To select the second div element, we would use $= which means ‘ends with’:
 
  
−
driver.findElement(By.cssSelector("div[id$='456']")속성 Contains
+
** 두번째 div element를 선택 하려면 $= 를 사용 (~로 끝나는것)  
−
To select the last div element we would use *= which means ‘sub-string’
+
 
−
<source lang=html>
+
<source lang=java>
−
driver.findElement(By.cssSelector("div[id*='_pattern_']"));
+
driver.findElement(By.cssSelector("div[id$='456']"));
 
</source>
 
</source>
  
−
We can also use the contains
+
===  “^”, “$” , “*”. 문자열 속성 ===
 +
==== “*” 는 '포함하는 문자' ====
 +
<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=html>
+
==== “^” 는 '시작하는 문자' ====
−
driver.findElement(By.cssSelector("div:contains('_pattern_')"));
+
<source lang=java>
−
</source>
+
driver.findElement(By.cssSelector("img[title^='En']"));
−
Further reading:
+
</source>
 +
==== “$” 는 '끝나는 문자' ====
 +
<source lang=java>
 +
driver.findElement(By.cssSelector("img[title$='sh']"));
 +
</source>

2021년 6월 4일 (금) 14:20 기준 최신판

thumb_up 추천메뉴 바로가기

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']"));
원본 주소 "http://dbcafe.co.kr/wiki/index.php?title=Selenium_CSS_Selector&oldid=6268"