Web GUI GUI Web GUI Web GUI GUI, Web,,, i

Size: px

Start display at page:

Download "Web GUI GUI Web GUI Web GUI GUI, Web,,, i"

さあしゃあさま
5 years ago
Views:

1 28 Web GUI A system for autocompleting a partial Web GUI testing code with user interaction capturing

2 Web GUI GUI Web GUI Web GUI GUI, Web,,, i

3 Abstract A system for autocompleting a partial Web GUI testing code with user interaction capturing Manabu NAKAJIMA Programmable testing and capture-replay testing are two main categories of Web GUI testing. In the programmable testing, a tester writes GUI testing code by hand using some general-purpose programming language and a testing library. In the capturereplay testing, a testing tool captures the GUI operations of a human tester and automatically puts a description of the operation sequence into a testing code. Creating testing code with the capture-replay testing tool is easier than writing testing code by hand in the programmable testing; however, the resultant testing code in the capturereplay testing is less maintainable, and a tester may have to re-capture the operations whenever the application-under-test is modified. In this study, we develop a novel programmable Web GUI testing tool that incorporates the automatic generation of the description of GUI operations. key words GUI testing, Web applications, testing code, programmable testing, capture-replay testing ii

4 Capybara RSpec Selenium IDE Browser Plugin Tellurium Server Mediator EventBuffer Generator Test Generator Syntax Generator Editor Plugin iii

5 TypeScript WebExtensions Selenium IDE iv

6 Capybara RSpec Capybara ([6] ) Selenium IDE Ruby Browser Plugin HTML Tellurium Server Event Buffer Capybara Ruby Editor Plugin Capybara Moodle Tellurium Moodle Selenium IDE Moodle Selenium IDE Moodle v

7 Generator Selenium IDE vi

8 1 Web GUI GUI Web GUI (Application Under Test; AUT ) hoge@example.com Password Sign in 1.1: GUI 1

9 [13, 8] GUI GUI Web AUT GUI 2 (Java Ruby JavaScript ) : : * * Password * Sign in : : : * * Password * Sign in : 1.2: 1.1 2

10 Leotta [9] 32% 112% 16% 51% GUI

11 Capybara Capybara [1] Web API Ruby Capybara DSL (Domain Specific Language) 2.1 Capybara fill in (<input>) (<textarea>) within #session do... end 2.1 #session click button <button> Capybara visit / sessions / new within ("# session ") do fill_in , with : user@example. com fill_in Password, with : password end click_button Sign in 2.1: Capybara 4

12 2.1 describe " the signin process ", : type => : feature do before : each do User. make ( user@ex. com, password : pass ) end it " signs me in" do visit / sessions / new within ("# session ") do fill_in , with : user@ex. com fill_in Password, with : pass end click_button Sign in expect ( page ). to have_content Success end end 2.2: RSpec Capybara ([6] ) RSpec [6] MiniTest [4] RSpec RSpec Ruby 2.2 Capybara RSpec ( ) Success RSpec Capybara Ruby RSpec describe do... end before it describe do... end ( ) it GUI fill in <input> <textarea> within 5

13 2.2 #session do... end 2.1 #session click button <button> expect(page).to have content "Success" Success have content expect(page).to (page) Capybara RSpec Ruby RSpec Ruby Selenium IDE Selenium IDE [7] Web GUI Selenium IDE 2.3 Selenium IDE RSpec JUnit [3] Ruby Selenium IDE 6

= Selenium :: WebDriver. for : firefox 10 @ base_ url = " http :// localhost : 3000/ " 11 @ac ce pt_n ex t_al er t = true 12 @ driver. manage. timeouts.

