메뉴

CSS 선택기를 사용하여 Selenium 스크립트의 웹 요소를 식별하는 방법 – Selenium Tutorial # 6

  • 메인
  • 자동화 테스트
  • CSS 선택기를 사용하여 Selenium 스크립트의 웹 요소를 식별하는 방법 – Selenium Tutorial # 6

how use css selector

문제를 제거하기 위해 도구를 사용해보십시오

우리의 이전 Selenium 튜토리얼 , 우리는 다양한 유형의 로케이터를 배웠습니다. 또한 웹 페이지에서 웹 요소를 식별하기 위해 ID, ClassName, 이름, 링크 텍스트 및 XPath 로케이터를 사용하는 방법도 배웠습니다.

계속해서 오늘 우리는 CSS 선택기를 로케이터로 사용하는 방법 . 이것은 우리의 여섯 번째 튜토리얼입니다 무료 셀레늄 교육 시리즈 .

CSS 선택기를 로케이터로 사용 :

CSS 선택기는 웹 페이지 내에서 웹 요소를 식별하는 요소 선택기와 선택기 값의 조합입니다. 요소 선택기와 선택기 값의 조합을 선택기 패턴이라고합니다.

CSS 선택기 셀레늄 로케이터

선택기 패턴은 HTML 태그, 속성 및 해당 값을 사용하여 구성됩니다. CSS 선택기와 Xpath를 만드는 절차의 핵심 주제는 구성 프로토콜의 유일한 차이점이라는 점에서 매우 유사합니다.

Xpath와 마찬가지로 CSS 선택기는 ID, 클래스 또는 이름이없는 웹 요소를 찾을 수도 있습니다.

CPU 온도를 확인하는 최고의 앱

이제 미리 준비하여 CSS 선택 자의 기본 유형에 대해 논의하겠습니다.

CSS 선택기를 로케이터로 사용

학습 내용 :

CSS 선택기 : ID

이 샘플에서는 Gmail.com의 로그인 양식에있는 '이메일'텍스트 상자에 액세스합니다.

이메일 텍스트 상자에는 값이 '이메일'로 정의 된 ID 속성이 있습니다. 따라서 ID 속성과 해당 값을 사용하여 이메일 텍스트 상자에 액세스하기위한 CSS 선택기를 만들 수 있습니다.

웹 요소 용 CSS 선택기 만들기

1 단계 : 웹 요소 (이 경우 'Email'텍스트 상자)를 찾아서 검사하고 HTML 태그가 'input'이고 ID 속성 값이 'Email'이며 둘 다 집합 적으로 'Email Textbox'를 참조합니다. 따라서 위의 데이터는 CSS 선택기를 만드는 데 사용됩니다.

CSS 선택기를 로케이터로 사용 2

로케이터 값 확인

1 단계 : 'css = input # Email'즉, Selenium IDE의 대상 상자에 로케이터 값을 입력하고 찾기 버튼을 클릭합니다. 이메일 텍스트 상자가 강조 표시됩니다.

CSS 선택기를 로케이터로 사용 3

통사론

css =

  • HTML 태그 – 접속하고자하는 웹 요소를 나타내는 데 사용되는 태그입니다.
  • # – 해시 기호는 ID 속성을 상징하는 데 사용됩니다. CSS 선택기를 만드는 데 ID 속성을 사용하는 경우 해시 기호를 사용해야합니다.
  • ID 속성 값 – 액세스중인 ID 속성의 값입니다.
  • ID 값은 항상 해시 기호가 앞에옵니다.

노트 : 다른 유형의 CSS 선택자에도 적용 가능

  • Selenium IDE의 대상 텍스트 상자에서 CSS 선택기를 지정하는 동안 항상 'css ='접두어를 사용하십시오.
  • 위 아티팩트의 순서는 변경할 수 없습니다.
  • 둘 이상의 웹 요소에 동일한 HTML 태그 및 속성 값이있는 경우 페이지 소스에 표시된 첫 번째 요소가 식별됩니다.

CSS 선택기 : 클래스

이 샘플에서는 gmail.com의 로그인 양식 아래에있는 '로그인 상태 유지'확인란에 액세스합니다.

