CSS 선택기 Selenium

CSS 선택자란 무엇인가요? Selenium?

A CSS 선택기 Selenium CSS 선택자는 HTML 태그, ID, 클래스 및 속성을 조합하여 웹 요소를 식별하는 문자열 패턴입니다. ID나 이름으로 요소를 찾는 것보다 약간 더 고급 기술이지만, 숙련된 개발자들 사이에서 가장 널리 사용되는 전략입니다. Selenium 사용자는 ID나 이름 속성이 전혀 없는 요소에도 접근할 수 있기 때문입니다.

CSS 선택기 Selenium 다양한 형태가 있지만, 이 가이드에서는 가장 일반적인 다섯 가지 패턴에 초점을 맞춥니다. Selenium IDE :

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

이 전략을 사용할 때 Selenium IDE, 항상 접두사를 붙이세요 Target "가져온 상자CSS=아래의 모든 예시에서 볼 수 있듯이.

CSS 선택자를 사용하는 이유는 무엇일까요? Selenium?

CSS 선택자는 많은 개발자들이 선호하는 위치 지정 전략입니다. Selenium 자동화 엔지니어는 속도, 유연성 및 가독성의 균형을 잘 맞추기 때문에 자동화를 선호합니다. 최신 웹 애플리케이션은 종종 동적으로 생성된 ID를 사용하거나 이름 속성을 완전히 제거하기 때문에 CSS 선택자가 페이지의 특정 요소를 대상으로 지정하는 유일하게 신뢰할 수 있는 방법이 됩니다.

CSS 선택자를 사용하는 주요 장점은 다음과 같습니다.

• 성능 : CSS 선택자는 브라우저의 기본 엔진에 의해 처리되므로, 특히 인터넷 익스플로러와 같은 구형 브라우저에서 동등한 XPath 표현식보다 실행 속도가 더 빠릅니다.
• 유연성: 이 기능은 태그, 클래스, 속성 및 부분 일치 로직을 결합하여 테스터가 안정적인 ID가 없는 요소를 대상으로 지정할 수 있도록 합니다.
• 가독성 : 구문은 개발자들이 이미 CSS 규칙을 작성하는 방식과 유사하므로 QA 엔지니어와 프런트엔드 팀 모두의 학습 곡선을 단축시켜 줍니다.
• 크로스 브라우저 안정성: CSS 선택자는 Chrome에서 일관되게 작동합니다. FirefoxEdge 및 Safari에서 불안정한 테스트 실패를 줄입니다.

태그 및 ID - CSS 선택자

이 예제에서는 페이스북 로그인 페이지의 이메일 입력란을 사용합니다. 해당 요소의 ID는 "이메일", 그리고 해당 요소는 이미 "ID로 찾기" 섹션에서 접근 가능했습니다. 이제 동일한 요소를 사용하여 대상으로 지정합니다. Selenium ID 속성을 가진 CSS 선택자입니다.

통사론

css=tag#id

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

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

단계 1) 로 이동 www.facebook.com브라우저의 개발자 도구(또는 Firebug와 같은 기존 도구)를 사용하여 "이메일 또는 전화번호" 텍스트 상자를 검사하십시오.

HTML 태그가 " 임을 주목하세요.입력”이고 해당 ID는 “입니다.이메일따라서 전체 CSS 선택자는 다음과 같습니다.css=입력#이메일".

단계 2) 시작하다 "css=입력#이메일" 로 Target 상자 Selenium IDE를 선택하고 찾기 버튼을 클릭하세요. Selenium IDE는 페이지에서 일치하는 요소를 강조 표시합니다.

태그 및 클래스 - CSS 선택자

CSS 선택자 Selenium HTML 태그와 클래스 이름을 사용하는 방식은 태그와 ID를 사용하는 방식과 동일한 개념을 따르지만, 해시 기호(#) 대신 점(.)을 사용합니다.

통사론

css=tag.class

• tag = 액세스되는 요소의 HTML 태그
• . = 점 기호로, 클래스가 있는 CSS 선택자를 사용할 때 항상 있어야 합니다.
• class = 액세스되는 요소의 클래스

단계 1) 데모 페이지를 열어보세요 https://demo.guru99.com/test/facebook.html "이메일 또는 전화번호" 텍스트 상자를 검사해 보세요. HTML 태그가 "입력”이고 그 등급은 “입력 텍스트".

