E2E

201626

E2E

E2E

E2E

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 2

E2E

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 3

E2E

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 4

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 5

JavaScriptAngularJS

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 6

E2E

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 7

E2E

JavaScript

JavaScript

Jenkins

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 8

E2E

E2E

Nightwatch.js http://nightwatchjs.org

Protractor https://angular.github.io/protractor/#/

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 9

E2E

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 10

Nightwatch.js

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 11

E2E - Nightwatch.js

JavaScriptNode.js Selenium WebDriver APIJsonWireProtocol

CSSXPath

Selenium Server CI

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 12

E2E - Nightwatch.js

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 13

Nightwatch.js http://nightwatchjs.org/guide

Protractor

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 14

E2E Protractor

AngularJS JavaScriptNode.js WaitForAngularAPI

AngularJS$http

Selenium Server

FirefoxChromeCopyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 15

E2E Protractor

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 16

Protractorhttps://angular.github.io/protractor/#/infrastructure

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 17

PhantomJS

http://phantomjs.org/

Zombie.JS http://zombie.js.org/

SimerJS https://slimerjs.org/

CasperJS http://casperjs.org/

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 18

PhantomJS

PhantomJS JavaScript

Nightwatch.jsProtractor

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 19

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 20

PhantomJS

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 21

- PhantomJS

WebKit

Web

Web

DOMAPIJQuery

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 22

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 23

WebJavaScriptAngularJS

NigthWatch.jsProtoractor2

21

PhantomJS

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 24

E2E

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 25

E2E

Nightwatch.js

ProtractorwaitForAngularAPI

JavaScriptAngularJSReactReduxAngularJSProtractor

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 26

E2E

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 27

E2E Nightwatch.js

Nightwatch.js

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 28

Nightwatch.js

3

,,etc

,etc

CSV,etc

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 29

Nightwatch.js

CSS

Node.jsFile System

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 30

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 31

Selenium WebDriver

UI

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 32

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 33

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 34

Yahoo! JAPAN http://www.yahoo.co.jp

nightwatch.js E2ENightwatch.js

1. 2.nightwatch.js3.

4.nightwatch.js

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 35

module.exports = {tags: ['yahoo'],demo" : function (client) {

client.url("http://www.yahoo.co.jp").waitForElementVisible("body", 1000).assert.title("Yahoo! JAPAN").assert.visible("#srchtxt").setValue("#srchtxt", "nightwatch.js").waitForElementVisible("#srchbtn", 1000).click("#srchbtn").pause(1000).assert.title("nightwatch - Yahoo!")

.end();}

};

yahoo-search-test.js

UI

UI

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 36

module.exports = {tags: ["yahoo"],"demo" : function (client) {

var homePage = client.page.home();homePage.navigate();client.maximizeWindow();homePage.yahooTop ();var yahooPage = client.page.yahooSearch ();yahooPage.getPageTitle(client,function(result) {

this.assert.ok(result, "Yahoo! JAPAN");});yahooPage.expect.element("@element1").to.be.visible;yahooPage.setSearchWord("nightwatch.js");yahooPage.clickSearchButton();yahooPage.getPageTitle(client,function(result) {

this.assert.ok(result, "nightwatch.js - Yahoo!");});client.end();

}};

yahoo-search-test.js

UI

UI

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 37

var commands = {yahooTop: function() {

this.waitForElementVisible("@element1", 10000);return this;

}};module.exports = {

url:"http://www.yahoo.co.jp",commands: [commands],elements: {

element1: { selector: "body" }}

};

home.js

UI

UI

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 38

var commands = {setSearchWord: function(strWord){

this.waitForElementVisible("@element1",10000).setValue("@element1",strWord);return this;

},clickSearchButton: function(){

this.waitForElementVisible("@element2",10000).click("@element2").waitForElementVisible("@element3",10000);return this;

},getPageTitle: function(client,callback){

var self = this;return client.getTitle(function(title) {

callback.call(self,title);});

}};module.exports = {

commands: [commands],elements: {

element1: { selector: "#srchtxt" },element2: { selector: "#srchbtn" },element3: { selector: "p.resultNum" }

}};

yahooSearch.js

UI

UI

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 39

Starting selenium server... started - PID: 56439

[Yahoodemo] Test Suite======================

Running: demo Element was visible after 72 milliseconds. Passed [ok]: Yahoo! JAPAN ok Yahoo! JAPAN Expected element to be visible Element was visible after 26 milliseconds. Element was visible after 35 milliseconds. Element was visible after 36 milliseconds. Passed [ok]: nightwatch.js - Yahoo! ok nightwatch.js - Yahoo!

OK. 7 assertions passed. (3.814s)

UI

UI

UI

UIUI

Nightwatch.js

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 40

Nightwatch.js

FirefoxChrome Nightwatch.js

PhantomJS

PhantomJS

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 41

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 42

PhantomJSWebKit

PhantomJS

PhantomJS

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 43

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 44

XvfbX Virtual Frame BufferFirefoxChrome

Xvfb

FirefoxChromeCentOS 7.x

Internet ExplorerSafariSelenium Grid

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 45

$ sudo yum groupupdate "X Window System$ sudo yum install xorg-x11-server-Xvfb

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 46

$ Xvfb :1 -screen 0 1200x1920x24 &$ export DISPLAY=:1$ google-chrome http://www.yahoo.co.jp &$ $ xwd -display :1 -root | xwdtopnm | pnmtopng > screenshot.png

E2E

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 47

E2E

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 48

Jenkins

E2ENightwatch.js

Firefox, Chrome

Web

Selenium Grid

Selenium Grid

Selenium Grid

Selenium Grid

Internet Explorer, Safari

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 49

E2ENigthwatch.js

Selenium Grid

Jenkins

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 50

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 51

52