CSS 선택기 Selenium

CSS 선택기란 무엇입니까?

CSS 선택기 Selenium HTML 태그, ID, 클래스 및 속성의 조합을 기반으로 요소를 식별하는 데 사용되는 문자열 패턴입니다. CSS 선택기로 찾기 Selenium 이전 방법보다 더 복잡하지만 고급 검색 방법 중 가장 일반적인 위치 찾기 전략입니다. Selenium ID나 이름이 없는 요소에도 액세스할 수 있기 때문입니다.

CSS 선택기 Selenium 형식은 다양하지만 가장 일반적인 형식에만 중점을 두겠습니다. 다양한 유형의 CSS 로케이터 Selenium IDE

• 태그 및 ID
• 태그 및 클래스
• 태그 및 속성
• 태그, 클래스 및 속성
• 내부 텍스트

이 전략을 사용할 때 우리는 항상 접두사를 붙입니다. Target 다음 예제에서 볼 수 있듯이 "css="가 있는 상자입니다.

태그 및 ID – CSS 선택기

다시 한번, 이 예에서 Facebook의 이메일 텍스트 상자를 사용할 것입니다. 기억하시겠지만, 이 텍스트 상자의 ID는 "이메일"이고, 우리는 이미 "ID로 찾기" 섹션에서 이 텍스트 상자에 접근했습니다. 이번에는 Selenium 동일한 요소에 액세스할 때 ID가 있는 CSS 선택기입니다.

통사론

css=tag#id

• tag = 액세스되는 요소의 HTML 태그
• # = 해시 기호. 이는 다음을 사용할 때 항상 존재해야 합니다. Selenium ID가 있는 CSS 선택기
• id = 액세스 중인 요소의 ID

ID 앞에는 항상 해시 기호(#)가 옵니다.

단계 1) 로 이동 www.facebook.com. Firebug를 사용하여 "이메일 또는 전화" 텍스트 상자를 검사합니다.

이 시점에서 HTML 태그가 "input"이고 ID가 "email"이라는 점에 유의하세요. 따라서 구문은 "css=input#email"이 됩니다.

단계 2) css=input#email”을 입력하세요. Target 상자 Selenium IDE를 선택하고 찾기 버튼을 클릭하세요. Selenium IDE는 해당 요소를 강조 표시할 수 있어야 합니다.

태그 및 클래스 – CSS 선택기

CSS 선택기 Selenium HTML 태그와 클래스 이름을 사용하는 것은 태그와 ID를 사용하는 것과 유사하지만, 이 경우에는 해시 대신 점(.)을 사용합니다.

통사론

css=tag.class

• tag = 액세스되는 요소의 HTML 태그
• . = 점 기호. 이는 클래스와 함께 CSS 선택기를 사용할 때 항상 존재해야 합니다.
• class = 액세스되는 요소의 클래스

단계 1) 데모 페이지로 이동 http://demo.guru99.com/test/facebook.html 그리고 Firebug를 사용하여 "이메일 또는 전화" 텍스트 상자를 검사합니다. HTML 태그가 "input"이고 클래스가 "inputtext"인 것을 주목하세요.

단계 2) In Selenium IDE에서 "css=input.inputtext"를 입력합니다. Target 상자를 클릭하고 찾기를 클릭하세요. Selenium IDE는 이메일 또는 전화번호 텍스트 상자를 인식할 수 있어야 합니다.

여러 요소에 동일한 HTML 태그와 이름이 있는 경우 소스 코드의 첫 번째 요소만 인식됩니다.Firebug를 사용하여 Facebook의 비밀번호 텍스트 상자를 검사하고 이메일 또는 전화번호 텍스트 상자와 이름이 같은지 확인합니다.

이전 그림에서 이메일이나 전화번호 텍스트 상자만 강조 표시된 이유는 해당 텍스트 상자가 Facebook 페이지 소스에서 가장 먼저 나오기 때문입니다.

태그 및 속성 - CSS 선택기

이 전략은 HTML 태그와 액세스할 요소의 특정 속성을 사용합니다.

통사론

css=tag[attribute=value]

• tag = 액세스되는 요소의 HTML 태그
• [ 및 ] = 특정 속성과 해당 값이 배치되는 대괄호
• attribute = 사용할 속성입니다. 이름이나 ID와 같이 요소에 고유한 속성을 사용하는 것이 좋습니다.
• 값 = 선택한 속성의 해당 값.

