Prueba De Aplicaciones Web con Selenium 2 y WebDriver

http://extrema-sistemas.comPrueba de aplicaciones web conSelenium 2 y WebDriverDavid Gómez

Pruebas de aplicaciones webPruebas unitarias.Pruebas de integración.Pruebas end-to-end. 2

Pruebas end-to-endLa visión del usuarioDistintos navegadoresRich Web Applications - Ajax y JavaScript 3

SeleniumHerramienta para pruebas funcionales desde la perspectiva del usuario. 4

ComponentesSelenium Core - Motor de ejecución empotrado en el NavegadorSelenium IDE - Herramienta para grabar los tests en HTMLSelenium RC (Remote Control) - Tests escritos en Java, Ruby, Python, Perl, PHP... 5

Selenium IDE FireFox plugin que graba y ejecuta los tests. 6

SeleniumTest Cases y Test Suites en formato HTML. 7

SeleniumTest Cases y Test Suites en formato HTML. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> <title>Test Suite</title> </head> <body> <table id="suiteTable" cellpadding="1" cellspacing="1" border="1" class="selenium"> <tbody> <tr><td><b>Test Suite</b></td></tr> <tr><td><a href="CreateShowTest">CreateShowTest</a></td></tr> <tr><td><a href="DeleteShowTest">DeleteShowTest</a></td></tr> </tbody> </table> </body> </html> 7

SeleniumTest Cases y Test Suites en formato HTML. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <body> <head> cellpadding="1" cellspacing="1" border="1"> <table <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> <thead><tr><td rowspan="1" colspan="3">CreateShowTest</td></tr></thead> <title>Test Suite</title> <tbody> </head> <tr> <body> <td>open</td> <table id="suiteTable" cellpadding="1" cellspacing="1" border="1" <td>/home/</td> <td></td> class="selenium"> </tr> <tbody> <tr> <tr><td><b>Test Suite</b></td></tr> <td>waitForElementPresent</td> <tr><td><a href="CreateShowTest">CreateShowTest</a></td></tr> <td>link=Crear nuevo evento</td> <tr><td><a href="DeleteShowTest">DeleteShowTest</a></td></tr> <td></td> </tbody> </tr> </table> <tr> </body> <td>clickAndWait</td> <td>link=Crear nuevo evento</td> </html> <td></td> </tr> </tbody></table></body> 7

LimitacionesPruebas limitadas a acciones de usuario.No soporta: - Condiciones - Iteración - Trazas y generación de informes - Etc... 8

Selenium RC.public class LoginTestCase extends SeleneseTestCase { public void setUp() throws Exception { setUp("http://localhost:8888/", "*firefox"); } public void testLoginTestCase() throws Exception { selenium.open("/home/"); verifyTrue(selenium.isElementPresent("logout-link")); selenium.click("logout-link"); selenium.waitForPageToLoad("30000"); verifyTrue(selenium.isElementPresent("login-link")); }} 9

Selenium RC.public class LoginTestCase extends SeleneseTestCase { Navegadores: public void setUp() throws Exception { setUp("http://localhost:8888/", "*firefox"); *chrome } *firefox *iexplore public void testLoginTestCase() throws Exception { selenium.open("/home/"); verifyTrue(selenium.isElementPresent("logout-link")); selenium.click("logout-link"); selenium.waitForPageToLoad("30000"); verifyTrue(selenium.isElementPresent("login-link")); }} 9

Selenium RC.public class LoginTestCase extends SeleneseTestCase { Navegadores: public void setUp() throws Exception { setUp("http://localhost:8888/", "*firefox"); *chrome } *firefox *iexplore public void testLoginTestCase() throws Exception { selenium.open("/home/"); verifyTrue(selenium.isElementPresent("logout-link")); selenium.click("logout-link"); selenium.waitForPageToLoad("30000"); verifyTrue(selenium.isElementPresent("login-link")); }} Selenium IDE permite generar el test Junit desde el script HTML 9