'로그인 상태 유지'확인란에는 값이 '기억'으로 정의 된 클래스 속성이 있습니다. 따라서 Class 속성과 그 값을 사용하여 지정된 웹 요소에 액세스하기위한 CSS 선택기를 만들 수 있습니다.

클래스를 CSS 선택기로 사용하여 요소를 찾는 것은 ID를 사용하는 것과 매우 유사하며, 유일한 차이점은 구문 형성에 있습니다.

웹 요소 용 CSS 선택기 만들기

1 단계 : 웹 요소 (이 경우 'Stay sign in'확인란)를 찾아서 검사하고 HTML 태그가 'label'이고 ID 속성 값이 'remember'이며 둘 다 집합 적으로 'Stay signed in'을 참조합니다. 체크 박스에서”.

로케이터 값 확인

1 단계 : 'css = label.remember'즉, Selenium IDE의 대상 상자에 로케이터 값을 입력하고 찾기 버튼을 클릭합니다. '로그인 상태 유지'확인란이 강조 표시됩니다.

CSS 선택기를 로케이터로 사용 4

통사론

css =

  • . – 점 기호는 Class 속성을 상징하는 데 사용됩니다. CSS 선택기를 만드는 데 Class 속성을 사용하는 경우 점 기호를 사용해야합니다.
  • Class 값은 항상 점 기호가 앞에옵니다.

CSS 선택기 : 속성

이 샘플에서는 gmail.com의 로그인 양식 아래에있는 '로그인'버튼에 액세스합니다.

'로그인'버튼에는 값이 '제출'로 정의 된 유형 속성이 있습니다. 따라서 유형 속성과 해당 값을 사용하여 지정된 웹 요소에 액세스하기위한 CSS 선택기를 만들 수 있습니다.

웹 요소 용 CSS 선택기 만들기

1 단계 : 웹 요소 (이 경우 '로그인'버튼)를 찾아서 검사하고 HTML 태그가 '입력'이고 속성이 유형이고 유형 속성의 값이 '제출'임을 확인하고 모두 함께 참조를 만듭니다. '로그인'버튼.

로케이터 값 확인

1 단계 : 'css = input (type =’submit’)'즉, Selenium IDE의 대상 상자에 로케이터 값을 입력하고 찾기 버튼을 클릭합니다. '로그인'버튼이 강조 표시됩니다.

CSS 선택기를 로케이터로 사용 5

통사론

css =

  • 속성 – CSS 선택기를 만드는 데 사용하려는 속성입니다. 값, 유형, 이름 등을 지정할 수 있습니다. 값이 웹 요소를 고유하게 식별하는 속성을 선택하는 것이 좋습니다.
  • 속성 값 – 액세스중인 속성의 값입니다.

CSS 선택기 : ID / 클래스 및 속성

이 샘플에서는 gmail.com의 로그인 양식에있는 '비밀번호'텍스트 상자에 액세스합니다.

'비밀번호'텍스트 상자에는 값이 '비밀번호'로 정의 된 ID 속성, 값이 '비밀번호'로 정의 된 유형 속성이 있습니다. 따라서 ID 속성, 유형 속성 및 해당 값을 사용하여 지정된 웹 요소에 액세스하기위한 CSS 선택기를 만들 수 있습니다.

Windows 7을위한 무료 방화벽 보호

웹 요소 용 CSS 선택기 만들기

1 단계 : 웹 요소 (이 경우 '비밀번호'텍스트 상자)를 찾아서 검사하고 HTML 태그가 '입력'이고 속성이 ID 및 유형이고 해당 값이 '비밀번호'및 '비밀번호'이며 모두 함께 있음을 확인합니다. '암호'텍스트 상자를 참조하십시오.

로케이터 값 확인

1 단계 : 'css = input # Passwd (name =’Passwd’)'(예 : Selenium IDE의 대상 상자에 로케이터 값)를 입력하고 찾기 버튼을 클릭합니다. '비밀번호'텍스트 상자가 강조 표시됩니다.

CSS 선택기를 로케이터로 사용 5

통사론

css =

구문에서 둘 이상의 속성을 제공 할 수도 있습니다.예를 들면, “css = input # Passwd (type =’password’) (name =’Passwd’)”

