CSS 위치 요약을 사용하여 Selenium에 대해 알아야 할 사항

이 기사는 Selenium의 CSS 위치 지정 요약 사용에 대한 관련 지식을 제공합니다. CSS 위치 지정도 그 가치가 있습니다. CSS 위치 지정은 모든 사람에게 도움이 되기를 바랍니다.

Selenium을 사용하여 요소를 배치할 때 대부분의 사람들은 CSS 위치 지정을 무시하는 경우가 많습니다. 실제로 CSS 위치 지정이 더 빠르고 구문이 더 간결합니다. 공통 기호:
#은 ID 선택기를 나타냅니다.

는 클래스 선택기를 나타냅니다.

>는 하위 요소, 레벨을 나타냅니다.

공백은 하위 요소도 나타내지만 모든 하위 하위 요소는 xpath와 동일합니다. 2. CSS: 속성 위치 지정

css는 요소의 id, class 및 label의 세 가지 일반 속성을 통해

如下是百度输入框的的html代码：
<input>

css에 직접 위치할 수 있습니다. # 기호를 사용하여 id 속성을 나타냅니다. 예: #kw
CSS를 사용합니다. .s_ipt

와 같은 클래스 속성: .s_ipt

css는 다음과 같은 식별자 없이 태그 이름을 직접 사용합니다. 또는 다른 속성을 통해 위치 지정 가능

以下是定位其它属性的格式[name=wd] [autocomplete='off'][maxlength='255']

4. CSS: 라벨

css는 태그와 속성의 조합을 통해 요소를 찾을 수 있음

input.s_ipt input#kw input[id='kw']

5. CSS: 계층적 관계

//form的id属性form#form>span>input
//form的class属性form.fm>span>input

6. CSS: 인덱스

css도 가능 위치 지정 하위 요소

Select控件第三个Opel
#select>select>option:nth-child(3)CheckBox第一个Volvo
#checkbox>input:nth-child(1)CheckBox第二个Saab
#checkbox>input:nth-child(4)RadioBox第二个Saab
#radio>input:nth-child(4)

7. CSS: 논리 연산

css는 논리 연산을 구현하고 동시에 두 속성을 일치시킬 수도 있습니다. 이는 xpath

[type='checkbox'][name='checkbox1']

와 다릅니다. 8. Baidu 검색 box example

바이두 검색 받기 CSS 위치 지정을 자세히 살펴보겠습니다

위치 지정 입력 상자

단일 속성 위치 지정

type selector
driver.find_element_by_css_selector('input')id 定位
driver.find_element_by_css_selector('#kw')class 定位
driver.find_element_by_css_selector('.s_ipt')其他属性定位
driver.find_element_by_css_selector('[name='wd']')driver.find_element_by_css_selector("[type='text']")

결합된 속성 위치 지정

id组合属性定位
driver.find_element_by_css_selector("input#kw")class组合属性定位
driver.find_element_by_css_selector("input.s_ipt")其他属性组合定位
driver.find_element_by_css_selector("input[name='wd']")仅有属性名，没有值也可以
driver.find_element_by_css_selector("input[name]")两个其他属性组合定位
driver.find_element_by_css_selector("[name='wd'][autocomplete='off']")

9 예시로 Baidu 홈페이지의 버튼 클릭

속성 값 방법

1>属性值由多个空格隔开，匹配其中一个值的方法
driver.find_element_by_css_selector("input[class~='btn']")2>匹配属性值为字符串开头的方法
driver.find_element_by_css_selector("input[class^='btn']")3>匹配属性值字符串结尾的方法
driver.find_element_by_css_selector("input[class$='s_btn']")

10.CSS와 Xpath 위치 지정의 차이점

속성 위치 지정

CSS

CSS는 요소, ID, 클래스, 라벨의 세 가지 일반 속성을 통해 직접 위치를 지정할 수 있습니다.

id="kw"는 다음과 같이 쓸 수 있습니다: #kw ② CSS는 .를 사용하여 다음과 같이 클래스 속성을 나타냅니다.
class="s_ipt"는 다음과 같이 쓸 수 있습니다. s_ipt

③.css는 다음과 같은 식별자 없이 직접 태그 이름을 사용합니다. input

Xpath

xpath도 전달할 수 있습니다. 요소의 ID, 이름 및 클래스 속성을 찾습니다.

① xpath를 사용하여 id 속성

