search

WizardFactory / BlogSyncer

one write posting all of the world
Apache License 2.0
3 stars 10 forks source link

JUS-123 blog sync용 end to end test 방법 조사. #181

Closed kimalec closed 9 years ago

kimalec commented 9 years ago

https://docs.angularjs.org/tutorial

angularjs tutorial에 있는 e2e tests를 참고하여 blog sync용 제작.

kimalec commented 9 years ago

pokers added a comment - 22/Mar/15 5:05 PM

pokers added a comment - 28/Mar/15 4:18 PM

e2e.conf.js

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  capabilities: {
    'browserName': 'chrome'
  },
  specs: ['/Users/pokers/WebstormProjects/BlogSyncer/test/e2e/test_protractor.js'],
  baseUrl: 'http://www.justwapps.com',
  jasmineNodeOpts: {
    showColors: true
  }
};

test_protractor.js

/**
 * Created by pokers on 15. 3. 22..
 */
/*
* This is just example. You can refer to this.
*
describe('by model', function() {
    it('should find an element by text input model', function() {
        var username = element(by.model('username'));
        var name = element(by.binding('username'));
        username.clear();
        expect(name.getText()).toEqual('');
        username.sendKeys('Jane Doe');
        expect(name.getText()).toEqual('Jane Doe');
    });
});
describe('angularjs homepage', function() {
 it('should greet the named user', function() {
 browser.get('http://www.angularjs.org');
 element(by.model('yourName')).sendKeys('Julie');
 var greeting = element(by.binding('yourName'));
 expect(greeting.getText()).toEqual('Hello Julie!');
 });
 });
*/
// spec.js
describe('Protractor Demo App', function() {
    it('should have', function() {
        browser.get('http://www.justwapps.com/');

        expect(browser.getTitle()).toEqual('Super Calculator');
    });
});
kimalec commented 9 years ago

pokers added a comment - 28/Mar/15 7:37 PM

Protractor를 이용한 e2e test 개발을 위해서는 기본적으로 JS, Angular js, Node js에 대해서 지식이 있어야 한다. Protractor은 Jasmine test framework을 사용하고, 기본적인 syntax는 http://angular.github.io/protractor/#/ 에서 익힐 수 있다. 따라서, angurla js, jasmine, 기초 사용 법 및 상위 활용법 등의 사전 study가 필요하다. 단점은 webdriver를 이용하여 실제 browser를 이용한 테스트 이기 때문에 추후 복잡도가 높아질 경우 테스트 자체에 시간이 오래 걸릴 수 있다. 따라서, 좀비 js를 이용한 e2e test 등 실제 browser를 사용하지 않는 다른 방법도 조사해봐야 함.

아래는 blogsync page 에서 사용한 기초 예제이다. 이 밖에도 다양한 기능을 사용할 수 있다(study 필요)

  1. page titile 확인
    • main page 로딩 후 title name 확인.
      1. 로그인 페이지에서 트위터 아이콘의 정상 동작 확인.
    • 로그인 하이퍼 링크를 찾아 클릭
    • 로그인 페이지의 문구를 로딩하여 맞는지 확인.
    • provider list를 읽어서 5번째(트위터) 클릭.
describe('Test the blogsyncer', function() {
    it('should check title', function() {
        browser.get('http://www.justwapps.com/');
        expect(browser.getTitle()).toEqual('Invisible automation service BlogSyncer');
    });
});
describe('click test', function(){
    it('check login button', function(){
        browser.get('http://www.justwapps.com/');
        element(by.binding('signstat')).click();
        expect(element(by.binding('Please sign in')));
        element(by.repeater('provider in providers').row(5)).click();
    });
});

pokers added a comment - 04/Apr/15 10:32 AM - edited

해결 해야할 문제점

  1. 각각의 provider page에 로그인 하는 테스트는 어떻게 구현 할 것인가?
    • twitter는 protractor로 singin page에 접근되지 않는 걸로 보여짐.
    • login in 테스트시 angular js가 아니라 컨트롤 할수 없다는 메세지가 출력됨되면서 fail됨.
    • blog sync가 아닌 다른 페이지도 컨트롤 가능하게 할 수 있는 plug in(?)등이 있는지 survey가 필요함.
  2. 각각이 provider 에 새 글을 등록하는 것은 어떻게 구현 할 것인가?
    • 이 항목은 이미 blog sync의 기능 중 일부이기 때문에 기능 구현 내용을 살펴보면 쉽게 해결할 수 있을 걸로 보여짐.

