Web App Testing With Selenium

1. Web App Testing with Selenium João Prado Maia Lead Software Developer, Alert Logic March 6 th , 2008

2. Unit testing in PHP land <ul><li>Unit testing OOP code </li></ul><ul><ul><li>usually just business logic code (classes) </li></ul></ul><ul><li>Not good enough </li></ul><ul><ul><li>No way to test visual aspect of the app </li></ul></ul><ul><ul><ul><li>CSS </li></ul></ul></ul><ul><ul><ul><li>Broken images </li></ul></ul></ul><ul><ul><li>How do you check JavaScript based pages? </li></ul></ul><ul><ul><li>How about AJAX calls? </li></ul></ul><ul><ul><li>Very labor intensive </li></ul></ul>

3. Combined approach <ul><li>Unit testing of business logic code </li></ul><ul><ul><li>Data access classes </li></ul></ul><ul><ul><li>Lots of best practices around for this </li></ul></ul><ul><li>UI testing with Selenium </li></ul><ul><ul><li>Make sure UI behaves correctly </li></ul></ul><ul><ul><ul><li>JavaScript based or not </li></ul></ul></ul><ul><ul><li>Examples: </li></ul></ul><ul><ul><ul><li>Log in to your app </li></ul></ul></ul><ul><ul><ul><li>Log out from your app </li></ul></ul></ul><ul><ul><ul><li>Change your account settings </li></ul></ul></ul><ul><ul><ul><li>etc </li></ul></ul></ul>

4. Enter Selenium! <ul><li>Selenium Core </li></ul><ul><ul><li>JavaScript library </li></ul></ul><ul><ul><li>Used by all other sub-projects </li></ul></ul><ul><li>Selenium IDE to record tests </li></ul><ul><ul><li>Firefox extension </li></ul></ul><ul><ul><li>Playback tests </li></ul></ul><ul><ul><li>Debug and set breakpoints </li></ul></ul><ul><li>Selenium RC </li></ul><ul><ul><li>Java server </li></ul></ul><ul><ul><li>Controls web browser remotely </li></ul></ul>

5. Selenium IDE <ul><li>Firefox extension </li></ul><ul><ul><li>Record and replay tests </li></ul></ul><ul><ul><li>Test files as HTML files (by default) </li></ul></ul><ul><li>Accepts commands, allowing you to: </li></ul><ul><ul><li>Run actions on browser </li></ul></ul><ul><ul><li>Verify that document has valid content </li></ul></ul><ul><li>Run a suite of UI tests </li></ul><ul><ul><li>Multiple tests running in sequence </li></ul></ul>

6. Recording and Replaying a Test <ul><li>Demonstration </li></ul>

7. Selenium test structure <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </li></ul><ul><li><title>google_houston</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><table cellpadding="1" cellspacing="1" border="1"> </li></ul><ul><li><thead> </li></ul><ul><li><tr><td rowspan="1" colspan="3">google_houston</td></tr> </li></ul><ul><li></thead><tbody> </li></ul><ul><li><tr> </li></ul><ul><li><td>open</td> </li></ul><ul><li><td>/</td> </li></ul><ul><li><td></td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>type</td> </li></ul><ul><li><td>q</td> </li></ul><ul><li><td>houston php</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>click</td> </li></ul><ul><li><td>btnG</td> </li></ul><ul><li><td></td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>verifyTextPresent</td> </li></ul><ul><li><td>Houston PHP / MySQL Users Group</td> </li></ul><ul><li><td></td> </li></ul><ul><li></tr> </li></ul><ul><li></tbody></table> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>

8. Understanding Selenium <ul><li>Reference documentation </li></ul><ul><ul><li>http://release.openqa.org/selenium-core/0.8.2/reference.html </li></ul></ul><ul><li>Key concepts </li></ul><ul><ul><li>Actions </li></ul></ul><ul><ul><li>Accessors </li></ul></ul><ul><ul><li>Assertions </li></ul></ul><ul><ul><li>Patterns </li></ul></ul><ul><ul><li>Locators </li></ul></ul><ul><li>Valid locators values: </li></ul><ul><ul><li>id=nav_bar </li></ul></ul><ul><ul><li>name=username </li></ul></ul><ul><ul><li>dom=document.images[2] </li></ul></ul><ul><ul><li>xpath=//table[@id=“results”]/tr[1]/td[4] </li></ul></ul><ul><ul><li>css=a[href=“#top”] </li></ul></ul><ul><ul><li>link=Logout </li></ul></ul>

9. Running a Test Suite <ul><li>TestRunner interface </li></ul><ul><ul><li>Run multiple tests in sequence </li></ul></ul><ul><ul><li>Internal to Selenium </li></ul></ul><ul><li>Demonstration </li></ul>