드라이버를 통해 찾습니다. .find_element(By.XPATH, "//[@id='kw']")
②. xpath를 사용하여 이름 속성을 통해 찾습니다.
driver.find_element(By.XPATH,"//[@name='wd' ]")
③. 클래스 속성을 통해 위치를 찾으려면 xpath를 사용하세요
driver.find_element(By.']")

기타 속성

CSS
위 외에도 CSS는 다른 속성을 통해 위치를 지정할 수도 있습니다
①. CSS는 name 속성을 통해 위치 지정됩니다:
drivers.find_element(By.CSS_SELECTOR,"[name='wd']" )
② CSS는 autocomplete 속성을 통해 위치 지정됩니다:
driver.find_element(By.CSS_SELECTOR, "[autocomplete ='off']")
③.css는 type 속성을 통해 위치 지정됩니다:
drivers.find_element(By. CSS_SELECTOR, "[type ='text']")

Xpath

위 속성이 없어도 찾을 수 있습니다. 다른 속성을 통해

드라이버.find_element(By. CSS 페이지는 태그와 속성의 조합을 통해 요소를 찾을 수 있습니다.
①. CSS는 태그와 클래스 속성의 조합을 통해 요소를 찾습니다. Driver.find_element(By.CSS_SELECTOR, "input.s_ipt")
②. 태그와 ID 속성의 조합을 통한 CSS 위치 드라이버.find_element(By.CSS_SELECTOR, "input#kw")
③ CSS는 드라이버.find_element(By.CSS_SELECTOR, "input[id='kw']"를 찾습니다. )

Xpath
1. 같은 이름의 속성이 여러 개인 경우 태그로 필터링할 수 있습니다
①. xpath를 사용하여 드라이버를 찾습니다.find_element(By.XPATH, "//input[@autocomplete='off'] ")

②. 다른 속성을 통해 xpath 사용 id 속성을 통해 드라이버.find_element(By.XPATH,"//input[@id='kw']")를 찾습니다

③. xpath를 사용하여 드라이버.find_element(By. XPATH,"//name[@id ='wd']")

계층적 관계

CSS

예: //form[@id='form']/span/input 및 //form[@class= 'fm']/span/input

① .css는 계층적 관계를 통해 드라이버.find_element(By.CSS_SELECTOR, "form#form>span>input")를 찾습니다.

Xpath
1. 요소의 속성이 명확하지 않고 알 수 없는 경우 직접 찾으려면 먼저 상위 요소를 찾고 상위 요소를 찾은 다음 이를 찾을 수 있는 다음 레벨을 찾을 수 있습니다.
①. 상위 요소를 찾아서 입력을 찾습니다. 입력 상자 드라이버.find_element(By.XPATH,"//span [@id='s_kw_wrap']/input")

②. 입력 입력 상자 위치를 지정합니다.driver.find_element(By. [@id='form']/span/input")

Index

CSS
1. CSS는 인덱스 옵션:nth-child(1)
을 통해 하위 요소를 찾을 수도 있습니다. ① 첫 번째 하위 요소를 선택합니다. (1)")
②. 두 번째 자식 요소를 선택합니다. drivers.find_element(By.CSS_SELECTOR,“select#nr>option:nth-child(2)”)
③. CSS_SELECTOR,"select#nr>option:nth-child(3)")

Xpath
1. 정렬을 통해 위치를 지정할 수 있습니다
① xpath를 사용하여 첫 번째 위치를 찾습니다.driver.find_element(By.XPATH,"// select [@id='nr']/option[1]")
②. xpath를 사용하여 두 번째 드라이버를 찾습니다.find_element(By.XPATH,"//select[@id='nr']/option[2] " )
③. xpath를 사용하여 세 번째 드라이버를 찾습니다.find_element(By. .CSS_SELECTOR,"input:contains('kw')")

Xpath

1. xpath의 강력한 퍼지 매칭

2. by_partial_link, 퍼지 매칭 포지셔닝
drivers.find_element(By.XPATH,"//*[contains(text (),'hao123')]")

11. 요약

자동화된 웹 테스트 위치 지정 페이지 요소를 위한 두 가지 주요 XPATH 및 CSS 위치 지정 방법 Python+Selenium 테스트
XPATH 위치 지정과 CSS 위치 지정은 매우 유사하며 XPATH 기능이 더 강력하지만 CSS 위치 지정 방법이 더 빠르지만 일부 브라우저는 CSS 위치 지정을 지원하지 않으며 일반적으로 xpath 위치 지정을 사용하는 것이 더 일반적입니다. 자동화된 테스트 중 CSS보다

(동영상 공유 학습:

css 동영상 튜토리얼

)

위 내용은 CSS 위치 요약을 사용하여 Selenium에 대해 알아야 할 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!