Protractor For Beginners Part 1

Protractor For Beginners Part 1

6^th Nov 2015 · 5 min read

0

When I started writing automated tests in Protractor, I had never programmed anything before (unless you count learning enough html/css on codecademy to create an incredibly basic, 90’s style webpage). Some of the problems I encountered whilst learning Protractor were very hard to find on Google, which did make my learning a lot slower than I would have liked. Luckily I work with amazing people who are more than happy to share their knowledge which has saved me countless times, but unfortunately there are many people out there who do not have access to such resources. So, I have decided to create a tutorial which documents as many issues as possible that I encountered whilst learning.

Protractor로 automated tests를 쓰기 시작했을 때, 나는 전혀 프로그래밍 경험이 없었다. (codecademy에서 html / css를 충분히 배우지 않아서 90년대 스타일의 아주 기초적인 html 지식만 있는 상태였다). Protractor를 배우는 동안 내가 접했던 여러 어려운 점들은 Google에서 해결책을 찾기가 어려웠다. 그래서 나의 배움은 내가 바라는 것보다 훨씬 더뎠다. 다행히도 나는 자신들의 지식을 공유하는 것을 행복하게 생각하는 많은 사람들의 도움으로 많은 정보를 얻을 수 있었다. 하지만 불행히도 그런 자료들에 접근하지 못하는 사람들도 많이 있다. 그래서, 나는 학습하면서 가능한 많은 것들을 문서화 한 tutorial을 작성하기로 결심했다.

This tutorial will be broken down into bite sized chunks, with each new blog post as a new task, and it is aimed at people with little to no experience of programming. You will be writing the tests for the AngularJs site itself, since this is a good site for practising writing Protractor tests for as it is written in AngularJs; the JavaScript framework that Protractor runs tests against.

이 튜토리얼은 각 단위별로 구분될 것이다. 그래서 각각의 새로운 블로그는 새로운 task가 될 것이다. 그럼으로서 프로그래밍에 거의 경험이 없는 사람들을 대상으로 살 것이다.  여러분들은 AngularJs 를 사용해 대한 테스트를 할 것이다. 왜냐하면 이것은 AngularJs로 작성되었기 때문에 테스트 작성을 연습하기에 아주 안성맞춤이기 때문이다. 

Note: if you get stuck at any point, the entire code can be found in https://github.com/hannimator/angularjs.org_protractor for use as reference. Snippets of the code will be shown as examples throughout.

참고 : 문제가 발생하면 https://github.com/hannimator/angularjs.org_protractor에서 전체 코드를 참조 할 수 있다. 코드의 Snippets에는 예제들이 있다.

Introduction:

To begin with, follow this tutorial https://github.com/angular/protractor/blob/master/docs/tutorial.md. It will run through how to setup Protractor and Jasmine, and the basics of running some simple tests. Another good read, but not necessary for this tutorial is https://github.com/angular/protractor/blob/master/docs/toc.md, which has some more in depth information about Protractor and Jasmine. Once you have completed the above tutorials, follow the steps below.

처음 시작할 때는 https://github.com/angular/protractor/blob/master/docs/tutorial.md)를 참조하세요. Protractor와 재스민을 설치하는 방법과 몇 가지 간단한 테스트를 실행하는 기본 사항을 설명합니다. 다른 유용한 정보들은 https://github.com/angular/protractor/blob/master/docs/toc.md 를 참조하세요.  프로트랙터와 자스민에 대해 좀 더 깊은 내용을 접할 수 있습니다. 이 튜토리얼들을 살펴보시고 난 후 아래 스텝들을 따라해 보세요.

Page Objects, Developer Tools and the DOM

Page objects model the UI objects that your test interacts with inside your tests code. Using page objects keeps the tests easier to maintain (since if anything changes, you only have to change the page objects rather than change every single test). To find these UI objects, open up the browser developer tools by pressing f12 and select the 'elements' tab, or find the element (e.g. a button), right click and select 'Inspect element' from the dropdown list. For this example, use the AngularJs site. Right click on the 'View on Github' button and select 'Inspect element'. Observe the line

   <a class="btn btn-large" href="https://github.com/angular/angular.js">
      <i class="icon-github-sign"></i>
         "View on GitHub"
   </a>

