Electron 기반의 모바일 앱 테스트 자동화 S/W 개발

“Ship better apps faster with automated testing.”

Agenda

  • Test Automation with ATDD
  • Node Based Desktop Application
  • Introduction to Project Psyclone
  • Test Cloud Service with Psyclone
  • QA

Test Automation with ATDD

“ATDD: Acceptance Test Driven Development”

"Where is Test?"

Test Automation with ATDD

"What is Dynamic Test?"

Test Automation with ATDD
TDD Cycle
Test Driven Development
BDD Cycle
Behaviour Driven Development
ATDD Cycle
Acceptance Test Driven Development
Test Automation with ATDD

Web E2E Testing Tools

  • Selenium - Web Browser Test Automation Tool
  • WebDriver - Remote control interface of Web Browser
  • Nemo - Selenium-webdriver based automation in NodeJS
  • Nightwatch - Browser automated testing done easy
  • Protractor - End-to-end Test For AngularJS Apps
  • WebdriverIO - Selenium 2.0 bindings for NodeJS
Test Automation with ATDD

What is Selenium?

“Easy to combine with popular program language”

Test Automation with ATDD

What is WebDriver?

“It supports almost all popular browsers”

Test Automation with ATDD

Nightwatch Script

The test below navigates to google.com and searches for "rembrandt van rijn", then verifies if the term first result is the Wikipedia page of Rembrandt.

module.exports = {
  'Demo test Google' : function (client) {
    client
      .url('http://www.google.com')
      .waitForElementVisible('body', 1000)

      .assert.title('Google')
      .assert.visible('input[type=text]')
      .setValue('input[type=text]', 'rembrandt van rijn')
      .waitForElementVisible('button[name=btnG]', 1000)

      .click('button[name=btnG]')
      .pause(1000)

      .assert.containsText('ol#rso li:first-child', 'Rembrandt - Wikipedia')
      .end();
  }
};
Test Automation with ATDD

E2E Test Automation Demo

Test Automation with ATDD

Node Based Desktop Application

“Build cross platform desktop apps with web technologies”

Awesome Electron

Node Based Desktop Application

Electron(Atom-Shell)

Electron은 자바스크립트와 함께 제공된 풍부한 네이티브 API를 사용하여 멋진 데스크탑 어플리케이션을 만들 수 있도록 해주는 프레임워크입니다.

이 프레임워크의 node.js는 웹 서버 개발이 아닌 데스크탑 어플리케이션 개발에 초점을 맞췄습니다.

- Atom

Node Based Desktop Application

Electron

Implementation details

  +-------------------------+            +-----------------------+
  |          node           |            |       atom-shell      |
  +--------------------------            +-----------------------+
  +--------+   +------------+            +---------+  +----------+
  |        | +-+ node-shell | <--------> | wrapper +--+   atom   |
  |        | | +------------+     RPC    |   app   |  |   api    |
  |  your  +-+                           +---------+  +----+-----+
  | app.js | | +------------+                 +--------+---+
  |        | +-+ other deps |                 |        |
  |        |   +------------+             +---+--+ +---+--+
  |        |        ...                   | winA | | winB |   ...
  +--------+                              +------+ +------+

Electron에는 메인 프로세스와 랜더러 프로세스간에 통신을 할 수 있도록 ipc 모듈을 제공하고 있습니다. 또한 remote 모듈을 사용하여 RPC 스타일로 통신할 수도 있습니다.

Node Based Desktop Application

Architecture

Node Based Desktop Application

Introduction to Project Psyclone

“Automated Dynamic Testing Solution”

Purpose

Ship better apps faster with automated testing.

  • No test codes in your app.
  • Write test script easy as user interact.
  • Support Cross-Platform.
  • End-to-End Test with ATDD.
  • Realtime debugging and analysis.
  • Possible stress test(continuously).
  • Manual debugging anywhere anytime.
  • Mobile game testing.
Introduction to Project Psyclone

Idea Mockup #1

Introduction to Project Psyclone

Idea Mockup #2

Introduction to Project Psyclone

Environments

  • React + Redux: User Interface
  • Mocha + Should: Assertion Test
  • Node Canvas: Compare Images
  • OpenCV: Object Tracking
  • PTY.js: VT100 Terminal
  • HighCharts: System Resource Monitor
  • Fallow W3C's WebDriver Spec.
  • Use next generation JavaScript
  • And Custom NPM Modules
Introduction to Project Psyclone

Automation Workflow

Introduction to Project Psyclone

Use next generation JavaScript

Code style in Workspace.jsx

Introduction to Project Psyclone

Custom NPM Modules

Lookup package.json

Introduction to Project Psyclone

OpenCV

Introduction to Project Psyclone

Psyclone Studio Demo

Introduction to Project Psyclone

Test Cloud Service with Psyclone

“Ship better apps faster with automated testing.”

Test Cloud Service

Test Cloud Service with Psyclone

Roadmap

Test Cloud Service with Psyclone

QA