This document discusses various UI testing tools, including Selenium and Sikuli. It provides overviews of Selenium IDE, RC, and WebDriver, explaining how they work and their capabilities. Live demos are shown of Selenium IDE and Sikuli. The document also discusses why UI testing is important, best practices for testing, and concludes that good automated testing can reduce bugs and improve code quality.

1. 探討Web UI自動化測試工具 Jimmy

2. Agenda
Why UI Test
Selenium
Sikuli

3. Why UI Test

5. 這麼多size 怎麼測

6. 現實生活中的測試方式

8. 程式寫越多

9. 通常Bug 就更多

10. 請善用工具，做適當的測試

11. 後端工程師，可以寫unit test

12. 身為前端工程師，也來了解一
下UI的測試可以怎麼測

13. Selenium

14. Selenium is
● Browser base Web Application
testing tool
● Open Source License
● Support Mobile Testing Android
/ IOS
● Write Test case using Language
of Java,C#,Python,Ruby..

16. Selenium

17. Selenium
● Selenium Core
● Selenium IDE
● Selenium RC(Remote Control)
● Selenium WebDrivers
● Selenium Grid
Selenium IDE
Selenium RC
Selenium
WebDrivers
Selenium Grid

18. Selenium IDE
● add-on for Mozilla Firefox
● record, edit, and debug tests
● recording the Script

19. Live Demo

20. Selenium WebDriver
• WebDriver is designed in a simpler and more concise programming
interface along with addressing some limitations in the Selenium-RC
API.
• WebDriver is a compact Object Oriented API when compared to
Selenium1.0
• It drives the browser much more effectively and over comes the
limitations of Selenium 1.x which affected our functional test
coverage, like the file upload or download, pop-ups and dialogs
barrier
• WebDriver overcomes the limitation of Selenium Rc's Single Host
origin policy

21. Web Driver

22. Selenium WebDriver
AndroidDriver
ChromeDriver
EventFiringWebDriver
FirefoxDriver
HtmlUnitDriver
InternetExplorerDriver
PhantomJSDriver
RemoteWebDriver
SafariDriver

23. Selenium WebDriver support
Java
C#
Python
Ruby
Perl
Javascript

24. Selenium WebDriver (以Java為例)
@Before
public void setUp() throws Exception {
driver = new FirefoxDriver();
baseUrl = "http://autotest.localhost.com/";
driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
}
@Test
public void testLogin() throws Exception {
driver.get(baseUrl + "/index.php");
driver.findElement(By.id("username")).clear();
driver.findElement(By.id("username")).sendKeys("jimmy");
driver.findElement(By.id("password")).clear();
….略.....
}
@After
public void tearDown() throws Exception {
driver.quit();
….略.....
}
}

25. Live Demo

26. Selenium RC Architecture

27. Selenium RC Architecture

28. Selenium Client Driver

29. Selenium RC Setup
http://seleniumhq.org/download
Extract the ZIP file.
Start a Command Prompt or a console window and navigate to where
the ZIP file was extracted.
Run the command
java –jar selenium-server-standalone.jar

30. sikuli

31. Why is sikuli?
• GUI test
• Automate use Script(Python)
• can be used to automate Flash Objects/ Flash Websites
• Using Sikuli we can automate desktop application

32. Sikuli IDE

33. Live Demo

34. Sikuli API
• GUI test
• Automate use Script(Python)
• can be used to automate Flash Objects/ Flash Websites
• Using Sikuli we can automate desktop application

35. How sikuli work?

36. 最新版本Bug 注意
Mac 10.10 有 bug
https://bugs.launchpad.net/sikuli/+bug/1362011
修正
http://www.sikulix.com/

37. Other

38. 其它幾個UI Test
• iMacro 與 sikuli 類以，都是在 firefox 上錄製，再進行測試
• Watir (web application test in ruby)
• 使用ruby
• Robot Framework
• python base
• 可以參考 http://www.tonylin.idv.tw/dokuwiki/doku.php/rf:rf
•

39. 心得
• 好的自動測試可以降低bug的產生，提高程式的品質
• 更熟悉流程的正確性
• 利用夜間排程，進行自動測試

40. 參考資料來源
1. http://www.tonylin.idv.tw/dokuwiki/doku.php/rf:rf
2. http://blog.mykhailo.com/