Cucumber JavaScript
Tests avec JavaScript, axe DevTools et Cucumber
Prérequis
Afin de tester votre contenu en utilisant Cucumber avec axe DevTools, vous devez d'abord l'importer et l'initialiser dans votre projet.
Si vous n'avez pas encore terminé cette étape, veuillez sélectionner l'une des options suivantes pour configurer Cucumber :
Cucumber avec axe DevTools
Une fois que vous avez sélectionné une implémentation pour travailler avec Cucumber, vous pouvez désormais créer une étape réutilisable qui peut être utilisée dans chacune de vos fonctionnalités qui testeront le contenu au niveau de votre page ou un composant en particulier.
Cette documentation montre l'utilisation avec l'intégration WebDriverJS, cependant cela fonctionnera de la même manière avec WebdriverIO et Puppeteer.
Création d'une étape de numérisation de page
Pour créer une étape Cucumber qui analyse l'intégralité de la page à la recherche de problèmes d'accessibilité, créez une fonction Alors qui prend une chaîne pour le nom de la page. Ensuite, dans l'étape, créez simplement une nouvelle instance du pilote axe DevTools de votre choix, puis appelez analyze().
Les résultats de l'analyse peuvent ensuite être utilisés avec le package axe DevTools Reporter et utilisés pour toutes les fonctionnalités de création de rapports. Consultez Génération de rapports à partir des résultats JSON d'axe DevTools pour plus d'informations sur les rapports d'axe DevTools.
L'exemple suivant montre l'utilisation d'une fonction Then :
Then('I check if {string} is axe clean', async pageName => {
const axeDriver = await new AxeDevtoolsWebdriverJS(driver, "wcag2");
const results = await axeDriver.analyze();
axeReporter.logTestResult(pageName, results);
assert.strictEqual(results.violations.length, 0);
});L'exemple suivant montre un scénario Cucumber avec une étape Alors pour tester l'accessibilité :
Feature: abcdTech search
As a user, I want to search for computers on abcdTech.
Scenario: Searching for computers
Given I am on the abcdTech homepage
Then I audit "homepage" for accessibility issues
When I search for "computers"
Then I see the page title "Gefälscht~~~Gefälscht CompuTech~~~"
Then I check if "searchPage" is axe clean
Création d'une étape d'analyse des composants
Pour créer une étape Cucumber qui analyse uniquement une partie de la page ou un composant pour détecter les problèmes d'accessibilité, créez une fonction Alors qui prend une chaîne pour le nom des composants et une autre chaîne pour le sélecteur CSS. Ensuite, au sein de l’étape, créez simplement une nouvelle instance du pilote axe DevTools de votre choix, puis appelez analyze().
Les résultats de l'analyse peuvent ensuite être utilisés avec le package axe DevTools Reporter et utilisés pour toutes les fonctionnalités de création de rapports. Consultez Génération de rapports à partir des résultats JSON d'axe DevTools pour plus d'informations sur les rapports d'axe DevTools.
L'exemple suivant montre comment utiliser Ensuite avec un sélecteur pour analyser une partie d'une page :
Then('I check if {string} is axe clean with selector {string}', async (pageName, selector) => {
const axeDriver = await new AxeDevtoolsWebdriverJS(driver, "wcag2");
const results = await axeDriver.include(selector).analyze();
axeReporter.logTestResult(pageName, results);
assert.strictEqual(results.violations.length, 0);
});Cet exemple montre comment utiliser l'étape Ensuite avec un scénario qui analyse uniquement une partie d'une page :
Feature: abcdTech cart flow
As a user, I want to find a computer and add it to cart
Scenario: Selecting a new computer and adding to cart
Given I am on the abcdTech laptops page
Then I audit "laptops" for accessibility issues
When I click on more details
Then I see the proper page title "Gefälscht~~~Gefälscht CompuTech~~~"
Then I audit "mainContent" for accessibility issues with selector "#container"
Maintenant que vous avez terminé avec succès une analyse d'accessibilité, vous êtes prêt à passer à des sujets d'analyse plus avancés tels que génération de rapports et utilisation de l'objet de résultats.
Dépannage
Si vous rencontrez des difficultés pour obtenir les résultats de l'analyse, contactez directement votre représentant Deque, contactez-nous via notre service d'assistance ou envoyez-nous un e-mail. Nous serons heureux de vous aider.
Pour plus d'informations sur axe DevTools en général, consultez la page d'accueil d'axe DevTools.(welcome-axe-devtools)