Selenium pruebas web

http://extrema-sistemas.com

Prueba de aplicaciones web con

Selenium 2 y WebDriver
David Gómez

Pruebas de aplicaciones web

Pruebas unitarias.
Pruebas de integración.
Pruebas end-to-end.

2

Pruebas end-to-end

La visión del usuario
Distintos navegadores
Rich Web Applications
- Ajax y JavaScript

3

Selenium

Herramienta para pruebas funcionales desde
la perspectiva del usuario.

4

Componentes
Selenium Core
- Motor de ejecución empotrado en el Navegador

Selenium IDE
- Herramienta para grabar los tests en HTML

Selenium RC (Remote Control)
- Tests escritos en Java, Ruby, Python, Perl, PHP...
5

Selenium IDE

FireFox plugin que graba
y ejecuta los tests.

6

Selenium
Test Cases y Test Suites en formato HTML.

7

Selenium
<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

Selenium
<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

Limitaciones

Pruebas 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.

Navegadores:
setUp("http://localhost:8888/", "*firefox"); *chrome
} *firefox
*iexplore
}

}

9

Selenium RC.

Navegadores:
setUp("http://localhost:8888/", "*firefox"); *chrome
} *firefox
*iexplore
}

}

Selenium IDE permite generar el test Junit desde el script HTML

9

Arquitectura de Selenium RC

10


11


Selenium: 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

Driver

Componente que representa el navegador
public class SimpleTest {

private WebDriver driver = null;

@Before
public void create() {
driver = new FirefoxDriver();
}

}

14

Implementaciones

15

Implementaciones

driver = new HtmlUnitDriver();

15

Implementaciones

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

15

Implementaciones


driver = new InternetExplorerDriver();

15

Implementaciones


driver = new InternetExplorerDriver(); driver = new ChromeDriver();

15

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

16

Page Object Model
La 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ágina

WebElement header = driver.findElement({Locator});
List<WebElement> shows = driver.findElements({Locator});

17

Locator: By

public 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

WebElement

Componentes devueltos por ﬁndElement()

WebElement header = driver.findElement(By.cssSelector("#header"));
List<WebElement> shows = driver.findElements(By.cssSelector("ul.data li"));

19

WebElement
WebElement show = shows.get(0);
show.findElement(By.cssSelector(".contents h3 a")).click();

20

WebElement
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

Acciones

public 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

RenderedWebElement
Consultar propiedades visuales
Operaciones de drag and drop.
Simula el movimiento del ratón (hover)

Dimension size = ((RenderedWebElement) show).getSize()

22

RenderedWebElement
Consultar propiedades visuales
Operaciones de drag and drop.
Simula el movimiento del ratón (hover)

Dimension size = ((RenderedWebElement) show).getSize()

java.awt.Dimension[width=460,height=141]

22

Page Object Pattern

23

Page Object Pattern

Crea 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 ShowThumbnail {
•
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

PageFactory

Crea 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

@FindBy(css=".shows ul.data")

@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

@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

KoliseoHomePage

@FindBy(css=".shows ul.data")

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

Conclusiones

Selenium IDE: Scripts HTML
Selenium RC: Código procedural en Java
Selenium 2 - WebDriver: Driver para el
Browser
- Código OO para nuestras páginas
- Page Object Pattern: Nuestros APIs
sobre WebDriver

31

Selenium pruebas web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Selenium pruebas web

Similaire à Selenium pruebas web (20)

Plus de David Gómez García

Plus de David Gómez García (20)

Dernier

Dernier (20)

Selenium pruebas web

Notes de l'éditeur