10. Test suite structure <ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td>Meetup presentation</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td><a target="testFrame" href="google_smarty.html">Google - smarty</a></td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td><a target="testFrame" href="google_latest_php.html">Google - latest php version</a></td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td><a target="testFrame" href="google_houston.html">Google - houston php</a></td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>

11. Dynamic test suite <ul><li>Put all HTML test files in the same directory </li></ul><ul><li>Create a new PHP script: </li></ul><ul><li><?php </li></ul><ul><li>$tests = glob('*.html'); </li></ul><ul><li>?> </li></ul><ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td>Meetup presentation</td> </li></ul><ul><li></tr> </li></ul><ul><li><?php foreach ($tests as $filename) { ?> </li></ul><ul><li><tr> </li></ul><ul><li><td> </li></ul><ul><li><a target="testFrame" href="<?php echo $filename; ?>" > </li></ul><ul><li><?php echo ucwords(str_replace('.html', '', str_replace('_', ' ', $filename))); ?> </li></ul><ul><li></a> </li></ul><ul><li></td> </li></ul><ul><li></tr> </li></ul><ul><li><?php } ?> </li></ul><ul><li></table> </li></ul>

12. Selenium RC <ul><li>Java server controls the browser </li></ul><ul><ul><li>Windows, Mac OS X, Linux platforms </li></ul></ul><ul><li>Allows you to write tests in PHP </li></ul><ul><ul><li>Remotely send commands to Java server </li></ul></ul><ul><li>Tightly integrated with PHPUnit! </li></ul><ul><ul><li>Allows you to run UI test suites as regular PHPUnit suites </li></ul></ul>

13. Selenium RC requirements <ul><li>PHPUnit </li></ul><ul><li>PEAR::Testing_Selenium </li></ul><ul><li>Machine to run the actual UI tests from </li></ul><ul><ul><li>We run a VMware image with the latest IE/Firefox, another one with IE6 and Firefox 1.5 </li></ul></ul>