Arquitectura de Selenium RC 10

Selenium 2 y WebDriver 11

Selenium 2 y WebDriverSelenium: JavaScript dentro del navegador.WebDriver: componente especíﬁco - Firefox: JavaScript en un componente XPCOM. - IE: Uso del API de Automatización C++ - Chrome: Extensión con JavaScript V8 12

Para empezar Maven: pom.xml<project> [...] <dependencies> <dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selenium</artifactId> <version>2.0b2</version> </dependency> <dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selenium-server</artifactId> <version>2.0b2</version> </dependency> </dependencies> [...]</project> 13

DriverComponente que representa el navegador public class SimpleTest { private WebDriver driver = null; @Before public void create() { driver = new FirefoxDriver(); } } 14

Implementaciones 15

Implementacionesdriver = new HtmlUnitDriver(); 15

Implementacionesdriver = new HtmlUnitDriver(); driver = new FirefoxDriver(); 15

Implementaciones driver = new HtmlUnitDriver(); driver = new FirefoxDriver();driver = new InternetExplorerDriver(); 15

Implementaciones driver = new HtmlUnitDriver(); driver = new FirefoxDriver();driver = new InternetExplorerDriver(); driver = new ChromeDriver(); 15

Page Object ModelLa forma de interactuar con WebDriver driver.get("http://localhost:8888/home"); 16

Page Object ModelLa forma de interactuar con WebDriver driver.get("http://localhost:8888/home"); - Localizar un elemento - Invocar una acción - Comprobar propiedades ‘visuales’ 16

Elementos de páginaWebElement header = driver.findElement({Locator});List<WebElement> shows = driver.findElements({Locator}); 17

Locator: Bypublic static By id(java.lang.String id)public static By linkText(java.lang.String linkText)public static By name(java.lang.String name) public Clase de métodos estáticos static By partialLinkText(java.lang.String linkText) con la estrategia de selección.publicstatic By tagName(java.lang.String name) public static By xpath(java.lang.String xpathExpression)public static By cssSelector(java.lang.String name) 18

WebElementComponentes devueltos por ﬁndElement()WebElement header = driver.findElement(By.cssSelector("#header"));List<WebElement> shows = driver.findElements(By.cssSelector("ul.data li")); 19

WebElementList<WebElement> shows = driver.findElements(By.cssSelector("ul.data li"));WebElement show = shows.get(0);show.findElement(By.cssSelector(".contents h3 a")).click(); 20

WebElementList<WebElement> shows = driver.findElements(By.cssSelector("ul.data li"));WebElement show = shows.get(0);show.findElement(By.cssSelector(".contents h3 a")).click(); <div class="grid_2 alpha"> <a title="Gervasio Sánchez. Desaparecidos" href="..."> <img src="..." class="thumbnail"> </a> <div class="small">{...}</div> </div> <div class="contents grid_4 omega"> <h3> <a href="..."> Gervasio Sánchez. Desaparecidos </a> </h3> <div class="author"> by <a href="...">test@example.com</a> hace 1 minuto</div> <div class="description">{...}</div> <a href="..." class="button toright">» Comprar ahora</a> </div> 20

Accionespublic interface WebElement extends SearchContext { void click(); void submit(); void sendKeys(CharSequence... keysToSend); String getAttribute(String name); ... List<WebElement> findElements(By by); WebElement findElement(By by);} 21

RenderedWebElementConsultar propiedades visualesOperaciones de drag and drop.Simula el movimiento del ratón (hover)List<WebElement> shows = driver.findElements(By.cssSelector("ul.data li"));WebElement show = shows.get(0);Dimension size = ((RenderedWebElement) show).getSize() 22

RenderedWebElementConsultar propiedades visualesOperaciones de drag and drop.Simula el movimiento del ratón (hover)List<WebElement> shows = driver.findElements(By.cssSelector("ul.data li"));WebElement show = shows.get(0);Dimension size = ((RenderedWebElement) show).getSize() java.awt.Dimension[width=460,height=141] 22