단계 1) 로 이동 Mercury 투어 등록 페이지 http://demo.guru99.com/test/newtours/register.php 그리고 "성" 텍스트 상자를 검사합니다. HTML 태그("이 경우 "input")와 이름("lastName")을 기록합니다.

단계 2) In Selenium IDE에서 "css=input[name=lastName]"을 입력합니다. Target 상자를 클릭하고 찾기를 클릭하세요. Selenium IDE가 성 상자에 성공적으로 액세스할 수 있어야 합니다.

여러 요소에 동일한 HTML 태그와 속성이 있는 경우 첫 번째 요소만 인식됩니다.. 이 동작은 동일한 태그 및 클래스가 있는 CSS 선택기를 사용하여 요소를 찾는 것과 유사합니다.

태그, 클래스 및 속성 – CSS 선택기

통사론

css=tag.class[attribute=value]

• tag = 액세스되는 요소의 HTML 태그
• . = 점 기호. 이는 클래스와 함께 CSS 선택기를 사용할 때 항상 존재해야 합니다.
• class = 액세스되는 요소의 클래스
• [ 및 ] = 특정 속성과 해당 값이 배치되는 대괄호
• attribute = 사용할 속성입니다. 이름이나 ID와 같이 요소에 고유한 속성을 사용하는 것이 좋습니다.
• 값 = 선택한 속성의 해당 값.

단계 1) 데모 페이지로 이동 http://demo.guru99.com/test/facebook.html 그리고 Firebug를 사용하여 '이메일 또는 전화번호'와 '비밀번호' 입력 상자를 검사합니다. HTML 태그, 클래스 및 속성을 기록해 둡니다. 이 예에서는 'tabindex' 속성을 선택합니다.

단계 2) 먼저 '이메일 또는 전화번호' 텍스트 상자에 액세스합니다. 따라서 tabindex 값을 1로 사용합니다. "css=input.inputtext[tabindex=1]"을 입력합니다. Selenium 십오 일 Target 상자를 클릭하고 찾기를 클릭합니다. '이메일 또는 전화' 입력 상자가 강조 표시되어야 합니다.

단계 3) 비밀번호 입력 상자에 액세스하려면 tabindex 속성의 값을 바꾸기만 하면 됩니다. "css=input.inputtext[tabindex=2]"를 입력하십시오. Target 상자를 클릭하고 찾기 버튼을 클릭하세요. Selenium IDE는 비밀번호 텍스트 상자를 성공적으로 식별할 수 있어야 합니다.

내부 텍스트 – CSS 선택기

아시다시피 HTML 레이블에는 ID, 이름 또는 클래스 속성이 거의 제공되지 않습니다. 그렇다면 어떻게 접근할 수 있나요? 대답은 내면의 텍스트를 사용하는 것입니다. 내부 텍스트는 HTML 레이블이 페이지에 표시하는 실제 문자열 패턴입니다.

통사론

css=tag:contains("inner text")

• tag = 액세스되는 요소의 HTML 태그
• 내부 텍스트 = 요소의 내부 텍스트

단계 1) 로 이동 Mercury 투어 홈페이지 http://demo.guru99.com/test/newtours/ Firebug를 사용하여 "Password" 레이블을 조사하세요. HTML 태그(이 경우 "font")를 기록해 두고 클래스, ID 또는 이름 속성이 없음을 확인하세요.

단계 2) 타입 css=font:contains(“비밀번호:”) 으로 Selenium 십오 일 Target 상자를 클릭하고 찾기를 클릭하세요. Selenium IDE는 아래 이미지에 표시된 것처럼 비밀번호 레이블에 액세스할 수 있어야 합니다.

단계 3) 이번에는 내부 텍스트를 "Boston"으로 바꿔서 Target 이제 “css=font:contains(“Boston”)”이 됩니다. 찾기를 클릭합니다. “Boston to San Francisco” 레이블이 강조 표시되는 것을 알 수 있습니다. 이것은 다음을 보여줍니다. Selenium 내부 텍스트의 첫 번째 단어만 표시한 경우에도 IDE는 긴 레이블에 액세스할 수 있습니다.

요약

CSS 선택기 사용으로 찾기 구문

방법	Target 통사론	예시
태그 및 ID	CSS=태그#id	css=입력#이메일
태그 및 클래스	CSS=태그.클래스	CSS=input.inputtext
태그 및 속성	CSS=태그[속성=값]	CSS=입력[이름=성]
태그, 클래스 및 속성	css=태그.클래스[속성=값]	css=input.inputtext[tabindex=1]