selenium locators identify web elements using xpath selenium
Selenium Locators Tutorial : 예제를 통해 Selenium에서 XPath를 사용하여 웹 요소를 식별하는 방법 알아보기
에서 이전 튜토리얼 , Firebug라는 또 다른 자동화 테스트 도구를 소개했습니다. 또한 Firebug와 그 기능을 사용하여 수동으로 자체 자동화 스크립트를 만들었습니다. 또한 원하는 수정 사항을 스크립트에 추가하는 방법도 배웠습니다.
계속해서이 튜토리얼에서 우리는 Selenium의 다양한 유형의 로케이터 및 테스트 스크립트를 빌드하기위한 접근성 기술 . 따라서이 튜토리얼은 다양한 유형의 로케이터에 대한 자세한 소개로 구성됩니다.
이건 우리의 Selenium Tutorial의 다섯 번째 튜토리얼 시리즈.
로케이터는 무엇입니까?
로케이터는 웹 페이지 내에서 웹 요소를 고유하게 식별하는 주소라고 할 수 있습니다. 로케이터는 작업을 수행하는 데 필요한 웹 요소에 대해 Selenium에 알려주는 웹 요소의 HTML 속성입니다.
다양한 범위의 웹 요소가 있습니다. 그중 가장 일반적인 것은 다음과 같습니다.
- 텍스트 상자
- 단추
- 쓰러지 다
- 하이퍼 링크
- 체크 박스
- 라디오 버튼
학습 내용 :
로케이터 유형
이러한 요소를 식별하는 것은 항상 매우 까다로운 주제 였으므로 정확하고 효과적인 접근 방식이 필요합니다. 따라서 로케이터가 더 효과적이며 자동화 스크립트가 더 안정적이라고 주장 할 수 있습니다. 기본적으로 모든 Selenium 명령에는 웹 요소를 찾기 위해 로케이터가 필요합니다. 따라서 이러한 웹 요소를 정확하고 정확하게 식별하기 위해 다양한 유형의 로케이터가 있습니다.
이제 각각을 독립적으로 연습하여 더 자세히 이해하겠습니다.
로케이터를 시작하기 전에 잠시 테스트중인 애플리케이션을 소개하겠습니다. 서로 다른 로케이터 유형을 사용하여 서로 다른 유형의 웹 요소를 찾기 위해 'https://accounts.google.com/'을 사용합니다.
ID를 로케이터로 사용
웹 요소를 식별하는 가장 좋고 가장 널리 사용되는 방법은 ID를 사용하는 것입니다. 각 요소의 ID는 고유하다고 주장됩니다.
이 샘플에서는 gmail.com의 로그인 양식에있는 '이메일'텍스트 상자에 액세스합니다.
웹 요소의 ID 찾기 Firebug 사용
외장 하드 드라이브를위한 최고의 데이터 복구 소프트웨어
1 단계 : 웹 브라우저 (Firefox)를 시작하고 'https://accounts.google.com/'으로 이동합니다.
2 단계 : Firebug를 엽니 다 (F12를 누르거나 도구를 통해).
3 단계 : 웹 요소를 식별하려면 검사 아이콘을 클릭합니다.
4 단계 : 작업을 수행하려는 웹 요소 (이 경우 이메일 텍스트 상자)에 마우스를 가져갑니다. 방화범 섹션에서 해당 HTML 태그가 강조 표시되는 것을 볼 수 있습니다.
5 단계 : ID 속성을인지하고 기록해 둡니다. 이제 식별 된 ID가 요소를 고유하고 완벽하게 찾을 수 있는지 확인해야합니다.
통사론 : id = 요소의 id
우리의 경우 ID는“Email”입니다.
대체 접근 방식 :
2 ~ 4 단계를 따르는 대신 로케이터 값을 검사해야하는 웹 요소 (Email Textbox)를 마우스 오른쪽 버튼으로 클릭하고 'Inspect Element with Firebug'옵션을 클릭하여 웹 요소를 직접 찾고 검사 할 수 있습니다. 따라서이 클릭 이벤트는 방화범 섹션의 확장을 트리거하고 해당 HTML 태그가 강조 표시됩니다.
로케이터 값 확인
브라우저가 열려 있고 'https://accounts.google.com/'으로 리디렉션된다고 가정합니다.
1 단계 : Selenium IDE를 시작합니다.
2 단계 : 편집기 섹션의 첫 번째 행을 클릭합니다.
3 단계 : 'id = Email'즉, 대상 상자의 로케이터 값을 입력합니다.
4 단계 : 찾기 버튼을 클릭합니다. 제공된 로케이터 값이 합법적이면 이메일 텍스트 상자가 필드 주위에 형광 녹색 테두리가있는 노란색으로 강조 표시됩니다. 제공된 로케이터 값이 올바르지 않으면 Selenium IDE 하단의 로그 창에 오류 메시지가 인쇄됩니다.
사례 1 – 로케이터 값 = 정확함
편안한 웹 서비스 자바에 대한 인터뷰 질문
사례 2 – 로케이터 값 = 부정확
5 단계 : 추가 확인을 위해 사용자는 'Value'필드에 일부 값을 제공하여 지정된 대상에 대해 'type'명령을 실행할 수도 있습니다. 명령 실행이 이메일 텍스트 상자에 지정된 값을 입력하면 식별 된 로케이터 유형이 정확하고 액세스 가능함을 의미합니다.
ClassName을 로케이터로 사용
ID를 로케이터로 사용하는 것과 클래스 이름을 로케이터로 사용하는 것에는 미묘한 차이가 있습니다.
이 샘플에서는 '도움이 필요하십니까?'에 액세스합니다. gmail.com의 로그인 양식 하단에 하이퍼 링크가 있습니다.
웹 요소의 클래스 이름 찾기 Firebug 사용
1 단계 : 검사 할 로케이터 값이있는 웹 요소를 마우스 오른쪽 버튼으로 클릭하고 'Inspect Element with Firebug'옵션을 클릭하여 웹 요소 (여기서는 '도움이 필요하십니까?'링크)를 찾아서 검사합니다.
2 단계 : 클래스 이름 속성을 인식하고 기록해 둡니다. 이제 식별 된 클래스 이름이 요소를 고유하고 정확하게 찾을 수 있는지 확인해야합니다.
통사론: class = 요소의 클래스 이름
이 경우 클래스 이름은 'need-help-reverse'입니다.
로케이터 값 확인
1 단계 : Selenium IDE의 대상 상자에 'class = need-help-reverse'를 입력하십시오.
2 단계 : 찾기 버튼을 클릭합니다. 하이퍼 링크는 필드 주위에 형광 녹색 테두리가있는 노란색으로 강조 표시됩니다.
(확대 이미지를 보려면 클릭)
이름을 로케이터로 사용
이름을 사용하여 웹 요소를 찾는 것은 이전의 두 로케이터 유형과 매우 유사합니다. 유일한 차이점은 구문에 있습니다.
이 샘플에서는 gmail.com의 로그인 양식에있는 '비밀번호'텍스트 상자에 액세스합니다.
통사론: name = 요소의 이름
이 경우 이름은 'Passwd'입니다.
로케이터 값 확인
1 단계 : 대상 상자에 'name = Passwd'를 입력하고 찾기 버튼을 클릭합니다. '암호'텍스트 상자가 강조 표시됩니다.
링크 텍스트를 로케이터로 사용
웹 페이지의 모든 하이퍼 링크는 링크 텍스트를 사용하여 식별 할 수 있습니다. 웹 페이지의 링크는 앵커 태그 ( ). 앵커 태그는 웹 페이지에 하이퍼 링크를 만드는 데 사용되며 앵커 태그의 열기와 닫기 사이의 텍스트가 링크 텍스트 ( 일부 텍스트 ).
이 샘플에서는 gmail.com의 로그인 양식 하단에있는 '계정 만들기'링크에 액세스합니다.
Firebug를 사용하여 웹 요소의 링크 텍스트 찾기
1 단계 : 검사 할 로케이터 값이있는 웹 요소를 마우스 오른쪽 버튼으로 클릭하고 'Inspect Element with Firebug'옵션을 클릭하여 웹 요소 (이 경우 'Create an account'링크)를 찾아서 검사합니다.
2 단계 : 내부에있는 텍스트를 인식하십시오. 태그를 작성하고 메모 해 두십시오. 따라서이 텍스트는 웹 페이지의 링크를 고유하게 식별하는 데 사용됩니다.
(확대 이미지를 보려면 클릭)
통사론: link = 요소의 링크 텍스트
우리의 경우 링크 텍스트는 '계정 만들기'입니다.
로케이터 값 확인
1 단계 : 'link = Create an account'(예 : Selenium IDE의 대상 상자에 로케이터 값)를 입력합니다.
2 단계 : 찾기 버튼을 클릭합니다. 링크는 필드 주위에 형광 녹색 테두리가있는 노란색으로 강조 표시됩니다.
XPath를 로케이터로 사용
Xpath는 XML 경로를 기반으로 웹 요소를 찾는 데 사용됩니다. XML은 Extensible Markup Language의 약자이며 임의의 데이터를 저장, 구성 및 전송하는 데 사용됩니다. HTML 태그와 매우 유사한 키-값 쌍에 데이터를 저장합니다. 둘 다 마크 업 언어이고 동일한 우산에 속하므로 xpath를 사용하여 HTML 요소를 찾을 수 있습니다.
Xpath를 사용하여 요소를 찾는 기본은 전체 페이지에서 다양한 요소 사이를 순회하여 사용자가 다른 요소를 참조하여 요소를 찾을 수 있도록하는 것입니다.
Xpath는 두 가지 방법으로 만들 수 있습니다.
상대 Xpath
상대 Xpath는 현재 위치에서 시작하며 '//'접두사가 붙습니다.
예 : // span (@ class =’Email’)
절대 Xpath
절대 Xpath는 루트 경로로 시작하며 '/'접두사가 붙습니다.
예 : / HTML / body / div / div (@ id = 'Email')
키 포인트:
- Xpath를 사용하여 요소를 찾는 성공률이 너무 높습니다. 이전 진술과 함께 Xpath는 웹 페이지에서 상대적으로 모든 요소를 찾을 수 있습니다. 따라서 Xpath를 사용하여 ID, 클래스 또는 이름이없는 요소를 찾을 수 있습니다.
- 유효한 Xpath를 만드는 것은 까다 롭고 복잡한 과정입니다. Xpath를 생성하는 데 사용할 수있는 플러그인이 있지만 대부분의 경우 생성 된 Xpath가 웹 요소를 올바르게 식별하지 못합니다.
- xpath를 만드는 동안 사용자는 다양한 명명법과 프로토콜을 알고 있어야합니다.
Selenium XPath 예 :
Xpath 검사기
Xpath를 만드는 것은 Xpath Checker를 사용하면 조금 더 간단 해집니다. Xpath Checker는 웹 요소에 대한 Xpath를 자동으로 생성하는 Firefox 추가 기능입니다. 추가 기능은 다른 플러그인과 마찬가지로 다운로드하여 설치할 수 있습니다. 플러그인은“https://addons.mozilla.org/en-US/firefox/addon/xpath-checker/”에서 다운로드 할 수 있습니다.
플러그인이 설치 되 자마자 생성하려는 xpath가있는 요소를 마우스 오른쪽 버튼으로 클릭하면 컨텍스트 메뉴에서 볼 수 있습니다.
요소의 Xpath 표현식을 보려면“View Xpath”를 클릭하십시오. 생성 된 Xpath 표현식과 함께 편집기 창이 나타납니다. 이제 사용자는 생성 된 Xpath 표현식을 편집하고 수정할 수 있습니다. 해당 결과는 누적 업데이트됩니다.
XPath 검사기는 다른 브라우저에서도 사용할 수 있습니다.
그러나 대부분의 경우 생성 된 Xpath가 웹 요소를 올바르게 식별하지 못한다는 사실을 반복합니다. 따라서 사전 정의 된 규칙 및 프로토콜에 따라 자체 Xpath를 생성하는 것이 좋습니다.
이 샘플에서는 gmail.com의 로그인 양식 상단에있는 'Google'이미지에 액세스합니다.
웹 요소의 Xpath 생성
얼마나 많은 유형의 파일이 파이썬에 있습니까?
1 단계 : '// img (@ class =’logo’)'(예 : Selenium IDE 내 대상 상자의 로케이터 값)를 입력합니다.
통사론: 요소의 Xpath
2 단계 : 찾기 버튼을 클릭합니다. 이미지는 필드 주위에 형광 녹색 테두리가있는 노란색으로 강조 표시됩니다.
결론
이 기사의 핵심은 다음과 같습니다.
- 로케이터는 작업을 수행해야하는 웹 요소에 대해 Selenium에 알려주는 웹 요소의 HTML 속성입니다.
- 사용자가 정기적으로 상호 작용해야하는 다양한 웹 요소가 있습니다. 그중 일부는 텍스트 상자, 단추, 드롭 다운, 하이퍼 링크, 체크 상자 및 라디오 단추입니다.
- 다양한 범위의 웹 요소와 함께 이러한 웹 요소를 찾기위한 방대한 전략 / 접근 방식이 제공됩니다.
- 광범위하게 사용되는 로케이터 유형 중 일부는 ID, ClassName, 링크 텍스트, XPath, CSS 선택기 및 이름입니다.
참고 : CSS 선택기와 XPath를 만드는 데 많은 노력과 연습이 필요하기 때문에이 프로세스는 더 정교하고 훈련 된 사용자 만 수행 할 수 있습니다.
이 튜토리얼에서는 Selenium Xpath를 포함한 다양한 유형의 로케이터를 배웠습니다.
다음 튜토리얼 # 6 : 이 Selenium Locator 유형 자습서를 계속하면서 사용 방법을 배웁니다. 로케이터로서의 CSS 선택기.
질문이 있습니까? 의견을 통해 알려주십시오. 우리는 모든 것을 해결하려고 노력할 것입니다.
추천 도서
- 예제와 함께 텍스트 자습서로 셀레늄 찾기 요소
- 30 개 이상의 최고의 셀레늄 튜토리얼 : 실제 예제로 셀레늄 배우기
- Selenium 스크립트 빌드를 위해 Chrome 및 IE 브라우저에서 요소를 찾는 방법 – Selenium Tutorial # 7
- Selenium 스크립트에서 웹 테이블, 프레임 및 동적 요소 처리 – Selenium Tutorial # 18
- 웹 페이지에서 드롭 다운 요소를 처리하기위한 Selenium Select 클래스 사용 – Selenium Tutorial # 13
- Cucumber Selenium 튜토리얼 : Cucumber Java Selenium WebDriver 통합
- Selenium 스크립트 용 웹 요소를 식별하기 위해 CSS 선택기를 사용하는 방법 – Selenium Tutorial # 6
- 다양한 유형의 WebDriver 명령을 사용하여 웹 요소의 가시성 확인 – Selenium Tutorial # 14