how use firebug creating selenium scripts selenium tutorial 4
에서 이전 튜토리얼 , 우리는 Selenium IDE 및 기록 기능을 사용하여 자동화 된 테스트 스크립트를 만드는 방법을 배웠습니다. 우리는 또한 인구가 많은 Selenium IDE의 기능 . 우리는 독자들에게 Selenium IDE의 가장 중요한 기능과 명령을 전달하는 것을 목표로했습니다.
알림 – 이것은 무료로 제공되는 4 번째 튜토리얼입니다. 셀레늄 교육 시리즈 .
이제 익숙해졌고 Selenium IDE의 기록 모드를 사용하여 자동화 된 스크립트를 생성 할 수 있으므로 'Firebug'로 알려진 효과적인 테스트 스크립트를 생성하는 데 매우 중요한 역할을하는 다른 도구를 사용해 보겠습니다. Firebug는 웹 요소 및 웹 페이지의 속성을 검사하는 데 도움이됩니다.
따라서이 튜토리얼은 Firebug 설치와 그 유용성으로 구성됩니다.
이 튜토리얼의 내용은 Selenium IDE의 컨텍스트에서만 적용 할 수있는 것은 아닙니다. 오히려 Selenium 제품군의 모든 도구에 적용 할 수 있습니다. 따라서 Selenium IDE 대신 Selenium이라는 용어를 사용하는 것이 바람직합니다.
이 튜토리얼에서는 Selenium 스크립트를 생성하기 위해 Firebug 애드온을 사용하는 방법을 알아 봅니다. 이 과정에서 Firebug를 설치하는 방법도 배웁니다.
학습 내용 :
Firebug 소개
Firebug는 Mozilla Firefox 추가 기능입니다. 이 도구는 웹 페이지에서 HTML, CSS 및 JavaScript 요소를 식별하거나보다 구체적으로 검사하는 데 도움이됩니다. 웹 페이지에서 고유하게 요소를 식별하는 데 도움이됩니다. 요소는이 자습서의 뒷부분에서 설명 할 로케이터 유형에 따라 고유하게 찾을 수 있습니다.
Firebug를 설치하는 방법?
이해의 편의를 위해 설치 프로세스를 다음 단계로 나눌 것입니다.
1 단계: Mozilla Firefox 브라우저를 실행하고 여기로 이동하십시오. Firebug 애드온 다운로드 페이지 . URL은 Firefox 부가 기능 섹션으로 이동합니다.
2 단계: 웹 페이지에있는 'Firefox에 추가'버튼을 클릭하십시오. 동일하게 다음 그림을 참조하십시오.
3 단계 : 'Firefox에 추가'버튼을 클릭하자마자 보안 경고 상자가 나타납니다. 지금 '허용'버튼을 클릭하십시오.
4 단계 : 이제 Firefox가 배경에 애드온을 다운로드하고 진행률 표시 줄이 표시됩니다.
5 단계 : 프로세스가 완료되면 소프트웨어 설치 창이 나타납니다. 이제 '지금 설치'버튼을 클릭하십시오.
6 단계 : 설치가 완료 되 자마자 방화 버그가 성공적으로 설치되었다는 팝업이 나타납니다. 이제이 팝업을 닫도록 선택하십시오.
노트 : Selenium IDE와 달리 Firebug 설치를 반영하기 위해 Firefox를 다시 시작할 필요가 없으며 즉시 제공됩니다.
7 단계 : 이제 방화범을 시작하기 위해 다음 방법 중 하나를 선택할 수 있습니다.
- F12를 누릅니다.
- Firefox 창의 오른쪽 상단 모서리에있는 Firebug 아이콘을 클릭합니다.
-
- Firefox 메뉴 표시 줄-> Web Developer-> firebug-> Open Firebug를 클릭합니다.
8 단계 : 이제 파이어 폭스 창 하단에서 파이어 버그를 볼 수 있습니다.
이제 방화범을 다운로드하고 설치 했으므로 방화범을 사용하여 생성 할 로케이터 유형을 살펴 보겠습니다.
Firebug를 사용하여 Selenium 스크립트 생성
Selenium IDE와 달리 Firebug에서는 논리적이고 일관된 테스트 스크립트를 형성하기 위해 여러 테스트 단계를 추가하여 자동화 된 테스트 스크립트를 수동으로 생성합니다.
진보적 인 접근 방식을 따르고 단계적으로 프로세스를 이해합시다.
대본:
- 'https://accounts.google.com'을 엽니 다.
- 애플리케이션 제목 지정
- 잘못된 사용자 이름과 잘못된 비밀번호를 입력하고 세부 정보를 제출하여 로그인하십시오.
1 단계 - Firefox를 시작하고 메뉴 모음에서 Selenium IDE를 엽니 다.
2 단계 - 기본 URL 텍스트 상자에 테스트중인 애플리케이션의 주소 ( 'https://accounts.google.com')를 입력합니다.
3 단계 – 기본적으로 Record 버튼은 ON 상태입니다. 녹화 모드를 비활성화하려면 OFF 상태로 조정해야합니다. 녹화 모드가 ON 상태 인 경우 웹 브라우저와의 상호 작용을 녹화 할 수 있습니다.
4 단계 – Firefox에서 테스트중인 애플리케이션 (https://accounts.google.com)을 엽니 다.
5 단계 – 웹 브라우저에서 Firebug를 시작합니다.
6 단계 – 편집기에서 빈 테스트 단계를 선택합니다.
7 단계 – 편집기 창에있는 명령 텍스트 상자에 'open'을 입력합니다. 'open'명령은 웹 브라우저에서 지정된 URL을 엽니 다.
권장 사항 : 명령 텍스트 상자에 명령을 입력하는 동안 사용자는 자동 선택 기능을 활용할 수 있습니다. 따라서 사용자가 일련의 문자를 입력하자마자 일치하는 제안이 자동으로 채워집니다.
사용자는 명령 텍스트 상자에서 사용 가능한 드롭 다운을 클릭하여 Selenium IDE에서 제공하는 모든 명령을 볼 수도 있습니다.
8 단계 – 이제 웹 브라우저 내의 Firebug 섹션으로 이동하여 HTML 코드의 'head'섹션을 확장합니다. HTML 태그에 주목하십시오. 따라서 웹 페이지의 제목을 주장하려면 태그의 값이 필요합니다.
우리의 경우에는 '로그인 – Google 계정'인 웹 페이지의 제목을 복사합니다.
9 단계 – 편집기에서 두 번째 빈 테스트 단계를 선택합니다.
10 단계 – 편집기 창에있는 명령 텍스트 상자에 'assertTitle'을 입력합니다. 'assertTitle'명령은 현재 페이지 제목을 반환하고 지정된 제목과 비교합니다.
나는 제품 테스터가되고 싶다
11 단계 – 8 단계에서 복사 한 제목을 두 번째 대상 필드에 붙여 넣습니다.
12 단계 – 이제 편집기 창에서 세 번째 빈 테스트 단계를 선택합니다.
13 단계 - 명령 텍스트 상자에 'type'명령을 입력합니다. 'type'명령은 GUI의 지정된 웹 요소에 값을 입력합니다.
14 단계 – 이제 웹 브라우저로 전환하여 로그인 양식의 '이메일'텍스트 상자에 마우스 커서를 놓고 오른쪽 클릭을 누릅니다.
'Inspect Element with Firebug'옵션을 선택합니다. Firebug는 웹 요소에 해당하는 HTML 코드 (예 : 'Email Textbox')를 자동으로 강조 표시합니다.
15 단계 – 위 그림의 HTML 코드는 '이메일'텍스트 상자에 속하는 고유 한 속성 속성을 나타냅니다. 웹 페이지에서 웹 요소를 고유하게 식별하는 네 가지 속성 (ID, 유형, 자리 표시 자 및 이름)이 있습니다. 따라서 웹 요소를 식별하기 위해 하나 이상의 속성을 선택하는 것은 사용자에게 달려 있습니다.
따라서이 경우 ID를 로케이터로 선택합니다. ID 값을 복사하여 'id ='접두사가 붙은 세 번째 테스트 단계의 대상 필드에 붙여 넣어 ID가 '이메일'인 웹 요소를 찾을 수 있도록 Selenium IDE를 나타냅니다.
(확대 이미지를 보려면 클릭하십시오)
Selenium IDE는 대소 문자를 구분하므로 HTML 코드에 표시되는 것과 동일하게 신중하고 정확하게 속성 값을 입력하십시오.
16 단계 – 찾기 버튼을 클릭하여 선택한 로케이터가 웹 페이지에서 지정된 UI 요소를 찾고 찾는 지 확인합니다.
17 단계 – 이제 다음 단계는 편집기 창에서 세 번째 테스트 단계의 값 텍스트 상자에 테스트 데이터를 입력하는 것입니다. 값 텍스트 상자에 'InvalidEmailID'를 입력합니다. 사용자는 원하는대로 테스트 데이터를 변경할 수 있습니다.
18 단계 - 이제 편집기 창에서 네 번째 빈 테스트 단계를 선택합니다.
19 단계 - 명령 텍스트 상자에 'type'명령을 입력합니다.
20 단계 – 이제 웹 브라우저로 전환하고 마우스 커서를 로그인 양식의 '비밀번호'텍스트 상자로 가져간 다음 오른쪽 클릭을 누릅니다.
'Inspect Element with Firebug'옵션을 선택합니다.
21 단계 – 아래 HTML 코드는 '비밀번호'텍스트 상자에 속하는 고유 한 속성 속성을 나타냅니다. 웹 페이지에서 웹 요소를 고유하게 식별하는 네 가지 속성 (ID, 유형, 자리 표시 자 및 이름)이 있습니다. 따라서 웹 요소를 식별하기 위해 하나 이상의 속성을 선택하는 것은 사용자에게 달려 있습니다.
따라서이 경우 ID를 로케이터로 선택합니다. ID 값을 복사하여 'id ='로 시작하는 세 번째 테스트 단계의 대상 필드에 붙여 넣습니다.
(확대 이미지를 보려면 클릭하십시오)
22 단계 – 찾기 버튼을 클릭하여 로케이터 탭이 웹 페이지에서 지정된 UI 요소를 찾고 찾는 지 확인합니다.
23 단계 – 이제 다음 단계는 편집기 창에서 네 번째 테스트 단계의 값 텍스트 상자에 테스트 데이터를 입력하는 것입니다. 값 텍스트 상자에 'InvalidPassword'를 입력합니다. 사용자는 원하는대로 테스트 데이터를 변경할 수 있습니다.
24 단계 - 이제 편집기 창에서 다섯 번째 빈 테스트 단계를 선택합니다.
25 단계 - 명령 텍스트 상자에 '클릭'명령을 입력합니다. 'click'명령은 웹 페이지 내에서 지정된 웹 요소를 클릭합니다.
26 단계 – 이제 웹 브라우저로 전환하여 로그인 양식의 '로그인'버튼에 마우스 커서를 놓고 마우스 오른쪽 버튼을 클릭합니다.
'Inspect Element with Firebug'옵션을 선택합니다.
27 단계 – 아래 HTML 코드는 '로그인'버튼에 속하는 고유 한 속성 속성을 나타냅니다.
로케이터로 ID를 선택합니다. ID 값을 복사하여 'id ='로 시작하는 세 번째 테스트 단계의 대상 필드에 붙여 넣습니다.
(확대 이미지를 보려면 클릭하십시오)
28 단계 – 찾기 버튼을 클릭하여 선택한 로케이터가 웹 페이지에서 지정된 UI 요소를 찾고 찾는 지 확인합니다.
이제 테스트 스크립트가 완료되었습니다. 완성 된 테스트 스크립트를 보려면 다음 그림을 참조하십시오.
29 단계 – 생성 된 테스트 스크립트를 재생하고 이전 튜토리얼에서했던 것과 같은 방식으로 저장합니다.
결론
이 튜토리얼에서 우리는 또 다른 스크립트 생성 도구 또는 스크립트 생성을 돕는 도구를 소개했습니다.
Firebug는 놀랍게도 웹 페이지에서 웹 요소를 찾을 수있는 큰 잠재력을 가지고 있습니다. 따라서 사용자는 도구의 기능을 활용하여 효과적이고 효율적인 자동화 테스트 스크립트를 수동으로 만들 수 있습니다.
다음 튜토리얼 # 5 : 다음 튜토리얼로 넘어 가서 Selenium의 다양한 유형의 로케이터 및 테스트 스크립트를 빌드하기위한 접근성 기술 . 그 동안 독자는 Firebug를 사용하여 자신의 자동화 테스트 스크립트 빌드를 시작할 수 있습니다.
HTML 요소를 검사하거나 스크립트를 만드는 데 Firebug를 사용한 적이 있습니까? 유용하다고 생각하십니까? 의견에 귀하의 경험을 공유하십시오
추천 도서
- TestNG 프레임 워크를 사용하여 Selenium 스크립트를 작성하는 방법-TestNG Selenium Tutorial # 12
- Cucumber Selenium 튜토리얼 : Cucumber Java Selenium WebDriver 통합
- Selenium 스크립트 빌드를 위해 Chrome 및 IE 브라우저에서 요소를 찾는 방법 – Selenium Tutorial # 7
- Generics 및 Testsuite 생성 – Selenium Tutorial # 22
- Selenium WebDriver 소개 – Selenium Tutorial # 8
- Jenkins와 Selenium WebDriver의 통합 : 단계별 자습서
- 초보자를위한 심층 이클립스 튜토리얼
- 효율적인 Selenium 스크립팅 및 문제 해결 시나리오 – Selenium 자습서 # 27