Catégories : Expertise TechniquePar Tags:

Avec ce billet je vais vous présenter BrowserStack, un outil multi-navigateur en complément de Selenium API qui va nous permettre d’interagir avec une application web. Nous allons tester ces outils en créant un test fonctionnel pour tester un site internet sur un navigateur.

Le gihub de la solution :https://github.com/Lefanthome/BrowserStack-Selenium

Présentation BrowserStack

BrowserStack est un outil de test multi-navigateur basé sur le cloud qui permet aux développeurs de tester leurs sites Web à travers les différents navigateurs sur différents systèmes d’exploitation.
Lien : https://www.browserstack.com

La liste des navigateurs pris en compte est disponible sur ce lien : https://www.browserstack.com/list-of-browsers-and-platforms?product=live
Il y a beaucoup de choix entre les systèmes d’exploitation, plateforme mobile et les navigateurs compatibles, cette liste est mise à jours régulièrement.
La tarification du 12 décembre 2017 est la suivante:

tarif_browserstack

Plusieurs tarifications existent pour différents mode d’utilisation, donnant le choix entre une simple mise à disposition d’un mode Live permettant uniquement d’aller sur le site BrowserStack et de sélectionner un navigateur et le système d’exploitation compatible parmi une liste définie pour faire des tests manuels à distance.

navigators_browserstack

Ou un mode Automate qui permet d’utiliser l’API pour ainsi faire tourner des tests fonctionnels. Dans la suite de cet article, nous allons nous servir de ce dernier mode pour créer un test fonctionnelle à partir d’un scénario de navigation.

Présentation de Selenium

Selenium

Selenium est un outil d’automatisation permettant la réalisation des tests d’interface d’applications Web.

Il se compose de deux parties :

  • Selenium IDE : Extension qui permet la création de scénario
  • Selenium WebDriver : API permettant de programmer des actions sur les interfaces web

Lien : http://www.seleniumhq.org

Browserstack utilise des webdrivers Selenium pour exécuter des tests automatisés.

Qui doit utiliser BrowserStack, et pourquoi ?

« Qui » : Les développeurs et les testeurs de Qualité.

« Pourquoi » : Pour valider le bon fonctionnement de l’application web avec les tests de non-régression, ainsi que la vérification que le développement d’une évolution est conformes aux besoins exprimés avant d’effectuer la mise en production.

Site internet à tester

Nous allons tester quelques actions de navigation sur le site softfluent.fr

Voici la description du scénario :

  1. Aller sur la page d’accueil : https://www.softfluent.fr/
  2. Ensuite clic sur le lien « Nos Offres » :
  3. On sélectionne ensuite l’offre : Développement d’application .Net
  4. On va chercher dans la page, le texte : « Votre SSII Microsoft Gold Partner en développement .NET»

Prérequis

Pour mettre en oeuvre nos tests d’interfaces web, on utilisera Selenium IDE pour la récupération du XPath d’un élément, l’API Selenium ainsi que la création d’un compte BrowserStack.

Le XPath permet de localiser un élément dans un document XML.

Selenium IDE

Pour Selenium IDE,  sous FireFox (5.5 max) il faut installer via ce lien :  https://addons.mozilla.org/fr/firefox/addon/selenium-ide/

Il est possible d’utiliser le composant : Katalon Automation Recorder, ou bien Chrome avec l’extension suivante : https://chrome.google.com/webstore/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd

Une fois installé, il suffit d’ouvrir Selenium IDE en popup. Ainsi quand on clique sur un élément dans une page web, nous avons les informations (voir image ci-dessous) :

  • La commande : (click, open,…)
  • La cible : Le patch pour accéder à cet élément
  • Valeur : Les données entrées dans un input.

selenium_id

Création d’un compte BrowserStack

Nous allons créer un compte Free Trial pour lequel on aura droit à 30 minutes d’essais en live, 100 minutes de tests ​​automatisés et 100 Captures d’écran.

Pour ce faire il suffit de s’inscrire à l’adresse suivant : https://www.browserstack.com/users/sign_up

Une fois l’inscription effectuée, on va récupérer les clés qui vont nous permettre de nous connecter à BrowserStack quand on va lancer notre test unitaire.

Il suffit d’aller sur l’espace : « Account » puis « Setting »

Accoount_BrowserStack

Maintenant que nous avons ces éléments, nous allons créer une application de tests unitaires.

Test automatisés sous Visual Studio 2017

Création du projet

Le projet sera nommé : UnitTestBrowserStack
Le type de projet : Unit Test Project

create_solution

Installation des dépendances

Maintenant on va ajouter l’API Selenium.WebDriver : pour cela, il faut utiliser le menu Manage NuGet Packages ou bien utiliser la console Package Manager Console et saisir Install-Package Selenium.WebDriver :

nuget_solution

ainsi que Selenium.Support qui contient des Helpers pour API Selenium

selenum_nugget

Configuration BrowserStack

Une fois que nous avons nos dépendances, nous allons ajouter le code nécessaire dans l’initialisation de notre test unitaire pour configurer le navigateur qui sera utilisé par BrowserStack pour ce test. Browserstack fournit une aide pour cette configuration à travers ce lien : https://www.browserstack.com/automate/c-sharp

select_navigator

Dans l’image ci-dessus, je sélectionne Windows 10 avec le navigateur IE 11 et une résolution de 1600×1200 maintenant il n’y a plus qu’à ajouter la configuration dans notre code.

Nous pouvons aussi choisir pour les navigateurs mobiles qui auront la configuration suivante :

select_navigator_code

Le code c#