Is highlighted.

Page objects model의 UI objects는 여러분이 작성한 테스트 코드 내부와 상호작용하게 됩니다. 페이지 객체를 사용하면 테스트들을 더 쉽게 관리 할 수 있습니다 (변경 사항이 있으면 모든 단일 테스트를 변경하는 대신 페이지 객체 만 변경하면됩니다). 이러한 UI 개체를 찾으려면 f12 키를 눌러 browser developer tools을 열고  'elements' tab을 선택합니다. 혹은 element (예 : 버튼)를 찾아 마우스 오른쪽 버튼으로 클릭 한 다음 드롭 다운 목록에서 'Inspect element'를 선택합니다제. 이 예에서는 AngularJs 사이트를 사용합니다. 'View on Github' button을 마우스 오른쪽 버튼으로 클릭하고 'Inspect element'를 선택하십시오. 선이 강조 표시되어 있는지 확인하십시오.

For this element (or page object) you can see the classname is “btn btn-large”, so when you write the page object, write it like this:

이 element (또는 page object체)의 경우 클래스 이름이 "btn btn-large"라는 것을 알 수 있으므로 page object를 작성할 때 다음과 같이 작성하십시오.

       
    var pageObjectName = element(by.css(“.btn.btn-large”));
       

The reason it is written as ".btn.btn-large" rather than "btn btn-large" is down to locators, which are what tell Protractor where to find certain elements. A CSS selector would look like this: ".someCSS", whereas an ID selector would look like this: "#someID". Some more information on this can be found in the Protractor documentation

"btn btn-large"가 아닌 ".btn.btn-large"라고 쓰여진 이유는 Locator에 있습입니다. 이것은 Protractor에게 특정 elements를 어디에서 찾을지 알려주는 것입니다. CSS selector는 다음과 같이 보일 것입니다 : ".someCSS" 반면 IDselector는 "#someID"와 같이 보일 겁니다. 이것에 관한 더 많은 정보는 Protractor documentation 에서 찾을 수 있습니다.

If you want to learn a little bit more about the DOM which is mentioned throughout this tutorial, I have found https://css-tricks.com/dom/ to be a very useful and concise explanation.

이 튜토리얼에서 언급 된 DOM에 대해 조금 더 배우고 싶다면 https://css-tricks.com/dom/ 를 참조하세요. 매우 유용하고 간결한 설명이 있습니다.

Disabling Suites and Specs

To disable and enable suites and specs, simply place an x in front of the describe or the it (depending which level you want to disable the tests at, placing an x in front of the describe will disable all tests within that describe) so that it looks like this: xdescribe or xit.

suites와 specs을 disable 하게 하려면 단순히 설명 앞에 x를 표시하세요. (테스트를 사용 disable하게 할 레벨에 따라 설명 앞에 x를 붙이면 해당 설명 내의 모든 테스트가 사용 불가능하게됩니다). 다음과 같이 하시면 됩니다. : xdescribe 또는 xit.

Getting Started: Home Page

Open up https://angularjs.org/. Create a new folder where you want to keep your project. Open up your preferred text editor (I personally use Brackets), and open up the folder that you have just created. Create a new .js file called 'HomePageSpec.js' and create a config file called 'protractorConf.js'. Paste in this code in to the 'protractorConf.js' file:

https://angularjs.org/를 엽니다. 프로젝트를 keep 할 새 폴더를 만듭니다. 원하는 텍스트 편집기를 열고 방금 생성 한 폴더를 엽니다. 'HomePageSpec.js'라는 새 .js 파일을 만들고 'protractorConf.js'라는 config 파일을 만듭니다. 이 코드를 'protractorConf.js'파일에 붙여 넣습니다.

       
   exports.config = {
      seleniumAddress: 'http://localhost:4444/wd/hub',
      specs: ['HomePageObjectSpec.js'],
      onPrepare: function () {	
         browser.driver.manage().window().setSize(1680, 1050);
      },
   }
       

Task 1.1: Describe “angularjs.org should have three Center Stage buttons”

What will you learn from this task?

