UI TEST - 간단하게 selenium기반의 WebdriverIO 해보기

WebdriverIO test 5 + 5 분 완성

참고

• http://webdriver.io/
• https://www.youtube.com/watch?v=vPes7NKeYno&t=2s
• https://www.youtube.com/watch?v=XGrHJ4rKV5w&t=200s

Selenium Standalone Test 해보기

1 - 테스트할 폴더 생성 및 초기화

mkdir webdriverio-test
cd webdriverio-test
npm init -y

2 - selenium-standalone 설치 및 실행

sudo npm install -g selenium-standalone
sudo selenium-standalone install
sudo selenium-standalone start

맥에서는 sudo를 붙인다

3 - 테스트 코드 작성

touch selenium-standalone-test.js

var webdriverio = require('webdriverio');
var options = {
  desiredCapabilities: {
    browserName : 'chrome'
  }
};
var client = webdriverio.remote(options);

client
    .init()
    .url('https://learn.visualregressiontesting.com/')
    .setValue('#mce-EMAIL', 'test@test.com')
    .submitForm('#mc-embedded-subscribe-form')
    .getUrl().then(function(url) {
        console.log('URL is: ' + url);
    })
    .end();

이메일 텍스트 폼에 이메일을 입력하고 제출(submit)하고 그 뒤에 페이지의 URL을 콘솔에 출력하는 테스트

4 - 실행

node selenium-standalone-test.js

WebdriverIO WDIO Test Runner

위에 코드와 이어서... mocha 기반의 테스트임

1 - npm test하면 테스트가 실행되도록 package.json 수정

"script" : {
  "test" : "./node_modules/.bin/wdio"
}

그냥 wdio 해도 된다고 함 이제 테스트를 실행할때는 npm test만 하면 됨

2 - 초기 설정하기

(동영상 참고)
wdio.conf.js 가 생성된다.

3 - wdio.conf.js 수정

baseUrl: 'https://learn.visualregressiontesting.com',
...
capabilities: [{
        browserName: 'chrome'
    }]

기본 URL 추가
브라우저 설정

4 - 아까 작성했던 테스트 코드를 복사하고 수정

cp selenium-standalone-test.js webdriverio-test.js

/* 미리 설정된 코드들 삭제 */
//var webdriverio = require('webdriverio');
// var options = {
//   desiredCapabilities: {
//     browserName : 'chrome'
//   }
// };
//var client = webdriverio.remote(options);
//client

browser
    .init()
    .url('https://learn.visualregressiontesting.com/')
    .setValue('#mce-EMAIL', 'test@test.com')
    .submitForm('#mc-embedded-subscribe-form')
    .getUrl().then(function(url) {
        console.log('URL is: ' + url);
    })
    .end();

wdio.conf.js에 이미 있기 때문에 삭제
그런데 이상태로 실행하면 실행이 안됨. 왜냐하면 테스트 케이스가 하나도 없기 때문에.

5 - 테스트 러너가 실행할 수 있는 테스트로 감싸고 불필요한 코드 삭제

describe('Form Functionality', function() {
  it('should allow the user to submit an email', function() {
    browser
        //.init()
        .url('https://learn.visualregressiontesting.com/')
        .setValue('#mce-EMAIL', 'test@test.com')
        .submitForm('#mc-embedded-subscribe-form')
        .getUrl().then(function(url) {
            console.log('URL is: ' + url);
        });
        //.end();
  });
});

browser 객체가 알아서 초기화하고 닫기 때문에 init, end 제거
그런데 테스트 실행하면 또 에러가 난다. 왜냐하면, wdio.conf.js에 'sync: true'라는 설정 때문이다. 그래서 promise 같은 비동기가 동작하지 않는다.

그래서 코드를 동기(sync) 코드로 바꾼다.

6 - 순차적인 동기(sync) 코드로 바꾼다.

describe('Form Functionality', function() {
  it('should allow the user to submit an email', function() {
    browser
        .url('/')
        .setValue('#mce-EMAIL', 'test@test.com')
        .submitForm('#mc-embedded-subscribe-form');

    var url = browser.getUrl();
    console.log('URL is: ' + url);  
  })
})

7 - 테스트 실행

npm test