14 : Selenium IDE 1 require " json " 2 require " selenium - webdriver " 3 require " rspec " 4 include RSpec :: Expectations 5 6 describe " SeleniumideExportRspec " do 7 8 before (: each ) do driver = Selenium :: WebDriver. for : firefox base_ url = " http :// localhost : 3000/ " ce pt_n ex t_al er t = true driver. manage. timeouts. implicit_ wait = 30 = [] 14 end after (: each ) do quit should == [] 19 end it " test_seleniumide_export_rspec " do get + "/ session / new ") driver. find_ element (: id, " session_ form_ "). clear driver. find_ element (: id, " session_ form_ "). send_ keys " user@ex. com " find_element (:id, " session_form_password "). clear find_element (:id, " session_form_password "). send_keys " pass " find_element (: name, " commit "). click 28 end def element_present?( how, what ) find_element (how, what ) 32 true 33 rescue Selenium :: WebDriver :: Error :: NoSuchElementError 34 false 35 end 36 end 2.4: 2.3 Ruby 7

15 3 GUI Tellurium ( ) GUI GUI GUI Web 8

16 補完 ON/OFF 提案部分 Editor Editor Plugin コード片 Editor Area Tellurium Server 補完設定 Mediator コード片イベントコード片イベント Generator Web Browser Browser Plugin イベント Page テスター操作 3.1: 3.1 Text Editor Tellurium Tellurium Server Web Web Browser Web Tellurium (Browser Plugin Editor Plugin) Tellurium Web Mediator (Generator) WebSocket JSON Web Generator 3.1 Editor Plugin Editor Plugin URL 9

17 3.3 Browser Plugin 3.6 Mediator Browser Plugin Mediator Tellurium Generator Editor Plugin Editor Plugin 3.3 Browser Plugin テスター操作 Page Web Browser Browser Plugin Detector Sender DOM イベント Tellurium Server 抽象イベント,URL 3.2: Browser Plugin Browser Plugin Detector Mediator Sender ( 3.2) Detector DOM (Document Object Model) DOM Sender URL Tellurium Server DOM 10

18 3.3 Browser Plugin [10] click keydown DOM Tellurium Server Tellurium Server JSON DOM DOM WebSocket DOM <div id=" container "> <input id=" field -1" type =" text "> <! > <a href ="/a. html ">example </a> <! > <div class =" header ">... </ div > <! > </ div > 3.3: HTML DOM ID Name CSS (Cascading Style Sheets) LinkText ID Name DOM ID / Name CSS CSS [12] LinkText A ( ) 3.3 HTML 1 field-1 ID 2 example LinkText 3 div.header CSS 11

19 3.4 Tellurium Server 3.4 Tellurium Server Tellrium Server Mediator Event Buffer Generator ( 3.4) Browser Plugin イベント,URL Editor Plugin 補完設定 Tellurium Server Mediator イベント Event Buffer 操作コード片 Generator コード片,URL Editor Plugin 3.4: Tellurium Server Mediator Mediator Editor Plugin Mediator Browser Plugin Event Buffer Generator URL Editor Plugin EventBuffer Event Buffer Browser Plugin

20 3.4 Tellurium Server Event Buffer dblclick DOM click dblclick 3.5 click イベント時間操作列 Click DoubleClick Click 時間間隔の短いイベントを doubleclick 操作として変換 3.5: Event Buffer Generator Generator Syntax Generator Generator Syntax Generator Test Generator Test Generator Test Generator Generator op 3.6 JavaScript Capybara Syntax Generator 13

21 3.4 Tellurium Server 3.7 CapybaraGenerator 3.6 class Ca pybara Genera tor extends Generator { click (op) { return this. syntax. ruby. method ( click_on, {}, op. locator. value ) } fillin (op) { return this. syntax. ruby. method ( fill_in, { with : op. value }, ope. locator. value ) } } 3.6: Capybara click 操作 Sign in <input id="register" type="submit"> fill in 操作 foo@ex.com <input id=" " type="input"> 操作情報操作種類 :click ロケータ :register(id ロケータ ) 操作種類 :fill in ロケータ : (ID ロケータ ) 入力値 :foo@ex.com click_on "register" fill_in " ", with: "foo@ex.com" 3.7: Syntax Generator Syntax Generator Test Generator Syntax Generator 14