단계 2) In Selenium IDE, "를 입력하세요CSS=input.inputtext" 안에 Target 상자를 클릭하고 찾기를 클릭하세요. Selenium IDE는 이메일 또는 전화번호 입력란을 인식합니다.

여러 요소가 동일한 HTML 태그와 클래스를 공유하는 경우 소스 코드에서 처음으로 일치하는 요소만 인식된다는 점에 유의하십시오. 같은 페이지에 있는 비밀번호 입력란을 살펴보면 이메일이나 전화번호 입력란과 동일한 클래스를 사용하고 있음을 알 수 있습니다.

이전 그림에서는 페이지 소스에서 가장 먼저 나타나는 이메일 또는 전화번호 입력란만 강조 표시되었습니다.

태그 및 속성 – CSS 선택자

이 전략은 HTML 태그와 접근하려는 요소에 속하는 특정 속성을 결합합니다.

통사론

css=tag[attribute=value]

• tag = 액세스되는 요소의 HTML 태그
• [ 및 ] = 속성과 해당 값을 감싸는 대괄호
• attribute = 사용할 속성입니다. name 또는 id와 같이 요소에 고유한 속성을 선택하세요.
• 값 = 선택한 속성의 해당 값.

단계 1) 로 이동 Mercury 투어 등록 페이지 https://demo.guru99.com/test/newtours/register.php 그리고 "성" 텍스트 상자를 검사하십시오. 해당 HTML 태그("input")와 name 속성("lastName")을 확인하십시오.

단계 2) In Selenium IDE, "를 입력하세요CSS=입력[이름=성]" 안에 Target 상자를 클릭하고 찾기를 클릭하세요. Selenium IDE가 성 필드를 성공적으로 찾았습니다.

여러 요소가 동일한 HTML 태그와 속성을 공유하는 경우, 첫 번째 요소만 인식됩니다. 동작 방식은 동일한 태그와 클래스를 가진 요소를 찾는 것과 동일합니다.

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

통사론

css=tag.class[attribute=value]

• tag = 액세스되는 요소의 HTML 태그
• . = 점 기호로, 클래스가 있는 CSS 선택자를 사용할 때 항상 있어야 합니다.
• class = 액세스되는 요소의 클래스
• [ 및 ] = 특정 속성과 해당 값을 묶는 대괄호
• attribute = 사용할 속성입니다. name 또는 id와 같이 요소에 고유한 속성을 선택하세요.
• 값 = 선택한 속성의 해당 값.

단계 1) 데모 페이지를 열어보세요 https://demo.guru99.com/test/facebook.html "이메일 또는 전화번호"와 "비밀번호" 입력란을 검사해 보세요. 해당 입력란의 HTML 태그, 클래스 및 속성을 확인하세요. 이 예시에서는 "탭인덱스" 기인하다.

단계 2) 먼저 tabindex 값을 1로 설정하여 "이메일 또는 전화번호" 텍스트 상자에 접근합니다. "를 입력합니다.css=input.inputtext[tabindex=1]” Selenium 십오 일 Target 상자를 클릭하고 찾기를 클릭합니다. 이메일 또는 전화번호 필드가 강조 표시됩니다.

단계 3) 비밀번호 입력 상자를 대상으로 하려면 tabindex 값을 바꾸기만 하면 됩니다. “를 입력하세요.css=input.inputtext[tabindex=2]" 안에 Target 상자를 클릭하고 찾기를 클릭하세요. Selenium IDE가 암호 입력란을 성공적으로 찾았습니다.

내부 텍스트 - CSS 선택자

HTML 레이블에는 id, name 또는 class 속성이 거의 부여되지 않습니다. 그렇다면 이러한 속성에 어떻게 접근할 수 있을까요? Selenium답은 그 안에 담긴 글 속에 있습니다. 내부 텍스트는 HTML 레이블이 페이지에 표시하는 실제 문자열 패턴입니다.

통사론

css=tag:contains("inner text")

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

단계 1) 로 이동 Mercury 투어 홈페이지 https://demo.guru99.com/test/newtours/ "비밀번호" 레이블을 검사해 보세요. 해당 HTML 태그("font" 태그)를 확인하고, 해당 요소에 class, id 또는 name 속성이 없는지 살펴보세요.

단계 2) 타입 css=font:contains(“비밀번호:”) 으로 Selenium 십오 일 Target 상자를 클릭하고 찾기를 클릭하세요. Selenium IDE는 아래 그림과 같이 암호 레이블을 찾습니다.

