La taverne du testeur

Test Automatisé : Reconnaissance d’image sur Mobile ( Katalon Studio) – Julien Mer

Katalon Studio ne supporte pas nativement la reconnaissance d’image sur les applications mobiles, un obstacle majeur pour de nombreux testeurs. Cependant, il est possible de contourner cette limitation en utilisant des outils complémentaires.

Pourquoi la reconnaissance d’image?

Parfois, la reconnaissance d’objets peut s’avérer extrêmement complexe, voire impossible à réaliser avec les méthodes traditionnelles. Les éléments visuels dans une application mobile peuvent varier considérablement en fonction des mises à jour de l’interface utilisateur, des différences de résolution d’écran et des changements de style graphique. Dans de telles situations, la reconnaissance d’image devient une solution indispensable.

La reconnaissance d’image permet d’identifier des éléments visuels spécifiques sur l’écran, indépendamment des changements dans le code sous-jacent. Elle offre une flexibilité et une robustesse accrues pour les tests automatisés, particulièrement lorsque les éléments d’interface ne possèdent pas d’identifiants stables ou descriptifs.

En utilisant la reconnaissance d’image, nous pouvons :

  • Contourner les limitations des identifiants dynamiques : Lorsqu’un élément change fréquemment d’ID ou de classe, la reconnaissance d’image offre une méthode fiable pour identifier cet élément.
  • Améliorer la résilience des tests : Les tests basés sur la reconnaissance d’image sont moins susceptibles d’échouer en raison de modifications mineures de l’interface utilisateur.
  • Élargir les possibilités de test : Tester des scénarios complexes où l’interaction se base sur des éléments visuels plutôt que sur des attributs codés.

Dans cet article, vous découvrirez :

  • L’intégration d’OpenCV pour la reconnaissance d’image
  • Création d’un mot clé dans Katalon Studio pour opencv à katalon.
  • Exemple d’un test basique Katalon pour sa mise en œuvre.

Intégration d’OpenCV

L’intégration d’OpenCV dans vos projets de test automatisé avec Katalon Studio est une étape cruciale pour implémenter la reconnaissance d’image. Voici un guide concis pour installer et configurer OpenCV sur Windows et Mac, en utilisant CMake pour la compilation.

1. Prérequis :

Pour Windows :

– Installez les outils de build nécessaires via npm :

 npm install --global windows-build-tools@4.0.0

– Téléchargez et installez CMake depuis : [cmake.org]

Pour Mac :

– Assurez-vous que Homebrew est installé :

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

– Installez CMake via Homebrew :

 brew install cmake

2. Téléchargement d’OpenCV :

– Rendez-vous sur le site officiel d’OpenCV

– Téléchargez la dernière version stable pour votre système d’exploitation (Windows ou Mac).

3. Compilation avec CMake :

Pour Windows :

  • Extraire le fichier téléchargé d’OpenCV dans un répertoire de votre choix.
  • Ouvrez PowerShell en tant qu’administrateur et naviguez vers le répertoire extrait d’OpenCV :
 cd C:\path\to\opencv
  • Créez un répertoire de build et naviguez dedans :
 mkdir build
  cd build
  • Configurez et générez les fichiers make avec CMake :

⚠️ATTENTION, cette étape peut ne pas fonctionne, n’hésitez pas à me contacter pour que nous solutionnons ensemble ce problème.⚠️

 cmake -G "Visual Studio 16 2019" ..
  cmake --build . --config Release
  • Les fichiers compilés se trouveront dans le répertoire build.

Pour Mac :

  • Extraire le fichier téléchargé d’OpenCV dans un répertoire de votre choix.
  • Ouvrez le terminal, naviguez vers le répertoire extrait d’OpenCV et créez un répertoire build
 cd /path/to/opencv
  mkdir build
  cd build

Configurez et générez les fichiers make :

 cmake ..
  make -j8

Une fois la compilation terminée, installez OpenCV :

 sudo make install

Intégration avec Katalon Studio :

L’intégration d’OpenCV dans vos projets de test automatisé avec Katalon Studio peut être facilitée en utilisant Gradle pour gérer les dépendances. Voici comment ajouter les bibliothèques nécessaires et les télécharger en utilisant Gradle.

Étapes d’Intégration

1. Générer le gradle wrapper

Dans le répertoire de votre projet, exécutez :

gradle wrapper

Modifier le fichier build.gradle :

Ajoutez les dépendances suivantes dans votre fichier build.gradle :

dependencies {    
    implementation 'org.openpnp:opencv:4.5.1-2' 
    implementation 'nu.pattern:opencv:2.4.9-7' 
}

Télécharger les dépendances :

