|
|
= Tests UI avec Selenium WebDriver
|
|
|
|
|
|
## Préambule
|
|
|
- Télécharger Selenium Server Standalone (Java bindings) [Selenium Server WebDriver (selenium hq)] (http://www.seleniumhq.org/download/) (et non pas le client ...)
|
|
|
- [javadoc](http://selenium.googlecode.com/svn/trunk/docs/api/java/index.html)
|
|
|
- Vous pouvez télécharger aussi d'autres [clients](http://seleniumhq.org/download/) pour d'autres, mais l'exemple fourni dans cet exercice est en .java. Toutefois, si vous souhaitez travailler avec un autre client, j'accepterai votre rendu.
|
|
|
|
|
|
- Télécharger l'archive [SeleniumWebDriverJUnitTests.zip](http://www.fil.univ-lille1.fr/~bilasco/ODEVA/SeleniumWebDriverJUnitTests.zip) contenant le code exemple vu dans les slides.
|
|
|
- importer les sources dans un projet JUnit et rajouter les .jar du [Selenium Standalone Server](http://seleniumhq.org/download/) ainsi que [Commons IO](https://commons.apache.org/proper/commons-io/download_io.cgi) parmi les librairies du projet
|
|
|
- travailler sur la classe ExampleTestMoneyJs
|
|
|
|
|
|
- Afin d'utiliser selenium-webdriver avec Firefox vous devez :
|
|
|
- télécharger [GeckoDriver]([https://firefox-source-docs.mozilla.org/testing/geckodriver/Support.html)
|
|
|
- affecter des droits d'exécution à geckodriver (chmod u+x geckodriver)
|
|
|
- charger une propriété système webdriver.gecko.driver
|
|
|
|
|
|
```
|
|
|
@Before
|
|
|
public void createDriver() {
|
|
|
System.setProperty("webdriver.gecko.driver", "CHEMIN_ABSOLU_VERS_GECKODRIVER");
|
|
|
driver = new FirefoxDriver();
|
|
|
}
|
|
|
```
|
|
|
|
|
|
- Afin d'utiliser selenium-webdriver avec Chrome vous devez :
|
|
|
- télécharger [Chrome Driver](https://sites.google.com/a/chromium.org/chromedriver)
|
|
|
- affecter des droits d'exécution à chromedriver (chmod u+x chromedriver)
|
|
|
- charger une propriété système webdriver.chrome.drive
|
|
|
|
|
|
```
|
|
|
@Before
|
|
|
public void createDriver() {
|
|
|
System.setProperty("webdriver.chrome.driver", "CHEMIN_ABSOLU_VERS_CHROMEDRIVER");
|
|
|
driver = new ChromeDriver();
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## Travail à effectuer - 1ère partie
|
|
|
- Réutiliser le code src du projet '''money''' (version JS)
|
|
|
- Mettre en place un serveur pour rendre disponible votre application
|
|
|
|
|
|
```
|
|
|
me@b11p11:~$ cd OTI/money_js
|
|
|
me@b11p11:OTI/money_js$ php -S 127.0.0.1:8080
|
|
|
```
|
|
|
|
|
|
- Modifier les appels driver.get() pour faire en sorte que le chargement de la page index.html se fasse correctement (en indiquant le bon chemin)
|
|
|
|
|
|
```
|
|
|
@Test
|
|
|
public void test() throws java.io.IOException{
|
|
|
driver.get("http://localhost:8080/src/index.html"); //Lien vers la page index.html
|
|
|
...
|
|
|
}
|
|
|
```
|
|
|
|
|
|
- En cas d'échec on peut garder des captures d'écran des situations crées.
|
|
|
- vous devez également ajouter le jar [[http://www.fil.univ-lille1.fr/~bilasco/TOOLS/commons-io-2.6.jar | apache commons io]]
|
|
|
|
|
|
```
|
|
|
...
|
|
|
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
|
|
|
FileUtils.copyFile(scrFile, new File("/tmp/screenshot.png"));
|
|
|
|
|
|
assertEquals(driver.findElement(By.id("res")).getText(),"Result : 36 (EUR)");
|
|
|
new File("/tmp/screenshot.png").delete();
|
|
|
...
|
|
|
```
|
|
|
|
|
|
- Les deux tests fournis __add_equiv_curr__ et __add_same_curr__ sont encodés différement :
|
|
|
- __add_same_curr__ - lance le calcul en simulant un click sur le button "Calculer"
|
|
|
```
|
|
|
element = driver.findElement(By.xpath("//input[@type='button']"));
|
|
|
element.click();
|
|
|
```
|
|
|
- __add_equiv_curr__ - lance le calcul en simulant un submit
|
|
|
```
|
|
|
element.submit();
|
|
|
```
|
|
|
|
|
|
- Est-ce que les deux sont compatibles avec le comportement actuel de l'intérface ?
|
|
|
- Qu'en pensez-vous des implications sur l'objet WebDriverWait contrôlant la synchronisation ?
|
|
|
```
|
|
|
new WebDriverWait(driver, 10).until(new ExpectedCondition<Boolean>(){
|
|
|
public Boolean apply(WebDriver d) {
|
|
|
return d.findElement(By.id("res")).isDisplayed();
|
|
|
}
|
|
|
});
|
|
|
```
|
|
|
|
|
|
## Travail à effectuer - Money
|
|
|
- Si vous ne l'avez pas fait lors de la séance précédente, mettez à jour index.html et calc.js à votre convenance pour personnaliser :
|
|
|
- la mise en page
|
|
|
- le prise en compte des exceptions
|
|
|
|
|
|
- Construire plusieurs tests cases JUnit/Selenium permettant de valider les retours visuels pour les différents opérations implémentées et différents cas de figures (devises différentes, valuers ou devises non-conformes, opérations invalides/non-supportées etc.)
|
|
|
|
|
|
- Le but n'est pas d'écrire des test unitaires pour vérifier que les opérations sont bien faites côté métier, mais pour s'assurer que les scripts sont capables de retrouver la bonne information au bon endroit sur l'interface et que les retours visuels sont conformes aux attentes.
|
|
|
|
|
|
- Modifier le code calc.js pour accompagner l'affichages des erreurs par des alerts (par exemple: window.alert("Unsupported operation ...") )
|
|
|
- Ecrivez des nouveaux tests Selenium s'assurant de l'apparition des alertes
|
|
|
- pour accèder à l'alerte depuis WebDriver vous pouvez vous servir de
|
|
|
```
|
|
|
new WebDriverWait(driver,10).until(ExpectedConditions.alertIsPresent());
|
|
|
Alert alert=driver.switchTo().alert();
|
|
|
```
|
|
|
|
|
|
## Optionnel - Forge
|
|
|
- Ecrire des test case JUnit/Selenium qui permettent de vérifier que l'ensemble des liens sur la page d'accueil de ce wiki sont fonctionnels en imposant des asserts spécifiques
|
|
|
|