단계 3) 이번에는 내부 텍스트를 "보스턴"으로 바꾸세요. Target “가 됩니다css=font:contains(“보스턴”)찾기를 클릭하세요. "보스턴에서 샌프란시스코까지"라는 레이블이 강조 표시되어 있습니다. Selenium IDE는 레이블 내부 텍스트의 첫 단어만 제공되더라도 긴 레이블을 찾을 수 있습니다.

CSS 선택자와 XPath 비교 Selenium

CSS 선택자와 XPath는 모두 웹 요소를 식별하는 데 사용됩니다. Selenium하지만 각각 다른 강점을 가지고 있습니다. 아래 표는 두 가지 위치 선정 전략을 주요 측면에서 비교합니다.

기준	CSS 선택기	xpath
속도	더 빠르고, 브라우저의 네이티브 엔진에서 실행됩니다.	속도가 느립니다. 특히 구형 브라우저에서 그렇습니다.
방향	부모에서 자식으로만 전달	앞뒤 방향(자식에서 부모로)
통사론	더 간결하고 CSS 규칙과 유사합니다.	더 길고 계층적인 경로 표현
텍스트 매칭	:contains() 의사 클래스로 제한됨	강력한 text() 및 contains() 함수
가장 좋은	정적 레이아웃과 최신 웹 앱	복잡한 DOM 탐색 및 텍스트 기반 로케이터

CSS 선택자 작성 모범 사례 Selenium

안정적인 CSS 선택자를 작성하는 것은 구문을 아는 것 이상입니다. 다음의 방법들을 활용하면 테스터는 안정적이고 유지보수 가능한 선택자를 만들 수 있습니다. Selenium UI 변경에도 유지되는 스크립트:

1. 고유한 속성을 선호합니다: 자동화를 위해 명시적으로 추가된 id, data-test-id 또는 name 속성을 항상 선택하세요. 이러한 속성은 시각적 레이아웃이 변경되더라도 안정적으로 유지됩니다.
2. 선택자를 과도하게 중첩하지 마십시오. 긴 사슬과 같은 것들 div > div > ul > li > a 개발자가 마크업을 리팩토링할 때 쉽게 오류가 발생할 수 있습니다. 선택자는 최대한 짧게 유지하세요.
3. 부분 일치 항목을 현명하게 사용하세요: 다음과 같은 패턴 [class*="btn-primary"] 작은 클래스 이름 변경은 허용하지만, 의도치 않은 요소와 일치할 수도 있습니다.
4. 인덱스 기반 로케이터 사용을 피하십시오. 선택기 nth-child(3) 형제 요소를 추가하면 모든 위치가 바뀌기 때문에 취약합니다.
5. 개발자 도구에서 선택자를 검증합니다. 실행하기 전에 Selenium 스크립트를 실행한 후 선택자를 Chrome 개발자 도구 콘솔에 붙여넣으세요. document.querySelector() 정확히 하나의 요소를 반환하는지 확인하기 위해서입니다.
6. 고유성을 위해 속성을 조합하세요: 여러 요소가 동일한 클래스를 공유하는 경우, 다음과 같은 속성 필터를 추가하세요. input.form-control[name="email"] 목표를 명확히 하기 위해.
7. 문서화 및 재사용: 페이지 객체 클래스 내부에 선택자를 집중시켜 한 번의 업데이트로 동일한 요소를 참조하는 모든 테스트를 수정할 수 있도록 합니다.

이러한 지침을 따르면 불안정성이 줄어들고 테스트 실행 속도가 향상되며 Selenium 시간이 지날수록 관리가 더 쉬워지는 스위트룸입니다.

요약: CSS 선택자 구문 빠른 참조

아래 표는 모든 것을 통합한 것입니다. Selenium 이 가이드에서 다루는 CSS 선택자 패턴:

방법	Target 통사론	예시
태그 및 ID	CSS=태그#id	css=입력#이메일
태그 및 클래스	CSS=태그.클래스	CSS=input.inputtext
태그 및 속성	CSS=태그[속성=값]	CSS=입력[이름=성]
태그, 클래스 및 속성	css=태그.클래스[속성=값]	css=input.inputtext[tabindex=1]
내부 텍스트	css=tag:contains(“text”)	css=font:contains(“비밀번호:”)

자주 묻는 질문