22 3.5 Editor Plugin Syntax Generator Test Generator 3.8 Ruby Ruby Syntax Generator this.syntax.ruby.method('call', {option: 1}, 'arg1', 'arg2') ダブルクオート引数のカッコを省略補完設定に応じてメソッド呼び出しコード片を生成引数のカッコを省略しない call "arg1", "arg2", option: 1 call("arg1", "arg2", option: 1) シングルクオート call 'arg1', 'arg2', option: 1 call('arg1', 'arg2', option: 1) 3.8: Ruby 3.5 Editor Plugin Editor Plugin Tellurium Server Editor Area 3.9 URL Tellurium Server Editor Plugin Editor Plugin ON URL 15

23 3.6 ON/OFF Editor Plugin 補完 ON/OFF 補完が ON 状態ならコード挿入 Editor Editor Plugin コード片 Editor Area 補完設定コード片, URL Tellurium Server 補完設定ファイル 3.9: Editor Plugin 3.6 Generator 3.10 JSON 3.1 Generator 3.2 { } " url ": " http :// localhost :3000/**/*", " generator ": { " name ": " capybara ", " options ": { " ruby ": { " stringliteraltype ": " singlequote ", " useparameterparentheses ": true } } }, " files ": [ " spec /**/* _spec.rb" ] 3.10: 16

24 : url URL generator - generator.name Generator generator.options Generator 3.2 files 3.2: Generator ruby.stringliteraltype "singlequote" "doublequote" ruby.useparameterparentheses 17

25 4 4.1 Atom Web Google Chrome Tellurium Server Browser Plugin TypeScript Atom Editor Plugin CoffeeScript Tellurium Server Atom Editor Plugin Google Chrome Browser Plugin 18

26 TypeScript TypeScrpt JavaScript JavaScript JavaScript JavaScript TypeScript TypeScript IDE TypeScript DefinitelyTyped [2] WebExtensions WebExtensions Web [11] Browser Plugin WebExtensions WebExtensions Content Scripts Background Pages Content Scripts JavaScript Background Scripts Web Content Scripts Content Scripts Tellurium Server Sender 3.3 Background Pages Background Pages DOM Detector 3.3 Content Scripts 19

27 : Browser Plugin Tellurium Server Editor Plugin (Generator )

28 Selenium IDE PC

29 5.2 Selenium IDE Capybara API Moodle

30 Web Moodle [5] Moodle Moodle admin About Moodle4Mac /02/24 00: /04/02 00:00 Yes 23

31 : A B 1 : Capybara : Tellurium : Selenium IDE : Tellurium C 1 : Tellurium C Capybara 5.1 Tellurium 5.2 Selenium IDE

32 5.5 1 click_link, match : : first 2 fill_in username, with : admin 3 fill_ in password, with : click_button 5 click_link About Moodle4Mac, match : : first 6 click_link 7 click_link, match : : first 8 choose item_ assign 9 click_button 10 fill_in name, with : 11 select 24, from : id_allowsubmissionsfromdate_day 12 select 4, from : duedate [ month ] 13 check a ssi gns ubm iss ion_on lin ete xt_ena ble d 14 uncheck assignsubmission_file_enabled 15 click_link 16 select Yes, from : sendnotifications 17 click_button 5.1: Capybara Moodle 1 click_link, match : : first 2 fill_in username, with : admin 3 fill_ in password, with : click_button, match : : first 5 click_link About Moodle4Mac, match : : first 6 click_button, match : : first 7 click_link, match : : first 8 choose item_ assign 9 click_button, match : : first 10 fill_in id_name, with : 11 select 24, from : allowsubmissionsfromdate [ day ], match : : first 12 select 4, from : duedate [ month ], match : : first 13 check i d_a s si g n su b m is s i on_o nl i n et e x t_e n ab l e d 14 uncheck id_assignsubmission_file_enabled 15 click_link, match : : first 16 select Yes, from : sendnotifications, match : : first 17 click_button, match : : first 5.2: Tellurium Moodle Selenium IDE fill_in click_button 25