14. Example of a Test in PHP <ul><li><?php </li></ul><ul><li>require_once 'SeleniumTestHelper.php'; </li></ul><ul><li>class LoginTest extends SeleniumTestHelper </li></ul><ul><li>{ </li></ul><ul><li>public function testAccessToLoginForm() </li></ul><ul><li>{ </li></ul><ul><li>$this->selenium->open("index.php"); </li></ul><ul><li>$this->selenium->verifyTextPresent('Having trouble logging in?'); </li></ul><ul><li>} </li></ul><ul><li>public function testFailedLogin() </li></ul><ul><li>{ </li></ul><ul><li>$this->selenium->open("index.php"); </li></ul><ul><li>$this->selenium->type("username", "admin"); </li></ul><ul><li>$this->selenium->type("customer", "2"); </li></ul><ul><li>$this->selenium->type("password", "blahblah"); </li></ul><ul><li>$this->selenium->clickAndWait("//input[@value='Log In']"); </li></ul><ul><li>$this->selenium->verifyTextPresent('Invalid login. Please try again.'); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>?> </li></ul>

15. HTML content <ul><li> </li></ul><ul><li><table cellspacing='0' cellpadding='0'> </li></ul><ul><li><tr> </li></ul><ul><li><th>Name</th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td><input type="text" class="textfield" name="username" /></td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><th>Customer ID</th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td><input type="text" class="textfield" name="customer" /></td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><th>Password</th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td><input type="password" class="textfield" name="password" /></td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td colspan="2"> </li></ul><ul><li><input type="image" src="/4/branding.php?param=btn_login" value="Log In" /> </li></ul><ul><li><span id="processing" style="display: none;"> </li></ul><ul><li><img src="/4/images/icons/spinner.gif" /> <strong>Processing...</strong> </li></ul><ul><li></span> </li></ul><ul><li></td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li> </li></ul>

16. SeleniumTestHelper <ul><li><?php </li></ul><ul><li>require_once '../../setup/config.php'; </li></ul><ul><li>require_once 'Testing/Selenium.php'; </li></ul><ul><li>require_once 'PHPUnit2/Framework/TestCase.php'; </li></ul><ul><li>// ip address of selenium server </li></ul><ul><li>if (!defined('APP_SELENIUM_SERVER')) { </li></ul><ul><li>define('APP_SELENIUM_SERVER', '172.17.0.110'); </li></ul><ul><li>} </li></ul><ul><li>// which browser to use on this run of the test </li></ul><ul><li>if (!defined('APP_SELENIUM_BROWSER')) { </li></ul><ul><li>define('APP_SELENIUM_BROWSER', '*firefox'); </li></ul><ul><li>} </li></ul><ul><li>class SeleniumTestHelper extends PHPUnit2_Framework_TestCase </li></ul><ul><li>{ </li></ul><ul><li>protected $selenium; </li></ul><ul><li>public function setUp() </li></ul><ul><li>{ </li></ul><ul><li>$this->selenium = new Testing_Selenium(APP_SELENIUM_BROWSER, </li></ul><ul><li>APP_BASE_URL . APP_RELATIVE_URL, APP_SELENIUM_SERVER); </li></ul><ul><li>$this->selenium->start(); </li></ul><ul><li>} </li></ul><ul><li>public function tearDown() </li></ul><ul><li>{ </li></ul><ul><li>$this->selenium->stop(); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>?> </li></ul>

17. Targeting browsers <ul><li>Selenium RC allows for you to run tests in different browsers </li></ul><ul><ul><li>Windows </li></ul></ul><ul><ul><ul><li>Internet Explorer 6.0+ </li></ul></ul></ul><ul><ul><ul><li>Firefox 1.5+ </li></ul></ul></ul><ul><ul><li>Linux </li></ul></ul><ul><ul><ul><li>Firefox 1.5+ </li></ul></ul></ul><ul><ul><ul><li>Opera 9.0.2 </li></ul></ul></ul><ul><ul><ul><li>Konqueror 3.5.3 </li></ul></ul></ul><ul><ul><li>Mac OS X </li></ul></ul><ul><ul><ul><li>Firefox 1.5+ </li></ul></ul></ul><ul><ul><li>Full list at http://selenium-rc.openqa.org/ </li></ul></ul>

18. How to target browsers <ul><li>First parameter tells Testing_Selenium what browser to use </li></ul><ul><ul><ul><li>$selenium = new Testing_Selenium(“*firefox”, “http://google.com”, “192.168.1.12”); </li></ul></ul></ul><ul><li>Possible values: </li></ul><ul><ul><li>*firefox </li></ul></ul><ul><ul><li>*iexplore </li></ul></ul><ul><ul><li>*opera </li></ul></ul><ul><ul><li>*custom </li></ul></ul><ul><ul><ul><li>more details on this at http://wiki.openqa.org/display/SRC/Selenium+RC+FAQ </li></ul></ul></ul><ul><li>Idea: setup multiple VMware images, one with a specific set of browsers </li></ul>

19. RC Test suite <?php if (!defined('PHPUnit2_MAIN_METHOD')) { define('PHPUnit2_MAIN_METHOD', 'TestSuite::main'); } require_once 'SeleniumTestHelper.php'; class TestSuite { public static function main() { PHPUnit2_TextUI_TestRunner::run(self::suite()); } public static function suite() { $suite = new PHPUnit2_Framework_TestSuite('PHPUnit Framework'); $test_files = glob('*Test.php'); foreach ($test_files as $file) { $suite->addTestFile($file); } return $suite; } } if (PHPUnit2_MAIN_METHOD == 'TestSuite::main') { TestSuite::main(); } ?>

20. Advanced Tests <ul><li>Testing AJAX requests </li></ul><ul><ul><li>Look for after effects of the AJAX request, such as: </li></ul></ul><ul><ul><ul><li>Icon gets displayed </li></ul></ul></ul><ul><ul><ul><li>Hidden <DIV> is made visible </li></ul></ul></ul><ul><li>XPath support </li></ul><ul><ul><li>//div[@id=“recent_traffic_graph”]/img </li></ul></ul><ul><ul><li>//div[4]/div/div/div[1]/div[1]/table/tbody/tr/td[2]/span[4]/a/img </li></ul></ul><ul><ul><li>//table[@id=“table1”]//tr[4]/td[2] </li></ul></ul><ul><ul><li>(//table[@class=“results”])//th[text()=“Price”]/../tr </li></ul></ul>

21. Last slide <ul><li>Selenium (IDE, RC, etc) </li></ul><ul><ul><li>http://openqa.org </li></ul></ul><ul><li>PHPUnit </li></ul><ul><ul><li>http://phpunit.de </li></ul></ul><ul><li>PEAR::Testing_Selenium </li></ul><ul><ul><li>http://pear.php.net/package/Testing_Selenium </li></ul></ul><ul><li>Recommended books </li></ul><ul><ul><li>PHPUnit Pocket Guide </li></ul></ul><ul><ul><ul><li>http://oreilly.com/catalog/phpunitpg/ </li></ul></ul></ul><ul><ul><li>PHPUnit Pocket Guide (online for free) </li></ul></ul><ul><ul><ul><li>http://phpunit.de/pocket_guide/ </li></ul></ul></ul><ul><ul><li>Smarty PHP Template Programming and </li></ul></ul><ul><ul><li>Applications (buy it!) </li></ul></ul><ul><ul><ul><li>http://smartybook.com </li></ul></ul></ul>

Web App Testing With Selenium

You are reading a preview.

Check these out next

Web App Testing With Selenium

More Related Content

Slideshows for you (20)

Viewers also liked (11)

Similar to Web App Testing With Selenium (20)

More from joaopmaia (7)

Recently uploaded (20)

Web App Testing With Selenium