Page Object Pattern 23

Page Object PatternCrea un objeto que encapsula la página con un API especíﬁco 24

PageObject Pattern• 25

PageObject Pattern public class KoliseoHomePage extends KoliseoPage { private WebElement showList;• public ShowThumbnail getShow(int pos) { } public KoliseoPage clickOnShow(int pos) { } public KoliseoPage buyTickets(int pos) { } } 25

PageObject Pattern public class KoliseoHomePage extends KoliseoPage { public class ShowThumbnail { private WebElement showList;• public ShowThumbnail getShow(int pos) { private final WebElement title; private final WebElement description; } private final WebElement buyButton; public KoliseoPage clickOnShow(int pos) { public String getTitle() { return title.getText(); } } public KoliseoPage buyTickets(int pos) { public void navigate() { title.click(); } } } public void buy() { buyButton.click(); } } 25

PageFactoryCrea un PageObject a partir de la página actual. driver.get(“http://localhost:8888/home”); KoliseoHomePage home = PageFactory.initElements(driver, KoliseoHomePage.class); 26

@FindBy@FindBy para conﬁguración especíﬁca. - Por defecto utiliza el #id public class KoliseoHomePage extends KoliseoPage { @FindBy(css=".shows ul.data") private WebElement showList; @FindBy(css=".activities ul.data") private WebElement activities; public KoliseoHomePage(WebDriver driver) { super(driver); } } 27

@FindBy@FindBy para conﬁguración especíﬁca. - Por defecto utiliza el #id public class KoliseoHomePage extends KoliseoPage { @FindBy(css=".shows ul.data") id private WebElement showList; name className @FindBy(css=".activities ul.data") css private WebElement activities; tagName linkText public KoliseoHomePage(WebDriver driver) { partialLinkText super(driver); xpath } } 27

KoliseoHomePagepublic class KoliseoHomePage extends KoliseoPage { @FindBy(css=".shows ul.data") private WebElement showList; public ShowThumbnail getShow(int pos) { List<WebElement> shows = showList.findElements(By.tagName("li")); WebElement show = shows.get(pos); return new ShowThumbnail(driver, show); } public KoliseoShowDetailPage clickOnShow(int pos) { ShowThumbnail show = this.getShow(pos); show.navigate(); return PageFactory.initElements(driver, KoliseoShowDetailPage.class); }} 28

@RunWith(SpringJUnit4ClassRunner.class)@ContextConfiguration("classpath:springio-webdriver-test.xml")public class KoliseoHomeTest { @Autowired(required=false) private WebDriver driver = new HtmlUnitDriver(); private KoliseoHomePage home; @Before public void setUp() { driver.get(“http://localhost:8888/home); home = PageFactory.initElements(driver, KoliseoHomePage.class); } @After public void tearDown() { driver.quit(); } @Test public void showDetail() { assertTrue(home.hasShows()); String showTitle = home.getShow(1).getTitle(); KoliseoShowDetailPage showDetail = home.clickOnShow(1); assertEquals(showTitle, showDetail.getTitle()); } } 29

Show time! 30

ConclusionesSelenium IDE: Scripts HTMLSelenium RC: Código procedural en JavaSelenium 2 - WebDriver: Driver para el Browser - Código OO para nuestras páginas - Page Object Pattern: Nuestros APIs sobre WebDriver 31

Q&A 32

http://lanyrd.com	247
http://extrema-sistemas.com	18
http://twitter.com	1
https://192.168.123.2	1
https://twitter.com	1

Prueba De Aplicaciones Web con Selenium 2 y WebDriver

by dgomezg on Feb 19, 2011

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 268

Statistics

Prueba De Aplicaciones Web con Selenium 2 y WebDriver Presentation Transcript