how locate elements chrome
이것은 Selenium 온라인 교육 시리즈의 튜토리얼 # 7입니다. 이 시리즈의 모든 Selenium 튜토리얼을 확인하려면 이 페이지 .
이전 튜토리얼에서 우리는 Selenium의 다양한 유형의 로케이터와 테스트 스크립트를 빌드하기위한 로케이터 메커니즘에 대해 조명하려고했습니다. 튜토리얼은 다음과 같은 다양한 로케이터 유형에 대한 간략한 소개로 구성되었습니다. ID, 클래스, Xpaths, 링크 텍스트 , CSS 선택자 등 및 그들의 식별.
다음 튜토리얼을 진행하면서 위치 찾기 전략의 확장을 소개 할 기회를 갖게됩니다. 따라서 다음 튜토리얼, Google 크롬과 Internet Explorer에서 웹 요소를 찾는 메커니즘을 연구합니다.
우리 모두는 인터넷 사용자 기반이 급속히 성장하고 있다는 사실을 잘 알고 있으므로 이해 관계자와 프로그래머는 대부분의 브라우저에서 작동 할 가능성이 높은 웹 애플리케이션을 구축하고 있습니다.
따라서 웹 애플리케이션이 Firefox를 지원하지 않지만 Chrome 및 Internet Explorer에서는 잘 작동하는 상황을 상상해보십시오.
이제 Selenium을 사용하여 이러한 애플리케이션을 어떻게 자동화 할 것인가? 또는 Chrome 및 Internet Explorer에서 웹 요소를 찾는 방법을 구체적으로 지정하십시오. 따라서이 튜토리얼에 답이 있습니다.
SQL 주입을 수동으로 테스트하는 방법
학습 내용 :
Google 크롬에서 웹 요소 찾기
Chrome의 위치 찾기 전략을 이해하는 것부터 시작하겠습니다.
Firefox의 Firebug와 마찬가지로 Google 크롬에는 자신의 개발자 도구 웹 페이지에서 웹 요소를 식별하고 찾는 데 사용할 수 있습니다. 방화범과 달리 사용자는 별도의 플러그인을 다운로드하거나 설치할 필요가 없습니다. 개발자 도구는 Google 크롬과 함께 제공됩니다.
Chrome의 개발자 도구를 사용하여 웹 요소를 찾으려면 아래 단계를 따르세요.
1 단계: 기본 단계는 Chrome의 개발자 도구를 실행하는 것입니다. F12를 눌러 도구를 시작하십시오. 사용자는 아래와 같은 화면을 볼 수 있습니다.
위의 스크린 샷에서 '요소'탭이 강조 표시되어 있습니다. 따라서 요소 탭은 현재 웹 페이지에 속한 모든 HTML 속성을 표시하는 탭입니다. 시작시 기본적으로 열리지 않으면 '요소'탭으로 이동합니다.
웹 페이지 내 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 방화범의 검사와 매우 유사한 '요소 검사'를 선택하여 개발자 도구를 시작할 수도 있습니다.
2 단계: 다음 단계는 웹 페이지 내에서 원하는 개체를 찾는 것입니다. 동일한 작업을 수행하는 한 가지 방법은 원하는 웹 요소를 마우스 오른쪽 버튼으로 클릭하고 검사하는 것입니다. 해당 웹 요소에 속하는 HTML 속성은 개발자 도구에서 강조 표시됩니다. 또 다른 방법은 HTML 속성을 가리키면 일치하는 웹 요소가 강조 표시됩니다. 따라서 이러한 방식으로 사용자는 ID, 클래스, 링크 등을 찾을 수 있습니다.
개발자 도구에서 Xpath 생성
우리는 이미 지난 튜토리얼에서 Xpath에 대해 논의했습니다. 또한 생성 전략에 대해서도 논의했습니다. 여기서는 Chrome의 개발자 도구에서 생성 된 XPath의 유효성을 확인하기위한 논의를 기반으로합니다.
1 단계: Developer tool에서 XPath를 만들려면 콘솔 탭을 엽니 다.
2 단계: 생성 된 Xpath를 입력하고 $ x (“// input (@ id =’Email’)”)로 묶습니다.
3 단계 : 지정된 Xpath와 일치하는 모든 HTML 요소를 보려면 Enter 키를 누르십시오. 우리의 경우 일치하는 HTML 요소가 하나만 있습니다. 해당 HTML 요소를 가리키면 해당 웹 요소가 웹 페이지에서 강조 표시됩니다.
이러한 방식으로 모든 Xpath를 생성하고 콘솔 내에서 유효성을 확인할 수 있습니다.
웹 요소에 해당하는 CSS 관련 정보는 Chrome의 개발자 도구에서 찾을 수 있습니다. 아래 스크린 샷을 참조하십시오.
Internet Explorer에서 웹 요소 찾기
Google 크롬처럼 Internet Explorer에는 자체 개발자 도구도 있습니다. 웹 페이지 내의 속성을 기반으로 웹 요소를 식별하는 데 사용할 수 있습니다. 사용자는 별도의 플러그인을 다운로드하거나 설치할 필요가 없으며 개발자 도구는 Internet Explorer와 함께 제공됩니다.
IE 개발자 도구를 사용하여 웹 요소를 찾으려면 아래 단계를 따르십시오.
1 단계: 기본 단계는 IE 개발자 도구를 시작하는 것입니다. F12를 눌러 도구를 시작하십시오. 사용자는 아래와 같은 화면을 볼 수 있습니다.
위의 스크린 샷에서 'HTML'탭이 강조 표시되어 있습니다. 따라서 HTML 탭은 현재 웹 페이지에 속한 모든 HTML 속성을 표시하는 탭입니다. 현재 웹 페이지에 속한 모든 웹 요소의 속성을 보려면 HTML 탭을 확장합니다.
2 단계: 다음 단계는 웹 페이지 내에서 원하는 개체를 찾는 것입니다. 이를위한 한 가지 방법은 HTML 요소를 선택하고 일치하는 웹 요소가 강조 표시되는 것입니다. 따라서 이러한 방식으로 사용자는 ID, 클래스, 링크 등을 찾을 수 있습니다. 해당 HTML 속성을 선택하자마자 이메일 텍스트 상자가 강조 표시되는 아래 스크린 샷을 확인하십시오.
웹 요소를 찾는 또 다른 방법은 상단 메뉴에있는 '찾기'버튼을 클릭하고 웹 페이지 내에서 원하는 웹 요소를 클릭하는 것입니다. 결과적으로 해당 HTML 속성이 강조 표시됩니다.
따라서 개발자 도구를 사용하여 사용자는 ID, 클래스, 태그 이름을 찾고 Xpath를 만들어 웹 요소를 찾을 수 있습니다.
Chrome의 개발자 도구와 마찬가지로 IE 개발자 도구에는 CSS 관련 정보를 표시하는 별도의 섹션이 있습니다. 아래 스크린 샷을 확인하세요.
결론
이 가이드에서는 Google Chrome 및 Internet Explorer 용 개발자 도구를 사용하여 기본 요소 찾기 전략에 대해 설명합니다.
다음 튜토리얼 # 8 : 다음 자습서를 진행하면서 WebDriver라는 고급 도구를 소개하게되어 기쁩니다. WebDriver는 가장 강력한 자동화 테스트 도구 중 하나입니다. 그래서 우리의 다음 튜토리얼은 WebDriver와 그 모든 핵심을 중심으로 토론을 라우팅하고 기반으로 할 것입니다.
추천 도서
- 다양한 유형의 WebDriver 명령을 사용하여 웹 요소의 가시성 확인 – Selenium Tutorial # 14
- Selenium WebDriver 소개 – Selenium Tutorial # 8
- CSS 선택기를 사용하여 Selenium 스크립트의 웹 요소를 식별하는 방법 – Selenium Tutorial # 6
- 효율적인 Selenium 스크립팅 및 문제 해결 시나리오 – Selenium 자습서 # 27
- 로그로 Selenium 스크립트 디버깅 (Log4j 튜토리얼) – Selenium 튜토리얼 # 26
- 30 개 이상의 최고의 셀레늄 튜토리얼 : 실제 예제로 셀레늄 배우기
- Cucumber Selenium 튜토리얼 : Cucumber Java Selenium WebDriver 통합
- 웹 페이지에서 드롭 다운 요소를 처리하기위한 Selenium Select 클래스 사용 – Selenium Tutorial # 13