CSS 선택기 : 하위 문자열

Selenium의 CSS는 부분 문자열을 일치시킬 수 있으므로 부분 문자열을 사용하여 CSS 선택기를 만드는 매우 흥미로운 기능을 유도합니다. 하위 문자열을 일치시키는 데 사용되는 메커니즘을 기반으로 CSS 선택기를 만들 수있는 세 가지 방법이 있습니다.

메커니즘 유형

아래의 모든 메커니즘은 상징적 의미를 갖습니다.

  • 접두사와 일치
  • 접미사 일치
  • 하위 문자열 일치

자세히 논의하겠습니다.

접두사와 일치

일치하는 접두사의 도움으로 문자열에 대응하는 데 사용됩니다.

통사론

css =

  • ^ – 접두사를 사용하여 문자열과 일치하는 기호 표기법.
  • 접두사 – 일치 연산이 수행되는 문자열입니다. 가능한 문자열은 지정된 문자열로 시작할 것으로 예상됩니다.

예를 들어: '비밀번호 텍스트 상자'를 고려하여 해당 CSS 선택기는 다음과 같습니다.

css = input # Passwd (name ^ =’Pass’)

접미사 일치

일치하는 접미사를 사용하여 문자열에 대응하는 데 사용됩니다.

통사론

css =

  • # – 접미사를 사용하여 문자열을 일치시키는 기호 표기법.
  • 접미사 – 일치 연산이 수행되는 문자열입니다. 가능한 문자열은 지정된 문자열로 끝날 것으로 예상됩니다.

예를 들어,'비밀번호 텍스트 상자'를 다시 고려해 보겠습니다. 이에 해당하는 CSS 선택기는 다음과 같습니다.

css = input # Passwd (name $ =’wd’)

하위 문자열 일치

일치하는 부분 문자열의 도움으로 문자열에 대응하는 데 사용됩니다.

통사론

css =

  • * – 하위 문자열을 사용하여 문자열을 일치시키는 기호 표기법.
  • 하위 문자열 – 일치 연산이 수행되는 문자열입니다. 가능한 문자열은 지정된 문자열 패턴을 가질 것으로 예상됩니다.

예를 들어,'암호 텍스트 상자'를 다시 고려해 보겠습니다. 따라서 해당 CSS 선택기는 다음과 같습니다.

css = input # Passwd (name $ =’wd’)

CSS 선택기 : 내부 텍스트

내부 텍스트는 HTML 태그가 웹 페이지에 표시하는 문자열 패턴을 사용하여 CSS 선택기를 식별하고 만드는 데 도움이됩니다.

“도움이 필요하십니까?”라고 생각해보십시오. gmail.com의 로그인 양식 아래에 하이퍼 링크가 있습니다.

하이퍼 링크를 나타내는 앵커 태그에는 텍스트가 포함되어 있습니다. 따라서이 텍스트는 지정된 웹 요소에 액세스하기위한 CSS 선택기를 만드는 데 사용할 수 있습니다.

통사론:

css =

  • : – 점 기호는 contains 메소드를 상징하는 데 사용됩니다.
  • 포함 – 액세스중인 클래스 속성의 값입니다.
  • 텍스트 – 위치에 관계없이 웹 페이지의 아무 곳에 나 표시되는 텍스트입니다.

이것은 단순화 된 구문으로 인해 웹 요소를 찾는 데 가장 자주 사용되는 전략 중 하나입니다.

CSS Selector 및 Xpath를 만드는 데 많은 노력과 연습이 필요하기 때문에이 프로세스는 더 정교하고 훈련 된 사용자 만 수행 할 수 있습니다.

다음 튜토리얼 # 7 : 다음 튜토리얼을 계속 진행하면서 위치 찾기 전략의 확장을 소개 할 기회를 갖습니다. 따라서 다음 튜토리얼에서 우리는 Google 크롬 및 Internet Explorer에서 웹 요소를 찾는 메커니즘.

Windows 10 용 최고의 무료 스크린 샷 소프트웨어

Selenium 스크립트 생성의 중요한 부분이므로 Selenium Locators를 더 자세히 다루고 있습니다.

아래에 귀하의 질문 / 의견을 알려주십시오.

추천 도서

^