pokers added a comment - 05/Apr/15 4:33 PM

How to use protractor on non- angular JS app. webdriver를 이용하면 간단하게 element를 가져오고 컨트롤 할 수있다. ex) browser.driver.findElement(by.id('name')).setKeys('username'); sample non-AngularApp.js

describe('Test the BlogSync : ', function(){
    beforeEach(function (){
        browser.get('http://www.justwapps.com/');
    });
    var go_subpage = function (page_name){
        element(by.binding(page_name)).click();
    };
    it('allow BlogSync on the twitter to get messages', function(){
        go_subpage('signstat'); // 
        var twitter = get_providers(providers.twitter);
        twitter.click();
        browser.driver.findElement(by.id('username_or_email')).sendKeys('pokers11@empal.com');
        browser.driver.findElement(by.id('password')).sendKeys('XXXXXX');
        browser.driver.findElement(by.id('allow')).click();
    });
});

pokers added a comment - 07/Apr/15 3:34 PM

1. Connect to the main page as BlogSinc
  1> check the title
2. Click the Login button on the top right of the main page
  1> check the page by checking string on middle of page
  2>check count of providers(now it's 7)
3. login Twitter
  1> click Twitter Icon
  2> After changing to Twitter page, Input ID and password, then press ENTER button.
  3> Click "SignIn" button.
4. Check my accounts
  1> After login, click the Login button on the top right of main page.
  2> Check the string on the middle of page as "Your accounts"
  3> Check the Icon on the middle of page as "twitter: <nick_name>"
5. Go to Main page
  1> Click BlogSync button on the top left of the main page.
  2> Check the string on the middle of page as "<nick_name>의 블로그 글들을 동기화 시킵니다."
6. Go to 블로그 등록 page
  1> Click 블로그 등록 button on the top right of the main page
  2> Check the list of my blog accounts as Twitter.
7. Go to 모아보기 page
  1> Click 모아보기 button on the top right of the main page.
  2> Check count of posts on this page
  3> Check some article written by myself on the twitter.
    1) check string
    2) check the time
    3) check image
8. Publish new article on the twitter
  1> Using the blogsync app, it can publish new simple article on the Twitter.
  2> After a while, it can check that article published few minutes age on the 모아보기 page.
  3> Check again that is the same as number 7.

pokers added a comment - 6 days ago

시나리오 테스트 작성 중 문제점. 새 글을 provider에 올리고 그 글이 다른 provider 및 모아보기에 적용되는지 확인을 위한 테스트. 새 글을 provider에 올리는 과정은 e2e입장에서 볼때 해당 provider page에 직접 접속해서 글을 써야한다. 각각의 provider page에 직접 쓰는 방법이 현실적으로 힘들기 때문에 각 provider가 제공하는 API를 이용해서 글을 업로드 해야한다. API의 사용은 어디에서 이루어 져야 할까?

kimalec commented 9 years ago

pokers added a comment - Yesterday

시나리오 테스트시 Protractor 에서 blog에 new article를 postiong 하는 방법. 여러 방법이 있지만 심플하게 blogsync의 기능을 이용하기로 결정.

    var opt = {
        form : {
            title: 'manual posting test 0101',
            modified: '2015-04-26T15:07:00+09:00',
            id: '3',
            url: 'https://pokers11.wordpress.com/2015/04/26/test_wordpress-01/',
            categories: ['미분류'],
            tags: []
        }
    };
function sendPostToTwitter(info)
{
    "use strict";
    var url;
    url = 'http://www.justwapps.com/twitter/bot_posts/new/3158674261?userid=553a5e54b03e147e0609d0b9';
    var opt = {
        form : {
            title: 'manual posting test 0101',
            modified: '2015-04-26T15:07:00+09:00',
            id: '3',
            url: 'https://pokers11.wordpress.com/2015/04/26/test_wordpress-01/',
            categories: ['미분류'],
            tags: []
        }
    };
    //opt.modified = Date.now().toString();
    console.log('post url : ' + url);
    request.post(url, opt, function (err, response, body) {
        console.log('error : ' + response.errorCode );
    });
}
pokers commented 9 years ago

위에 언급한 테스트 시나리오를 코드로 작성해서 PR 등록. 해당 e2e테스트 방법에 문제가 없다면 추가 이슈 발행 후 테스트 시나리오 작성 및 구현 진행해야함.