Partie 2 : Interactions de base avec Firefox OS via l'utilisation de Marionette

Dans la deuxième partie de notre tutoriel nous allons débuter avec des commandes Marionette simples qui vont nous permettre de contrôler à distance Firefox OS. Même si nous n'allons pas couvrir l'écriture d'un test en intégralité, cet article vous enseigne les fonctionnalités basiques de code que vous pourrez utiliser pour écrire un test. Dans la troisième partie, nous irons plus loin pour faire évoluer ce code en un test réel.

Démarrage de Firefox OS

Pour écrire ces tests vous avez besoin d'avoir Firefox OS déjà en cours d'exécution et prêt à recevoir des commandes :

  1. Démarrer le bureau B2G.
  2. Désactiver l'écran de verrouillage en utilisant Paramètres > Ecran de verrouillage > décocher verrouiller l'écran.
  3. Désactiver la mise en veille de l'écran en changeant le paramètre Paramètres > Affichage > Ecran de veille à jamais.
  4. Déplacer la fenêtre sur le côté en attendant les commandes de test.

Démarrage de Marionette

Maintenant nous allons démarrer une console Python : allez simplement dans une fenêtre de terminal et tapez la commande python.

Depuis cette console nous pouvons envoyer des commandes au serveur Marionette dans Firefox OS. Après avoir saisi les commandes qui suivent vous devriez voir répondre Firefox OS. Dans la console Python, entrez la commande suivante pour importer la librairie Marionette contenant le code dont nous avons besoin :

from marionette import Marionette

Exécutez maintenant les deux lignes suivantes, qui débutent une session Marionette et le préparent à recevoir des commandes de la part du client :

marionette = Marionette()
marionette.start_session()

Si vous ne désactivez pas l'écran de verrouillage comme expliqué ci-dessus, vous pouvez déverrouiller l'écran  en ligne de commande, en utilisant :

marionette.execute_script('window.wrappedJSObject.lockScreen.unlock();')

Accès à différents cadres dans Firefox OS

Les applications web dans Firefox OS opèrent dans différents iFrames. Exécuter des applications web dans des cadres séparés leur donnent des conteneurs différents pour la gestion de la sécurité et du visuel (comme une fenêtre). Vous pouvez imaginer que cela fonctionne comme un bac à sable dans lequel l'application s'exécute. Marionette ne peut fonctionner que dans un seul cadre à la fois. Nous avons besoin de Marionette pour passer dans le cadre avec lequel nous voulons interagir.

Le cadre du haut est aussi l'application Système. Toutes les applications et leurs cadres sont des filles de l'application Système. Notre nouvelle session Marionette commence dans le cadre Système mais pour commencer le test nous devons passer dans l'écran d'accueil.

Pour trouver le iFrame, nous devons d'abord l'identifier. Comme Marionette est basée sur l'API WebDriver, elle utilise les mêmes stratégies pour localiser des éléments, donc nous pouvons utiliser une de ces stratégies pour identifier les éléments web de WebDriver. Pour plus d'informations, lire element location strategies.

Dans ce cas, nous allons utiliser le sélecteur CSS div.homescreen iframe pour sélectionner le iFrame de l'écran d'accueil ; la fonction find_element() le prend comme deuxième argument, le premier étant une définition du mécanisme de sélection utilisé pour faire la recherche. Nous allons ensuite stocker ce résultat dans une variable et exécuter la fonction switch_to_frame() avec la variable comme argument. À présent, essayez les deux commandes suivantes :

# Switch context to the homescreen iframe and tap on the Contacts app icon
home_frame = marionette.find_element('css selector', 'div.homescreen iframe')
marionette.switch_to_frame(home_frame)

Note: Pour plus d'informations et de diagrammes décrivant le changement de cadres, vous pouvez lire Working with iFrames.

Ouverture d'une application

OK. Maintenant que nous nous trouvons dans l'application Homescreen nous pouvons cibler les icônes et les cliquer en utilisant la fonction find_element(), combinée avec la fonction tap().

contacts_icon = marionette.find_element('xpath', "//div[@class='icon']//span[contains(text(),'Contacts')]")
contacts_icon.tap()

Si tout se passe bien, vous devriez maintenant avoir l'application Contacts ouverte, mais nous devons encore passer dans cadre de l'application Contacts pour interagir avec lui, comme nous l'avions fait précédemment avec l'écran d'accueil :

# First, we need to switch context back to the System frame
marionette.switch_to_frame()
 
# Now, switch context to the contacts app frame
contacts_frame = marionette.find_element('css selector', "iframe[data-url*='contacts']")
marionette.switch_to_frame(contacts_frame)

Passer dans le cadre devrait renvoyer True. Si c'est le cas, c'est super ! Cela signifie que nous sommes dans le contexte de l'application Contacts et que nous sommes prêts à l'utiliser.

Manipulation de l'application

Dans la prochaine étape, nous allons réaliser une tâche de test typique — créer un nouveau contact, lui entrer un nom, et le sauvegarder. Premièrement, nous allons appuyer sur le bouton d'ajout d'un contact :

# Tap [+] to add a new Contact
marionette.find_element('id', 'add-contact-button').tap()

Maintenant, ajoutons le nom du contact en utilisant les deux commandes suivantes (send_keys() est utilisée pour insérer une valeur dans un élément) :

marionette.find_element('id', 'givenName').send_keys('Foo')
# Add the contact's surname
marionette.find_element('id', 'familyName').send_keys('Bar')

À présent, appuyons sur le bouton OK pour sauvegarder le contact :

marionette.find_element('id', 'save-button').tap()

Vous devriez voir un nouveau contact entré dans l'application Contacts. Si c'est le cas, c'est parfait !

Note : si ce n'est pas le cas, redémarrez ou tuez l'application Contacts, retournez sur l'écran d'accueil et essayez d'exécuter la tâche de nouveau.

Fermeture de votre session Marionette

Pour finir, vous devez fermer votre session Marionette en saisissant la commande suivante :

marionette.delete_session()

Tout cela a bien fonctionné, mais vous ne pouvez pas taper dans une console Python à chaque fois que vous voulez exécuter un test ! Dans la partie 3, nous allons compiler ce script dans un fichier Python que nous pourrons réutiliser à chaque fois que l'on voudra exécuter un test. Nous ajouterons également une ligne pour déterminer si le test a réussi ou échoué.

Note : lors de l'écriture des commandes Marionette, vous avez certainement remarqué que l'accès à la structure HTML sous-jacente de l'application est vitale pour comprendre les repères dont vous avez besoin. Partie 7: Ecrire vos propres tests offre quelques ressources utiles pour vous aider sur ce sujet.

 

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : jwhitlock, SphinxKnight, Goofy, J.DMB
 Dernière mise à jour par : jwhitlock,