IWebDriver _driver;
        [TestInitialize]
        public void StartDriver()
        {
            //Configure Driver
            var capabilities = new DesiredCapabilities();
            capabilities.SetCapability("browser", "IE");
            capabilities.SetCapability("browser_version", "11.0");
            capabilities.SetCapability("os", "Windows");
            capabilities.SetCapability("os_version", "10");
            capabilities.SetCapability("resolution", "1600x1200");
            //Ajout de la capture
            capabilities.SetCapability("browserstack.debug", true);
            //Nom du projet
            capabilities.SetCapability("project", "Softfluent.fr");
            //Configuration BrowserStack
            capabilities.SetCapability("browserstack.user", "USER");
            capabilities.SetCapability("browserstack.key", "KEY");
            _driver = new RemoteWebDriver(new Uri("http://hub.browserstack.com/wd/hub/"), capabilities);
            _driver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(2));
            // This will maximize your window to 100%
            _driver.Manage().Window.Maximize();
        }
        [TestCleanup]
        public void DriverCleanup()
        {
            if(_driver != null)
            {
                _driver.Quit();
            }
        }

La méthode StartDriver() permet la configuration et le lancement du navigateur choisi dans le contexte de Browserstack à chaque lancement d’un test unitaire.

La méthode DriverCleanup() permet d’arrêter le navigateur précédemment lancé.

Nota :
–    les namespaces OpenQA.Selenium.Remote et OpenQA.Selenium doivent être déclarés
–    les valeurs de UserName et key sont recopiées de la page https://www.browserstack.com/automate/c-sharp

Création du scénario

Maintenant que nous avons la méthode permettant de lancer puis d’arrêter le navigateur, nous allons configurer le scénario dans une méthode de test unitaire classique possédant l’attribut [TestMethod]. Les chemins Xpath utilisés sont récupérés avec l’IDE Selenium.

[TestMethod]
        public void TestScenarioNavigation()
        {
            //1 - Aller sur la page d’accueil: https://www.softfluent.fr/
            _driver.Navigate().GoToUrl("https://www.softfluent.fr/");
            
            //2 - Vérification de l'url
            Assert.AreEqual(_driver.Url, "https://www.softfluent.fr/", "Url is not the same");
            //3 - Ensuite clic sur le lien « Offres » : 
            _driver.FindElement(By.XPath("//a[contains(@href, 'offres')]")).Click();
            WaitForPageToLoad(_driver);
            //4 - On sélectionne ensuite Offre : developpement 
            _driver.FindElement(By.XPath("//a[contains(@href, 'developpement')]")).Click();
            WaitForPageToLoad(_driver);
            //5 - On va chercher dans la page RowShare : Votre SSII Microsoft Gold Partner en développement .NET 
            var text = _driver.FindElement(By.XPath("//div[@id='offers']/div/div/div/h1")).Text;
            Assert.AreEqual(text, "Votre SSII Microsoft Gold Partner en développement .NET", "Value is not the same.");
        }
        public  void WaitForPageToLoad(IWebDriver driver)
        {
            var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10.00));
            var javascript = driver as IJavaScriptExecutor;
            if (javascript == null)
                throw new ArgumentException("driver", "Driver must support javascript execution");
            wait.Until((d) =>
            {
                try
                {
                    string readyState = javascript.ExecuteScript("if (document.readyState) return document.readyState;").ToString();
                    return readyState.ToLower() == "complete";
                }
                catch (Exception ex)
                {
                    throw new Exception(ex.Message);
                }
            });
        }

La méthode WaitForPageToLoad() permet d’attendre que la page soit bien chargée.

Exécution du scénario

Il ne reste plus qu’à exécuter le test unitaire : pour cela, il suffit d’afficher la fenêtre Test Explorer, puis de sélectionner la méthode de test ci-dessus et de cliquer sur « run ».

TU_explorer

Résultat du test unitaire :

TU_result

A présent, nous allons nous connecter à l’interface BrowserStack puis aller dans le lien « Automate», nous pouvons ainsi voir le déroulement du scénario du test avec des captures d’écran. Cela permet d’avoir un contrôle visuel sur le test exécuter.

BrowserStack_info

Les captures d’écrans associées sont disponibles dans l’onglet « Visual Logs » et permettent d’analyser certains dysfonctionnements le cas échéant.

Exécution en local

Maintenant que notre test fonctionne, il manque le fait d’exécuter le test pour un site en environnement de développement ou de recette inaccessible depuis Internet. Pour cela, Browserstack fournit un exécutable qui, lancé avant chaque exécution de tests, donne accès à un site accessible depuis le poste local (en local ou bien un site sur un environnement autre qu’en production) : cet exécutable est récupérable via https://www.browserstack.com/local-testing#command-line

Ligne de commande :

BrowserStackLocal.exe <key> où <key> est la clé associé au compte utilisateur ( voir l’initialisation du test unitaire).

Et d’ajouter le code lors de la configuration de browserstack dans le test unitaire:

capabilities.SetCapability("browserstack.local", "true");

Régler la taille de la fenêtre :

Pour vérifier le fonctionnement de sites en Responsive Design, on peut définir la taille de la fenêtre, en jouant avec la propriété Size, comme suit :

driver.Manage().Window.Size = new Size(1280, 800);

Conclusion

A travers cet article, nous avons pu avoir un aperçu de l’implémentation de l’outil BrowserStack sans avoir à installer des navigateurs localement. A noter que ces tests unitaires peuvent être lancés depuis le Test Explorer de Visual Studio local, mais peuvent aussi être ultérieurement intégrés aux tests d’un processus de build exécuté sur la plateforme Visual Studio Team Service.

Ne ratez plus aucune actualité avec la newsletter mensuelle de SoftFluent

Newsletter SoftFluent