{"id":486,"date":"2013-08-03T10:41:58","date_gmt":"2013-08-03T09:41:58","guid":{"rendered":"http:\/\/blog.cyril-grandjean.co.uk\/?p=486"},"modified":"2018-03-22T18:46:28","modified_gmt":"2018-03-22T17:46:28","slug":"ensure-the-quality-of-your-web-projects-with-selenium","status":"publish","type":"post","link":"https:\/\/www.cyril-grandjean.fr\/fr\/qualite-projets-web-avec-selenium","title":{"rendered":"Assurez la qualit\u00e9 de vos projets web avec Selenium"},"content":{"rendered":"<p><\/p>\n<p>Quand vous d\u00e9veloppez une version de votre application web, vous aurez souvent besoin de cr\u00e9er une proc\u00e9dure de test qui testera toutes les fonctionnalit\u00e9s de votre application web. Ensuite, vous allez ex\u00e9cuter tous ces tests fonctionnels manuellement dans le but de v\u00e9rifier qu&rsquo;aucune r\u00e9gression n&rsquo;est apparue. Les tests fonctionnels manuels sont long, ennuyeux et peuvent \u00eatre sujet \u00e0 des erreurs humaines.<\/p>\n<p>Vous pouvez \u00e9viter tous ces d\u00e9savantages en automatisant vos tests fonctionnels en utilisant la librairie Selenium. En utilisant la librairie Selenium avec Java, vous serez capable d&rsquo;automatiser vos actions du navigateur web and vous serez capable de v\u00e9rifier que ces actions ont le comportement souhait\u00e9.<\/p>\n<p>Nous prendrons exemple de ce programme PHP basique:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">&lt;?php\r\nsession_start();\r\n\r\n\/\/Nous ajoutons l'\u00e9l\u00e9ment \u00e0 l'int\u00e9rieur d'un tableau en session\r\nif(isset($_POST&#x5B;'elementToAdd']))\r\n{\r\n\t\/\/Si le tableau est d\u00e9j\u00e0 cr\u00e9e\r\n\tif(is_array($_SESSION&#x5B;'array']))\r\n\t{\r\n\t\t\/\/Limite de 10 \u00e9l\u00e9ments\r\n\t\tif(sizeof($_SESSION&#x5B;'array']) &lt; 10)\r\n\t\t{\r\n\t\t\t\/\/Nous ajoutons notre \u00e9l\u00e9ment\r\n\t\t\tarray_push($_SESSION&#x5B;'array'],$_POST&#x5B;'elementToAdd']);\r\n\t\t}\r\n\t}\r\n\telse\r\n\t{\r\n\t\t\/\/Nous cr\u00e9ons un nouveau tableau\r\n\t\t$_SESSION&#x5B;'array'] = array($_POST&#x5B;'elementToAdd']);\r\n\t}\r\n}\r\n\/\/Nous supprimons un \u00e9l\u00e9ment du tableau en session\r\nelse if(isset($_POST&#x5B;'elementToDelete']))\r\n{\r\n\tunset($_SESSION&#x5B;'array']&#x5B;array_search($_POST&#x5B;'elementToDelete'], $_SESSION&#x5B;'array'])]);\r\n}\r\n?&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;?php\r\n\t\/\/Nous affichons le tableau HTML si il y a des \u00e9l\u00e9ments en session\r\n\tif(isset($_SESSION&#x5B;'array']) &amp;&amp; is_array($_SESSION&#x5B;'array']) &amp;&amp; sizeof($_SESSION&#x5B;'array']) &gt; 0)\r\n\t{\r\n\t?&gt;\r\n\t\t&lt;table&gt;\r\n\t\t\t&lt;?php\r\n\t\t\t\/\/Nous affichons nos \u00e9l\u00e9ments en session\r\n\t\t\tforeach ($_SESSION&#x5B;'array'] as $value)\r\n\t\t\t{\r\n\t\t\t?&gt;\r\n\t\t\t\t&lt;tr class=&quot;aRow&quot;&gt;\r\n\t\t\t\t\t&lt;td class=&quot;rowValue&quot;&gt;\r\n\t\t\t\t\t\t&lt;?php echo $value ?&gt;\r\n\t\t\t\t\t&lt;\/td&gt;\r\n\t\t\t\t\t&lt;td&gt;\r\n\t\t\t\t\t\t&lt;form method=&quot;post&quot;&gt;\r\n\t\t\t\t\t\t\t&lt;input type=&quot;hidden&quot; name=&quot;elementToDelete&quot; value=&quot;&lt;?php echo $value ?&gt;&quot; \/&gt;\r\n\t\t\t\t\t\t\t&lt;input type=&quot;submit&quot; class=&quot;deleteButton&quot; value=&quot;Supprimer l'\u00e9l\u00e9ment&quot; \/&gt;\r\n\t\t\t\t\t\t&lt;\/form&gt;\r\n\t\t\t\t\t&lt;\/td&gt;\r\n\t\t\t\t&lt;\/tr&gt;\r\n\t\t\t&lt;?php\r\n\t\t\t}\r\n\t\t\t?&gt;\r\n\t\t&lt;\/table&gt;\r\n\t&lt;?php\r\n\t}\t\r\n\t?&gt;\r\n\t\r\n\t&lt;form method=&quot;post&quot;&gt;\r\n\t\t&lt;input name=&quot;elementToAdd&quot; type=&quot;text&quot; \/&gt;\r\n\t\t&lt;input id=&quot;submitButton&quot; type=&quot;submit&quot; value=&quot;Ajouter l'\u00e9l\u00e9ment&quot; \/&gt;\r\n\t&lt;\/form&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Vous pouvez cliquer ici pour voir le r\u00e9sultat de ce script PHP <a title=\"Selenium test page\" href=\"http:\/\/www.cyril-grandjean.fr\/fr\/selenium.php\" target=\"_blank\">ici <\/a>.<\/p>\n<p>A l&rsquo;int\u00e9rieur de ce script PHP, nous avons un formulaire que nous utiliserons pour ajouter un \u00e9l\u00e9ment \u00e0 l&rsquo;int\u00e9rieur d&rsquo;une session PHP limit\u00e9e \u00e0 10 \u00e9l\u00e9ments uniquement. Quand un \u00e9l\u00e9ment est ajout\u00e9 au tableau, nous pouvons le supprimer en cliquant sur le bouton supprimer.<\/p>\n<p>Nous allons ensuite cr\u00e9er la proc\u00e9dure de tests fonctionnels suivante que nous allons automatiser avec Selenium:<\/p>\n<ul>\n<li>Nous ajoutons un \u00e9l\u00e9ment \u00e0 l&rsquo;int\u00e9rieur du tableau et nous v\u00e9rifions qu&rsquo;il est bien ajout\u00e9.<\/li>\n<li>Nous supprimons l&rsquo;\u00e9l\u00e9ment du tableau et nous v\u00e9rifions que l&rsquo;\u00e9l\u00e9ment est bien supprim\u00e9.<\/li>\n<li>Nous testons la limite de 10 \u00e9l\u00e9ments<\/li>\n<\/ul>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">public class SeleniumClass {\r\n\r\n    \/**\r\n     * Driver du navigateur web\r\n     *\/\r\n    private WebDriver driver;\r\n\r\n    \/**\r\n     * Code \u00e0 ex\u00e9cuter avant chaque test JUnit\r\n     *\/\r\n    @Before\r\n    public void setUp() {\r\n\r\n        \/\/Nous cr\u00e9ons notre driver Firefox\r\n        driver = new FirefoxDriver();\r\n\r\n        \/\/Nous l'initialisons avec une valeur maximale de 5 secondes\r\n        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);\r\n    }\r\n\r\n    \/**\r\n     * Test JUnit de nos tests fonctionnels\r\n     *\/\r\n    @Test\r\n    public void testElementPage()\r\n    {\r\n        \/\/Nous chargeons notre page web\r\n        driver.get(&quot;http:\/\/www.cyril-grandjean.fr\/fr\/selenium.php&quot;);\r\n\r\n        \/\/Nous trouvons le champ texte avec le nom elementToAdd que nous remplissons avec la valeur element to add\r\n        driver.findElement(By.name(&quot;elementToAdd&quot;)).sendKeys(&quot;element to add&quot;);\r\n\r\n        \/\/Nous cliquons sur le boutton avec l'id submitButton\r\n        driver.findElement(By.id(&quot;submitButton&quot;)).click();\r\n\r\n        \/\/Nous v\u00e9rifions qu'un \u00e9l\u00e9ment avec la classe rowValue a \u00e9t\u00e9 ajout\u00e9\r\n        assert driver.findElements(By.className(&quot;rowValue&quot;)).size() == 1;\r\n\r\n        \/\/Nous v\u00e9rifions la valeur de l'\u00e9l\u00e9ment dans le tableau HTML\r\n        assert driver.findElement(By.className(&quot;rowValue&quot;)).getText().equals(&quot;element to add&quot;);\r\n\r\n        \/\/Nous v\u00e9rifions le champ hidden du formulaire pour supprimer un \u00e9l\u00e9ment en v\u00e9rifiant l'attribut value\r\n        assert driver.findElement(By.name(&quot;elementToDelete&quot;)).getAttribute(&quot;value&quot;).equals(&quot;element to add&quot;);\r\n\r\n        \/\/Nous supprimons l'\u00e9l\u00e9ment en cliquant sur le boutton supprimer\r\n        driver.findElement(By.className(&quot;deleteButton&quot;)).click();\r\n\r\n        \/\/Nous v\u00e9rifions que l'\u00e9l\u00e9ment a bien \u00e9t\u00e9 supprim\u00e9\r\n        assert driver.findElements(By.className(&quot;rowValue&quot;)).size() == 0;\r\n\r\n        \/\/Nous essayons d'ajouter 11 \u00e9l\u00e9ments\r\n        for(int counterElementAdded = 0; counterElementAdded &lt; 11; counterElementAdded++)\r\n        {\r\n             \/\/Nous trouvons le champ texte avec le nom elementToAdd que nous remplissons avec la valeur element to add\r\n            driver.findElement(By.name(&quot;elementToAdd&quot;)).sendKeys(&quot;element to add&quot;);\r\n\r\n             \/\/Nous cliquons sur le boutton avec l'id submitButton\r\n            driver.findElement(By.id(&quot;submitButton&quot;)).click();\r\n        }\r\n\r\n        \/\/Nous v\u00e9rifions qu'il y a toujours 10 \u00e9l\u00e9ments\r\n        assert driver.findElements(By.className(&quot;rowValue&quot;)).size() == 10;\r\n\r\n        \/\/Nous supprimons les \u00e9l\u00e9ments en cliquant sur les boutons supprimer\r\n        while (driver.findElements(By.className(&quot;deleteButton&quot;)).size() == 0)\r\n        {\r\n            \/\/Nous supprimons l'\u00e9l\u00e9ment en cliquant sur le boutton supprimer\r\n            driver.findElements(By.className(&quot;deleteButton&quot;)).get(0).click();\r\n        }\r\n\r\n        \/\/Nous v\u00e9rifions que les \u00e9l\u00e9ments ont bien \u00e9t\u00e9 supprim\u00e9s\r\n        assert driver.findElements(By.className(&quot;rowValue&quot;)).size() == 0;\r\n    }\r\n\r\n    \/**\r\n     * Code \u00e0 ex\u00e9cuter apr\u00e8s chaque test JUnit\r\n     *\/\r\n    @After\r\n    public void tearDown() {\r\n\r\n        \/\/Nous quittons le driver\r\n        driver.quit();\r\n    }\r\n}<\/pre>\n<p>Avec ces tests JUnit Selenium, nous avons \u00e9t\u00e9 capable d&rsquo;automatiquement tester toutes les fonctionnalit\u00e9s de notre script PHP.<\/p>\n<p>Vous pouvez trouver plus d&rsquo;information \u00e0 propos de Selenium au lien suivant :\u00a0<a title=\"Selenium documentation website\" href=\"http:\/\/docs.seleniumhq.org\" target=\"_blank\">http:\/\/docs.seleniumhq.org<\/a><\/p>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Quand vous d\u00e9veloppez une version de votre application web, vous aurez souvent besoin de cr\u00e9er une proc\u00e9dure de test qui testera toutes les fonctionnalit\u00e9s de votre application web. Ensuite, vous allez ex\u00e9cuter tous ces tests fonctionnels manuellement dans le but de v\u00e9rifier qu&rsquo;aucune r\u00e9gression n&rsquo;est apparue. Les tests fonctionnels manuels sont long, ennuyeux et peuvent [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,107],"tags":[77,81,78,54,80,82,76,75,79,73,109],"class_list":["post-486","post","type-post","status-publish","format-standard","hentry","category-developpement-web","category-tous","tag-assurance","tag-automatic","tag-functional","tag-java","tag-junit","tag-qa","tag-quality","tag-selenium","tag-tests","tag-web","tag-web-development"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.cyril-grandjean.fr\/fr\/wp-json\/wp\/v2\/posts\/486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cyril-grandjean.fr\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cyril-grandjean.fr\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cyril-grandjean.fr\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cyril-grandjean.fr\/fr\/wp-json\/wp\/v2\/comments?post=486"}],"version-history":[{"count":0,"href":"https:\/\/www.cyril-grandjean.fr\/fr\/wp-json\/wp\/v2\/posts\/486\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.cyril-grandjean.fr\/fr\/wp-json\/wp\/v2\/media?parent=486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cyril-grandjean.fr\/fr\/wp-json\/wp\/v2\/categories?post=486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cyril-grandjean.fr\/fr\/wp-json\/wp\/v2\/tags?post=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}