IT Nomad life for 17 years

South Korea -> India -> Slovakia -> Netherlands -> USA

traveled five countries all over the world.

NJ (Little Ferry) -> RI (Smithfield) -> CA (San Diego) -> MN (Eden Prairie) -> IL (Chicago)

lived in 5 states in the USA.

Such a challenging life. :)

This ain't a song for the broken-hearted
No silent prayer for the faith-departed
I ain't gonna be just a face in the crowd
You're gonna hear my voice
When I shout it out loud

It's my life
It's now or never
I ain't gonna live forever
I just want to live while I'm alive
(It's my life)
My heart is like an open highway
Like Frankie said
I did it my way
I just want to live while I'm alive
It's my life

This is for the ones who stood their ground
It's for Tommy and Gina who never backed down
Tomorrow's getting harder, make no mistake
Luck ain't enough
You've got to make your own breaks

It's my life
And it's now or never
I ain't gonna live forever
I just want to live while I'm alive
(It's my life)
My heart is like an open highway
Like Frankie said
I did it my way
I just want to live while I'm alive
It's my life

You better stand tall when they're calling you out
Don't bend, don't break, baby, don't back down

It's my life
And it's now or never
I ain't gonna live forever
I just want to live while I'm alive
(It's my life)
My heart is like an open highway
Like Frankie said
I did it my way
I just want to live while I'm alive
(It's my life)

Using Hamcrest for testing - Tutorial

import static org.hamcrest.MatcherAssert.assertThat;
import static org.hamcrest.Matchers.is;
import static org.hamcrest.Matchers.equalTo;

boolean a;
boolean b;

// all statements test the same
assertThat(a, equalTo(b));
assertThat(a, is(equalTo(b)));
assertThat(a, is(b));

// JUnit 4 for equals check
assertEquals(expected, actual);
// Hamcrest for equals check
assertThat(actual, is(equalTo(expected)));

// JUnit 4 for not equals check
assertNotEquals(expected, actual)
// Hamcrest for not equals check
assertThat(actual, is(not(equalTo(expected))));

assertThat("test", anyOf(is("testing"), containsString("est")));

assertTrue(result instanceof String);
// error message:
java.lang.AssertionError
    at org.junit.Assert.fail(Assert.java:86)
    at org.junit.Assert.assertTrue(Assert.java:41)
    at org.junit.Assert.assertTrue(Assert.java:52)
// ...


assertEquals(String.class, result.getClass());
// error message:
java.lang.NullPointerException
    at com.vogella.hamcrest.HamcrestTest.test(HamcrestTest.java:30)
// ....


assertThat(result, instanceOf(String.class));
// error message:
java.lang.AssertionError:
Expected: an instance of java.lang.String
     but: null
    at org.hamcrest.MatcherAssert.assertThat(MatcherAssert.java:20)
    at org.hamcrest.MatcherAssert.assertThat(MatcherAssert.java:8)
// ...

dependencies {
    // Unit testing dependencies
    testCompile 'junit:junit:4.12'
    // Set this dependency if you want to use Hamcrest matching
    testCompile 'org.hamcrest:hamcrest-library:1.3'
}

<dependency>
<groupId>org.hamcrest</groupId>
<artifactId>hamcrest-library</artifactId>
<version>1.3</version>
<scope>test</scope>
</dependency>

assertThat(Long.valueOf(1), instanceOf(Integer.class));
// shortcut for instanceOf
assertThat(Long.valueOf(1), isA(Integer.class));

import static org.hamcrest.MatcherAssert.assertThat;
import static org.hamcrest.Matchers.*;

import org.junit.Test;

import java.util.Arrays;
import java.util.List;

import static org.hamcrest.MatcherAssert.assertThat;
import static org.hamcrest.Matchers.contains;
import static org.hamcrest.Matchers.containsInAnyOrder;
import static org.hamcrest.Matchers.greaterThan;
import static org.hamcrest.collection.IsCollectionWithSize.hasSize;
import static org.hamcrest.core.Every.everyItem;

public class HamcrestListMatcherExamples {
    @Test
    public void listShouldInitiallyBeEmpty() {
        List<Integer> list = Arrays.asList(5, 2, 4);

        assertThat(list, hasSize(3));

        // ensure the order is correct
        assertThat(list, contains(5, 2, 4));

        assertThat(list, containsInAnyOrder(2, 4, 5));

        assertThat(list, everyItem(greaterThan(1)));

    }
}

// Check that a list of objects has a property race and
// that the value is not ORC
assertThat(fellowship, everyItem(hasProperty("race", is(not((ORC))))));

public static Matcher<String> length(Matcher<? super Integer> matcher) {
    return new FeatureMatcher<String, Integer>(matcher, "a String of length that", "length") {
        @Override
        protected Integer featureValueOf(String actual) {
            return actual.length();
        }
    };
}

@Test
public void fellowShipOfTheRingShouldContainer7() {
        assertThat("Gandalf", length(is(8)));
}
public static  Matcher<String> length(Matcher<? super Integer> matcher) {
        return new FeatureMatcher<String, Integer>(matcher, "a String of length that", "length") {
                @Override
                protected Integer featureValueOf(String actual) {
                  return actual.length();
                }
        };
}

import org.hamcrest.Description;
import org.hamcrest.TypeSafeMatcher;

public class RegexMatcher extends TypeSafeMatcher<String> {

        private final String regex;

        public RegexMatcher(final String regex) {
                this.regex = regex;
        }

        @Override
        public void describeTo(final Description description) {
                description.appendText("matches regular expression=`" + regex + "`");
        }

        @Override
        public boolean matchesSafely(final String string) {
                return string.matches(regex);
        }


         // matcher method you can call on this matcher class
    public static RegexMatcher matchesRegex(final String regex) {
        return new RegexMatcher(regex);
    }
}

package com.vogella.android.testing.applicationtest;


import org.junit.Test;

import static org.hamcrest.MatcherAssert.assertThat;

public class TestCustomMatcher {

    @Test
    public void testRegularExpressionMatcher() throws Exception {
        String s ="aaabbbaaaa";
        assertThat(s, RegexMatcher.matchesRegex("a*b*a*"));
    }

}

@Test
public void () {
    List<Integer> list = new ArrayList<>();
    assertThat(list, both(hasSize(1)).and(contains(42)));
}

Expected: (a collection with size <1> and iterable containing [<42>])
     but: a collection with size <1> collection size was <0>.

public class MatcherCombinator<T> extends BaseMatcher<T> {
    private final List<Matcher<? super T>> matchers = new ArrayList<>();
    private final List<Matcher<? super T>> failedMatchers = new ArrayList<>();

    private MatcherCombinator(final Matcher<? super T> matcher) {
        matchers.add(matcher);
    }

    public MatcherCombinator<T> and(final Matcher<? super T> matcher) {
        matchers.add(matcher);
        return this;
    }

    @Override
    public boolean matches(final Object item) {
        boolean matchesAllMatchers = true;
        for (final Matcher<? super T> matcher : matchers) {
            if (!matcher.matches(item)) {
                failedMatchers.add(matcher);
                matchesAllMatchers = false;
            }
        }
        return matchesAllMatchers;
    }

    @Override
    public void describeTo(final Description description) {
        description.appendValueList("\n", " " + "and" + "\n", "", matchers);
    }

    @Override
    public void describeMismatch(final Object item, final Description description) {
        description.appendText("\n");
        for (Iterator<Matcher<? super T>> iterator = failedMatchers.iterator(); iterator.hasNext();) {
            final Matcher<? super T> matcher = iterator.next();
            description.appendText("Expected: <");
            description.appendDescriptionOf(matcher).appendText(" but ");
            matcher.describeMismatch(item, description);
            if (iterator.hasNext()) {
                description.appendText(">\n");
            }
        }
    }

    public static <LHS> MatcherCombinator<LHS> matches(final Matcher<? super LHS> matcher) {
        return new MatcherCombinator<LHS>(matcher);
    }
}

@Test
public void test() {
    List<Integer> list = new ArrayList<>();
    assertThat(list, matches(hasSize(1)).and(contains(42)));
}

java.lang.AssertionError:
Expected:
<a collection with size <1>> and
<iterable containing [<42>]>
     but:
Expected: <a collection with size <1> but collection size was <0>>
Expected: <iterable containing [<42>] but No item matched: <42>.

7. Grouping your matchers for import

If you define many custom matchers it might become tedious to import them one by one into your test files. By grouping them into a single class you can import them with one statement. You can also group them together with Hamcrest matchers.

많은 custom matchers를 정의하면 테스트 파일에 하나씩 import하는 것이 불편 할 수 있습니다. single class로 그룹화하여 하나의 statement로 가져올 수 있습니다. Hamcrest matchers와 함께 그룹화 할 수도 있습니다.

package com.vogella.hamcrest;
import com.vogella.hamcrest.matchers.RegexMatcher;
import org.hamcrest.Matcher;
import org.hamcrest.Matchers;

public class MyMatchers
{
    public static <T> Matcher<T> instanceOf(Class<T> target) {
        return Matchers.instanceOf(target);
    }

   public static Matcher<String> matchesRegex(String target) {
          return RegexMatcher.matchesRegex(target);
   }
}

In your test file:

import static com.vogella.hamcrest.MyMatchers.*;

8. About this website

Support free content

Questions and discussion

Tutorial & code license

Get source code

9. Hamcrest resources

Hamcrest homepage

Hamcrest hosting at Github

Hamcrest tutorial

Hamcrest examples

Hamcrest quick reference

Cucumber Introduction:

Cucumber is a tool based on Behavior Driven Development (BDD) framework which is used to write acceptance tests for web application. It allows automation of functional validation in easily readable and understandable format (like plain English) to Business Analysts, Developers, Testers, etc.

Cucumber는 BDD (Behavior Driven Development) 프레임 워크를 기반으로 웹 응용 프로그램에 대한 acceptance 테스트를 작성하는 데 사용되는 도구입니다. 비즈니스 분석가, 개발자, 테스터 등이 쉽게 읽을 수 있고 이해할 수있는 형식 (일반 영어와 같은)으로 기능 검증을 자동화 할 수 있습니다.

Cucumber feature files can serve as a good document for all. There are many other tools like JBehave which also support BDD framework. Initially Cucumber was implemented in Ruby and then extended to Java framework. Both the tools support native JUnit.

Cucumber feature 파일은 훌륭한 문서 역할을 할 수 있습니다. BDD 프레임 워크를 지원하는 툴 들 로는 JBehave 등과 같은 다른 많은 도구들도 있습니다. 처음에 Cucumber는 Ruby에서 구현되었고 Java 프레임 워크로 확장되었습니다. 두 도구 모두 native JUnit을 지원합니다.

Behavior Driven Development is extension of Test Driven Development and it is used to test the system rather than testing the particular piece of code. We will discuss more about the BDD and style of writing BDD tests.

Behavior Driven Development는 Test Driven Development의 확장이며 특정 코드를 테스트하는 대신 시스템을 테스트하는 데 사용됩니다. 아래에 BDD 및 BDD 테스트 작성 스타일에 대해 자세히 설명합니다.

Cucumber can be used along with Selenium, Watir, and Capybara etc. Cucumber supports many other languages like Perl, PHP, Python, .Net etc. In this tutorial we will concentrate on Cucumber with Java as a language.

Cucumber는 Selenium, Watir, Capybara 등과 함께 사용할 수 있습니다. Cucumber는 Perl, PHP, Python, .NET 등의 많은 다른 언어를 지원합니다.이 튜토리얼에서는 Java와 함께 Cucumber를 언어로 사용합니다.

Cucumber Basics:

In order to understand cucumber we need to know all the features of cucumber and its usage.

Cucumber를 이해하기 위해서는 Cucumber의 모든 특징과 사용법을 알아야합니다.

#1) Feature Files:

Feature files are essential part of cucumber which is used to write test automation steps or acceptance tests. This can be used as live document. The steps are the application specification. All the feature files ends with .feature extension.

Feature file은 테스트 자동화 단계 또는 acceptance 테스트를 작성하는 데 사용되는 Cucumber의 핵심 부분입니다. 이것은 live document로 사용할 수 있습니다. steps는 application specification입니다. 모든 Feature file은 .feature 확장자로 끝납니다.

Sample feature file:

Feature: Login Functionality Feature

In order to ensure Login Functionality works,
I want to run the cucumber test to verify it is working

Scenario: Login Functionality

Given user navigates to SOFTWARETETINGHELP.COM
When user logs in using Username as “USER” and Password “PASSWORD”
Then login should be successful

Scenario: Login Functionality

Given user navigates to SOFTWARETETINGHELP.COM
When user logs in using Username as “USER1” and Password “PASSWORD1”
Then error message should be thrown

#2) Feature:

This gives information about the high level business functionality (Refer to previous example) and the purpose of Application under test. Everybody should be able to understand the intent of feature file by reading the first Feature step. This part is basically kept brief.

여기에는 대략적인 개념의 business functionality (이전 예 참조) 및 테스트중 인 응용 프로그램의 목적에 대한 정보가 있습니다. 첫 번째 Feature step을 읽으면 누구나 이 Feature file의 의도를 이해할 수 있어야 합니다. 이 부분은 기본적으로 간략하게 작성합니다.

#3) Scenario:

Basically a scenario represents a particular functionality which is under test. By seeing the scenario user should be able to understand the intent behind the scenario and what the test is all about. Each scenario should follow given, when and then format. This language is called as “gherkin”.

기본적으로 시나리오는 테스트중인 특정 기능을 나타냅니다. 시나리오 사용자는 시나리오의 의도와 그 테스트가 무엇인지 이해할 수 있어야합니다. 각 시나리오는 주어진 시간과 형식을 따라야합니다. 이 언어는 "작은 Cucumber (gherkin)"라고 불립니다.

1. Given: As mentioned above, given specifies the pre-conditions. It is basically a known state.
2. When: This is used when some action is to be performed. As in above example we have seen when the user tries to log in using username and password, it becomes an action.
3. Then: The expected outcome or result should be placed here. For Instance: verify the login is successful, successful page navigation.
4. Background: Whenever any step is required to perform in each scenario then those steps needs to be placed in Background. For Instance: If user needs to clear database before each scenario then those steps can be put in background.
5. And: And is used to combine two or more same type of action.
   
   

Example:

Feature: Login Functionality Feature

Scenario: Login Functionality
Given user navigates to SOFTWARETETINGHELP.COM
When user logs in using Username as “USER”
And password as “password”
Then login should be successful
And Home page should be displayed

Example of Background:

Background:

Given user logged in as databases administrator
And all the junk values are cleared

#4) Scenario Outline:

Scenario outlines are used when same test has to be performed with different data set. Let’s take the same example. We have to test login functionality with multiple different set of username and password.

시나리오 개요는 동일한 테스트가 여러 다른 data set로 수행되어야 할 때 사용됩니다. 같은 예를 들어 봅시다. 여러 다른 사용자 이름 및 비밀번호 세트로 로그인 기능을 테스트해야합니다.

Feature: Login Functionality Feature

In order to ensure Login Functionality works,
I want to run the cucumber test to verify it is working

Scenario Outline: Login Functionality

Given user navigates to SOFTWARETESTINGHELP.COM
When user logs in using Username as <username> and Password <password>
Then login should be successful

Examples:
|username         |password          |
|Tom                     |password1        |
|Harry                   |password2        |
|Jerry                    |password3        |

Note:

1. As shown in above example column names are passed as parameter to When statement.
2. In place of Scenario, you have to use Scenario Outline.
3. Examples are used to pass different arguments in tabular format. Vertical pipes are used to separate two different columns. Example can contain many different columns.
   
    
   위의 예에서와 같이 열 이름은 매개 변수로 When 문에 전달됩니다.
   Scenario 대신 Scenario Outline을 사용해야합니다.
   이 예제는 다른 인수를 표 형식으로 전달하는 데 사용됩니다. Vertical pipes는 두 개의 서로 다른 columns을 분리하는 데 사용됩니다. 이 예제에 많은 다른 열을 포함 할  수 있습니다.
   
   

Javascript sort()

var arr = ["Banana", "Orange", "Apple", "Mango", "apple", "1apple"];

arr.sort();

["1apple", "Apple", "Banana", "Mango", "Orange", "apple"]

It is case sensitive.

To make it case insensitive

var arr = ["Banana", "Orange", "Apple", "Mango", "apple", "1apple"];

arr.sort(function(a,b) {

    a = a.toLowerCase();

    b = b.toLowerCase();

    if( a == b) return 0;

    return a < b ? -1 : 1;

});

["1apple", "Apple", "apple", "Banana", "Mango", "Orange"]

or

var arr = ["Banana", "Orange", "Apple", "Mango", "apple", "1apple"];

arr.sort(

    function(a, b){

        if (a.toLowerCase() < b.toLowerCase()) return -1;

        if (a.toLowerCase() > b.toLowerCase()) return 1;

        return 0;

    }

); 

["1apple", "Apple", "apple", "Banana", "Mango", "Orange"]

Protractor

Check not exist

expect(element(by.css('.switch')).isPresent()).to.become(false).and.notify(next);

expect(items.length).toBe(0);

element.all(locator).map(mapFunction)

<ul class="items">
  <li class="one">First</li>
  <li class="two">Second</li>
  <li class="three">Third</li>
</ul>

let items = element.all(by.css('.items li')).map(function(elm, index) {
  return {
    index: index,
    text: elm.getText(),
    class: elm.getAttribute('class')
  };
});
expect(items).toEqual([
  {index: 0, text: 'First', class: 'one'},
  {index: 1, text: 'Second', class: 'two'},
  {index: 2, text: 'Third', class: 'three'}
]);

// Or using the shortcut $$() notation instead of element.all(by.css()):

let items = $$('.items li').map(function(elm, index) {
  return {
    index: index,
    text: elm.getText(),
    class: elm.getAttribute('class')
  };
});
expect(items).toEqual([
  {index: 0, text: 'First', class: 'one'},
  {index: 1, text: 'Second', class: 'two'},
  {index: 2, text: 'Third', class: 'three'}
]);

Example

step.Then(/^Verify Search Result search by "([^"]*)"$/, 
(searchName:string, done:Callback)=>{
    let cName = customerViewPage.customerNameList();

    cName.map(function(eachName){
      return eachName.getText().then(function(cNameList){
        return cNameList;
      });
    }).then(function(cNameList){
      for(let i = 0; i < cNameList.length; i++){
        console.log(cNameList[i] + '  contains ' + searchName);
        expect(cNameList[i]).is.contains(searchName);
      }
      done();
    });
});

element.all(locator).each(eachFunction)

<ul class="items">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

element.all(by.css('.items li')).each(function(element, index) {
  // Will print 0 First, 1 Second, 2 Third.
  element.getText().then(function (text) {
    console.log(index, text);
  });
});

// Or using the shortcut $$() notation instead of element.all(by.css()):

$$('.items li').each(function(element, index) {
  // Will print 0 First, 1 Second, 2 Third.
  element.getText().then(function (text) {
    console.log(index, text);
  });
});

Example

step.Then(/^Check sorting$/,  (done: Callback)=> {
  let sorted = [] , unSorted = [];
  let cName = customerViewPage.customerNameList();
  let i = 0;
  cName.each(function(eachName){
    eachName.getText().then(function(name){
      // unSorted[i] = name.toLowerCase();
      unSorted[i] = name;
      i++;
    });
  }).then(function(){
    sorted = unSorted.slice();
    // sorted.sort();
    sorted.sort(function(a, b) {
      a = a.toLowerCase();
      b = b.toLowerCase();
      if ( a === b) {return 0;}
      return a < b ? -1 : 1;
    });

    for(let i = 0; i < sorted.length; i++){
      console.log(' Array1  : ' + sorted[i] + 
      '  is equals to Array2 : ' + unSorted[i]);
      expect(sorted[i]).is.equal(unSorted[i]);
    }
    done();
  });
});

element.all(locator).then(thenFunction)

ElementArrayFinder.prototype.then

Retrieve the elements represented by the ElementArrayFinder. The input function is passed to the resulting promise, which resolves to an array of ElementFinders.

<ul class="items">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

element.all(by.css('.items li')).then(function(arr) {
  expect(arr.length).toEqual(3);
});

// Or using the shortcut $$() notation instead of element.all(by.css()):

$$('.items li').then(function(arr) {
  expect(arr.length).toEqual(3);
});

Leaving a memo

customerNameList()      {return element.all(by.css("#items")).
all(by.css(".list-item-title"));} 

This customerNameList() fetches customer name list data.

 step.Then(/^Check sorting$/,  (done: Callback)=> {
   let sorted = [] , unSorted = [];
   let cName = customerViewPage.customerNameList();

   cName.map(function(eachName){
     return eachName.getText().then(function(unSorted){
       return unSorted;
     });
   }).then(function(unSorted){
     let sorted = unSorted.slice();
     sorted = sorted.sort(); //sort the array
     for(let i = 0; i < sorted.length; i++){
       console.log(' Array1  : ' + sorted[i] + 
'  is equals to Array2 : ' + unSorted[i]);
       expect(sorted[i]).is.equal(unSorted[i]);
     }
     done();
   });
 });

Check sorting results.
unSorted[] array will have current customer name list.
sorted[] array is sorting the current customer name list.

compare sorted[] and unSorted[]
if pass then the customer list is sorted properly.

step.Then(/^Check sorting$/,  (done: Callback)=> {
  let sorted = [] , unSorted = [];
  let cName = customerViewPage.customerNameList();
  let i = 0;
  cName.each(function(eachName){
    eachName.getText().then(function(name){
      // unSorted[i] = name.toLowerCase();
      unSorted[i] = name;
      i++;
    });
  }).then(function(){
    sorted = unSorted.slice();
    sorted.sort();
    for(let i = 0; i < sorted.length; i++){
      console.log(' Array1  : ' + sorted[i] + 
'  is equals to Array2 : ' + unSorted[i]);
      expect(sorted[i]).is.equal(unSorted[i]);
    }
    done();
  });
});

This step has the same functionality as above.

let statelist:any;
 let sortedStatelist:any;
 addCustomerPage.state().click().then(()=>{
   addCustomerPage.stateDropDownOptions().then(function (actualListOfStates) {
     statelist=actualListOfStates.slice();
     sortedStatelist=statelist.sort();
     // expect(statelist).to.contains(sortedStatelist);
     for(let i=0;i<sortedStatelist.length;i++){
       expect(statelist[i]).is.equal(sortedStatelist[i]);
     }
     done();
   })
 })

Fetch items from dropdown menu and check sorting status.

JavaScript Array slice() Method

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

Orange,Lemon

Definition and Usage

The slice() method returns the selected elements in an array, as a new array object.

The slice() method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.

Note: The original array will not be changed.

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>

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

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가 아니라는 것을 알 수 있습니다. 그리고 코드에서 아무 것도 놓치지 않았는지 확인할 수 있는 좋은 방법입니다.