• How to set up a describe suite and it spec.
• How to create page objects.
• How to check that something is displayed on the screen or present in the DOM using isDisplayed

여기에서 무엇을 배울 것입니까?

     describe suite와 spec을 설정하는 방법.
     페이지 객체를 만드는 방법.
     isDisplayed를 사용하여 화면에 표시되거나 DOM에 표시되는지 확인하는 방법 

In this task you will test that elements are present and visible on the page using the three center stage buttons on the home page of AngularJs.org and the Jasmine matcher .isDisplayed (read more about Jasmine matchers here. isDisplayed checks to see if the element is actually present on the page: if the element is not in the DOM whilst using isDisplayed, it will throw an exception error. See how to use isDisplayed below.

이 task에서는 AngularJs.org와 Jasmine matcher .isDisplayed의 홈 페이지에있는 3 개의 중앙 스테이지 버튼을 이용해서 해당 엘리먼트들이 페이지에 존재하고 볼수 있는지에 대해 테스트 할 것입니다.  (여기에서 Jasmine matchers에 대해 자세히 알아보십시오.) .isDisplayed는 엘리먼트가 실제로 페이지에 존재하고 보이는지를 체크합니다. : isDisplayed를 사용하는 동안 요소가 DOM에 없으면 exception error가 발생합니다. 아래의 isDisplayed 사용 방법을 참조하십시오.

1. Open up angularjs.org
2. Right click on the “View on GitHub” button, and select ‘Inspect element’ to bring up the html in the developer console.
3. Find the code that relates to the “View on GitHub” button (if you hover over

      
               <a class="btn btn-large" href="https://github.com/angular/angular.js">
           

   you will be able to see the button highlight).
   
        1. angularjs.org를 엽니 다.
        2. "View on GitHub"버튼을 마우스 오른쪽 버튼으로 클릭하고 'Inspect element'를 선택하여 개발자 콘솔에서 html을 가져옵니다.
        3. "View on GitHub"버튼과 관련된 코드를 찾습니다 (마우스를 올려 놓으면 버튼 강조 표시를 볼 수 있습니다).
   
   
4. If you navigate up through the divs, you will be able to find the html code that contains all three elements. The class for this is center stage-buttons.
5. In your text editor, open up your “HomePageSpec.js” file, and create a variable called HomePage like this:
   
       4. div를 통해 위로 이동하면 세 요소를 모두 포함하는 html 코드를 찾을 수 있습니다. 이를 위한 클래스는 중앙 스테이지 버튼입니다.
       5. 텍스트 편집기에서 "HomePageSpec.js"파일을 열고 다음과 같이 HomePage라는 변수를 만듭니다.
   
   

          
      var HomePage = function() {
    
      };
          

   This HomePage variable contains page objects, which are the elements on the page. Different page objects will be used for different sections that are tested on.
   
       이 HomePage 변수는 페이지의 elements인 page objects를 포함합니다. 테스트를 거친 다른 섹션에 대해 서로 다른 페이지 객체가 사용됩니다.
   
   
6. Create page objects for the center stage buttons with the HomePage variable, like so:
   
       6. 다음과 같이 HomePage 변수를 사용하여 가운데 스테이지 버튼에 대한 페이지 객체를 만듭니다.
   
   

          
      var HomePage = function() { 
         this.centerStageButtons = element(by.css(".center.stage-buttons"));
   
         this.viewOnGitHubButton = this.centerStageButtons.all(by.css(".btn.btn-large")).get(0);
         this.downloadButton = this.centerStageButtons.element(by.css(".btn-primary"));
         this.designDocsButton = this.centerStageButtons.element(by.css(".btn-warning"));
      };
          

   
   You can see that there has been a page object created for centerStageButtons. It is good practice to write the elements as they match the code in DOM as quite often there will be multiple elements with the same name. Chaining the page objects (as above) creates more readable code as it (most of the time) eliminates the need for using .get(index). I say most of the time, since sometimes having to use .get(index) is inevitable: so if you enter in to the browser console $(".btn.btn-large") you will be able to see multiple results are returned, which is why we use .get(0) for the viewOnGitHubButton example above.
   
       centerStageButton에 대해 생성 된 페이지 객체가 있다는 것을 알 수 있습니다. DOM 에서 매치되면 같은 이름으로 elements들이 여러번 사용되기 쉽기 때문에 이 엘리먼트들을 사용하는 것은 좋은 방법입니다. 위와 같이 page objects를 묶는 것은 (대부분의 경우) .get (index)를 사용할 필요가 없으므로 더 읽기 쉬운 코드를 생성합니다. 대부분의 경우, 때로는 .get (색인)을 사용해야하는 것이 불가피합니다. 브라우저 콘솔 $ ( ".btn.btn-large")에 입력하면 여러 결과가 반환되는 것을 볼 수 있습니다. , 위의 viewOnGitHubButton 예제에서 .get (0)을 사용하는 이유입니다.
   
   
   
   
7. Underneath the HomePage variable, create the test suite and spec like this:
   
   7. HomePage 변수 아래에 다음과 같이 테스트 suite와 spec을 작성하십시오.
   
   

   
      describe('angularjs.org', function() {
   
         beforeEach(function() {
            browser.get('https://angularjs.org/');
         });
     
         it('should have a three buttons', function() {
     
         });
      });
          

8. In the describe, create a new HomePage object and in the it spec write the expected result of the test as below:
   
   8. describe에 새 HomePage 객체를 만들고 이 객체의 spec에 다음과 같이 예상되는 테스트 결과를 작성합니다.

   
      describe('angularjs.org', function() {
         var homePage = new HomePage();
   
         beforeEach(function() {
            browser.get('https://angularjs.org/');
         });
     
         it('should have a three buttons', function() {
            expect(homePage.viewOnGitHubButton.isDisplayed()).toBe(true);
         });
      });
          

9. Run the test by opening up the command line, navigating to the folder where the config file is located. Type in protractor protractorConf.js and press Enter for the code to start running (make sure you have started the selenium webdriver by typing in webdriver-manager start and pressing enter in the command line).
   
   9. command line을 열고 config 파일이있는 폴더로 이동하여 테스트를 실행하십시오. 코드를 실행하려면 protractor protractorConf.js를 입력하고 Enter 키를 누릅니다 (webdriver-manager start를 입력하고 명령 행에서 Enter 키를 눌러 selenium webdriver를 시작했는지 확인하십시오).
   
   
10. Did it pass? Yes? Great! No? Double check you have the code written correctly by looking at the code inside the Spec folder here: https://github.com/hannimator/angularjs.org_protractor .
    
    10. 통과 했습니까? 예? 좋습니다! 아니요? Spec 폴더의 코드 (https://github.com/hannimator/angularjs.org_protractor)를보고 코드가 올바르게 작성되었는지 다시 확인하십시오.
    
    
11. Now that this test has passed, it is always best to check that it fails if set to false, so underneath the first expect, create another one set to false like this:
    
    11. 이제 이 테스트가 통과되었으므로 false로 설정하면 실패하는지 확인하는 것이 가장 좋습니다. 따라서 첫 번째 기대치 아래에서 다음과 같이 false로 설정된 또 다른 하나를 만듭니다.

           
       expect(homePage.viewOnGitHubButton.isDisplayed()).toBe(false);
           

12. Run the test. Observe the expect set to false fails. This ensures that it isn’t a false positive, and is always a good practice to ensure that you haven't missed anything in your code.
    
    12. 테스트를 실행하십시오. expect가 false로 설정된 것을 확인하십시오. 이렇게하면 false positive가 아니라는 것을 알 수 있습니다. 그리고 코드에서 아무 것도 놓치지 않았는지 확인할 수 있는 좋은 방법입니다.
    
    

In the next tutorial we will use what we learnt in this tutorial and start to learn how to interact with elements on the webpage, as well as the difference between using the matchers isPresent and isDisplayed.

다음 튜토리얼에서는이 튜토리얼에서 배운 것을 사용하고 웹 페이지에서 요소와 상호 작용하는 방법을 배우기 시작할 것이고, isPresent와 isDisplayed라는 matcher를 사용하는 것의 차이점도 알게 될 것이다.