33 5.5 1 open /moodle32/ 2 clickandwait link= 3 click name=username 4 type name=username admin 5 type name=password clickandwait css=#loginbtn 7 clickandwait link=about Moodle4Mac 8 clickandwait css=input[type="submit"] 9 click css=#yui_3_17_2_1_ _ click css=#yui_3_17_2_1_ _ click css=#item_assign 12 clickandwait name=submitbutton 13 type name=name 14 click css=#yui_3_17_2_1_ _ select name=allowsubmissionsfromdate[day] label=26 16 click css=#yui_3_17_2_1_ _ select name=duedate[month] label=4 18 click css=#yui_3_17_2_1_ _ click css=#yui_3_17_2_1_ _ click name=assignsubmission_onlinetext_enabled 21 click name=assignsubmission_file_enabled 22 click link= 23 select name=sendnotifications label=yes 24 click css=#yui_3_17_2_1_ _ clickandwait name=submitbutton2 5.3: Selenium IDE Moodle 26

34 5.5 1 open /moodle32/ 2 clickandwait link= 3 type id=username admin 4 type id=password clickandwait id=loginbtn 6 clickandwait link=about Moodle4Mac 7 clickandwait css=input[type=submit] 8 click link= 9 click id=item_assign 10 clickandwait name=submitbutton 11 type id=id_name test 12 select id=id_allowsubmissionsfromdate_day label=24 13 select id=id_duedate_month label=4 14 check id=id_assignsubmission_file_enabled 15 uncheck id=id_assignsubmission_onlinetext_enabled 16 click link= 17 select id=id_sendnotifications label=yes 18 clickandwait id=id_submitbutton2 5.4: Selenium IDE Moodle Web Selenium IDE C B Selenium IDE 24 27

35 Capybara Selenium IDE Tellurium Selenium IDE 5.2 Selenium IDE 5.3 Tellurium Selenium IDE link ID CSS <input> 28

36 : Selenium IDE 3 click user=username - 9 click css=#yui_... 8 link= 10 click css=#yui_ click css=#yui_ click css=#yui_ click css=#yui_ click css=#yui_ click id=...file check id= click id=...online uncheck id= click css=#yui_ Selenium IDE 5.7 Selenium IDE Capybara GUI GUI GUI 29

37 5.8 GUI Moodle Moodle Selenium IDE Tellurium Moodle Selenium IDE Selenium IDE IDE 30

38 5.8 31

39 6 GUI Tellurium ( ) Web 4.2 URL GUI Moodle 32

40 33

41 [1] Capybara: Acceptance test framework for web applications. com/teamcapybara/capybara. [2] DefinitelyTyped: The repository for high quality TypeScript type definitions. [3] Junit. [4] minitest: minitest provides a complete suite of testing facilities supporting tdd, bdd, mocking, and benchmarking. [5] Moodle - open-source learning platform moodle.org. [6] RSpec: Behaviour driven development for Ruby. [7] Selenium ide - selenium documentation. selenium_ide.jsp. [8] Mark Fewster and Dorothy Graham.., [9] Maurizio Leotta, Diego Clerissi, Filippo Ricca, and Paolo Tonella. Capture-replay vs. programmable web testing: An empirical assessment during test case evolution. In 20th Working Conference on Reverse Engineering, pages , [10] Mozilla Developer Network. Event reference MDN. mozilla.org/en-us/docs/web/events. [11] Mozilla Developer Network. WebExtensions. ja/add-ons/webextensions. [12] W3C. Selectors level [13],, and..,

IPSJ SIG Technical Report Vol.2018-SE-200 No /12/ Proposal of test description support environment for request acquisition in web appli

IPSJ SIG Technical Report Vol.2018-SE-200 No /12/ Proposal of test description support environment for request acquisition in web appli 1 1 1 2 Proposal of test description support environment for request acquisition in web application development Nakaji Yoshitake 1 Choi Eunjong 1 Iida Hajimu 1 Yoshida Norihiro 2 1. 1 ( ) 1 Nara Institute