Une fois les dépendances ajoutées, téléchargez-les en utilisant Gradle. Ouvrez votre terminal et exécutez la commande suivante dans le répertoire racine de votre projet Katalon :

./gradlew KatalonDependencies

Cette commande télécharge les fichiers JAR nécessaires pour OpenCV directement dans Katalon Studio

Création d’un mot clé personnalisé :

Pour utiliser OpenCV et les dépendances intégrées dans Katalon Studio, il est nécessaire de créer un mot-clé personnalisé. Voici comment procéder :

Ouvrez votre projet Katalon Studio :

  • Allez dans l’onglet Tests Explorer.

Créer un nouveau package :

  • Faites un clic droit sur Keywords.
  • Sélectionnez New > Package.
  • Nommez le package com.ari.utils.

Créer une nouvelle classe Groovy :

  • Faites un clic droit sur le package com.ari.utils.
  • Sélectionnez New > Keyword.
  • Nommez la classe ImageUtils.

Copier-coller ce code dans le fichier Groovy nouvellement créé :

package com.ari.utils

import com.kms.katalon.core.annotation.Keyword
import com.kms.katalon.core.configuration.RunConfiguration
import com.kms.katalon.core.exception.StepFailedException
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.mobile.keyword.internal.MobileDriverFactory
import io.appium.java_client.AppiumDriver
import io.appium.java_client.android.AndroidDriver
import io.appium.java_client.android.AndroidElement
import io.appium.java_client.ios.IOSDriver
import io.appium.java_client.ios.IOSElement
import org.opencv.core.Core
import org.opencv.core.Mat
import org.opencv.core.Point
import org.opencv.imgcodecs.Imgcodecs
import org.opencv.imgproc.Imgproc
import java.util.HashMap
import java.util.List
import java.util.Map

class ImageUtils {

	static {
		System.load("C:\\PAth\\Of\\opencv\\build\\java\\x64\\opencv_java490.dll")
	}


	@Keyword
	def clickImage(String imagePath) {
		try {
			// Prendre une capture d'écran
			String screenshotPath = RunConfiguration.getProjectDir() + "/Screenshot/screenshot.png"
			Mobile.takeScreenshot(screenshotPath)

			// Charger la capture d'écran dans OpenCV
			Mat screenshotImg = Imgcodecs.imread(screenshotPath)
			if (screenshotImg.empty()) {
				throw new StepFailedException("Failed to load screenshot image from path: " + screenshotPath)
			}

			// Charger l'image cible
			Mat targetImg = Imgcodecs.imread(imagePath)
			if (targetImg.empty()) {
				throw new StepFailedException("Failed to load target image from path: " + imagePath)
			}

			println "Images loaded successfully"

			// Méthode de correspondance des modèles pour trouver l'image cible
			Mat result = new Mat()
			Imgproc.matchTemplate(screenshotImg, targetImg, result, Imgproc.TM_CCOEFF_NORMED)
			Core.MinMaxLocResult mmr = Core.minMaxLoc(result)

			// Définir un seuil pour la correspondance
			double threshold = 0.8

			// Parcourir les résultats pour trouver toutes les occurrences au-dessus du seuil
			List<Point> matchLocations = []
			for (int i = 0; i < result.rows(); i++) {
				for (int j = 0; j < result.cols(); j++) {
					if (result.get(i, j)[0] >= threshold) {
						matchLocations.add(new Point(j, i))
					}
				}
			}

			if (matchLocations.isEmpty()) {
				throw new StepFailedException("No match found above the threshold.")
			}

			// Trouver la correspondance avec la coordonnée Y la plus basse (plus haute dans l'image)
			Point topMatch = matchLocations.min { a, b -> a.y <=> b.y }

			int topMatchCenterX = (int) (topMatch.x + targetImg.cols() / 2)
			int topMatchCenterY = (int) (topMatch.y + targetImg.rows() / 2)

			println "Top match found at coordinates: (" + topMatchCenterX + ", " + topMatchCenterY + ")"

			
			// Obtenez le driver Android depuis la MobileDriverFactory
			if (MobileDriverFactory.getDriver() instanceof AndroidDriver) {
				AndroidDriver<AndroidElement> androidDriver = MobileDriverFactory.getDriver() as AndroidDriver<AndroidElement>
				println "Gesture on Android driver."
			} else if (MobileDriverFactory.getDriver() instanceof IOSDriver) {
				IOSDriver<IOSElement> iosDriver = MobileDriverFactory.getDriver() as IOSDriver<IOSElement>
				println "Gesture on iOS driver."
			} else {
				throw new StepFailedException("Unsupported driver type: " + MobileDriverFactory.getDriver().getClass().getName())
			}

			// Cliquer sur l'image
			Map<String, Object> args = new HashMap<>()
			args.put("x", topMatchCenterX)
			args.put("y", topMatchCenterY)
			driver.executeScript("mobile: clickGesture", args)
			println "Click gesture executed at coordinates: (" + topMatchCenterX + ", " + topMatchCenterY + ")"
			
		} catch (Exception e) {
			throw new StepFailedException("Error in clickImage: " + e.message, e)
		}
	}
}

Fonctionnement du Mot-Clé clickImage

  • Chargement de la Bibliothèque OpenCV
  • Prise d’une Capture d’Écran
  • Chargement des Images dans OpenCV
  • Vérification de la Correspondance des Modèles
  • Filtrage des Résultats
  • Exécution du Geste de Clic avec la méthode Gesture

Exemple de test Katalon

Pour utiliser OpenCV et intégrer la reconnaissance d’image le test suivant définit l’approche suivante :

  • Définition des Chemins de l’Application et de l’Image Cible
  • Lancement de l’Application
  • Utilisation du Mot-Clé Personnalisé pour Cliquer sur l’Image
  • Fermeture de l’Application
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint

import com.kms.katalon.core.checkpoint.Checkpoint as Checkpoint
import com.kms.katalon.core.cucumber.keyword.CucumberBuiltinKeywords as CucumberKW
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import internal.GlobalVariable as GlobalVariable

import com.ari.utils.ImageUtils

// Définir le chemin de l'application et de l'image cible
String appPath = 'path/to/your/app.apk' // Utilisez .apk pour Android ou .ipa pour iOS
String imagePath = 'path/to/your/target/image.png'

// Lancer l'application
Mobile.startApplication(appPath, false)

// Utiliser le mot-clé personnalisé pour cliquer sur l'image
CustomKeywords.'com.ari.utils.ImageUtils.clickImage'(imagePath)

// Fermer l'application
Mobile.closeApplication()

Conclusion :

Bien que Katalon Studio ne supporte pas nativement la reconnaissance d’image, il est tout à fait possible de contourner cette limitation et d’améliorer vos tests automatisés en utilisant des outils complémentaires comme OpenCV.

La reconnaissance d’image offre une flexibilité et une robustesse accrues, particulièrement utile lorsque les méthodes traditionnelles échouent.

En adoptant ces techniques, vous pouvez garantir la qualité et la résilience de vos tests, même dans des environnements d’interface utilisateur dynamiques.

Je vous encourage à expérimenter ces méthodes pour enrichir vos processus de test avec Katalon Studio.

Si vous avez des questions ou besoin de conseils pour les mettre en œuvre, n’hésitez pas à me contacter. Je suis là pour vous aider à tirer le meilleur parti de Katalon Studio et à optimiser vos tests automatisés.

À propos de l’auteur: Julien Mer

Julien Mer est un expert chevronné dans le domaine du test logiciel avec plus de 15 ans d’expérience. Capable de couvrir tous les aspects techniques de l’IT, il intervient sur l’infrastructure, les applications mobiles, web, desktop et API, ainsi que sur les pratiques DevOps et CI. Spécialisé dans les audits et la mise en place de stratégies de test ,il optimise les processus de qualité logicielle pour garantir des solutions robustes et performantes.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Agilité

Témoignage: développer un outil MBT pour automatiser les tests

Je tiens à remercier tout particulièrement Fabrice Trollet pour ce témoignage et la société ALL4TEC qui accepte de partager son expérience dans cet article. Bonjour Fabrice, peux-tu rapidement te présenter ? Bonjour, je suis arrivé à ALL4TEC il y a un peu plus de 5 ans. J’ai travaillé auparavant dans diverses

Lire la suite »
Campagnes

Ce que nous apprend la mythologie sur les tests: Sisyphe

L’histoire de Sisyphe Sisyphe est un personnage bien connu de la mythologie grecque. Sysiphe était un éleveur qui possédait un troupeau. Il se faisait régulièrement voler ses bêtes par Autolycos (fils d’Hermès) qui transformait l’apparence des bêtes volées grâce au pouvoir conféré par son père. Sysiphe, pour réussir à faire

Lire la suite »
Automatisation

Livre CFTL: Évolution et état des lieux de l’automatisation

Article écrit à 4 mains avec Bruno Legeard Introduction : L’automatisation partie intégrante du test L’automatisation de l’exécution des tests constitue une large part de l’activité des testeurs comme on peut le constater avec l’enquête du CFTL de 2019 où moins de 10% des organisations n’ont pas de tests automatisés, mais

Lire la suite »