Cucumber JavaScript
Tests utilisant JavaScript, Axe DevTools et Cucumber
Prérequis
Pour tester votre contenu à l'aide de Cucumber avec Axe DevTools, vous devez d'abord l'importer et l'initialiser dans votre projet.
Si vous n'avez pas encore effectué cette étape, veuillez sélectionner l'une des options suivantes pour configurer avec Cucumber :
Cucumber avec Axe DevTools
Une fois que vous avez choisi une implémentation pour travailler avec Cucumber, vous pouvez maintenant créer une étape réutilisable qui peut être utilisée dans chacune de vos fonctionnalités pour tester le contenu de votre page ou spécifiquement un composant.
Cette documentation montre l'utilisation avec l'intégration WebDriverJS, mais cela fonctionnera de la même manière avec WebdriverIO et Puppeteer.
Créer une étape de balayage de page
Pour créer une étape Cucumber qui analyse toute la page pour détecter des problèmes d'accessibilité, créez une fonction Ensuite 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 analyser().
Les résultats de l'analyse peuvent ensuite être utilisés avec le package de rapport Axe DevTools et utilisés pour toutes les fonctionnalités de reporting. Voir Générer des rapports à partir des résultats JSON d'Axe DevTools pour plus d'informations sur le reporting avec Axe DevTools.
L'exemple suivant montre l'utilisation d'une fonction Ensuite :
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 Ensuite 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éer une étape de balayage de composant
Pour créer une étape Cucumber qui analyse seulement une partie de la page ou un composant pour des problèmes d'accessibilité, créez une fonction Ensuite qui prend une chaîne pour le nom des composants et une autre chaîne pour le sélecteur CSS. Ensuite, dans l'étape, créez simplement une nouvelle instance du pilote Axe DevTools de votre choix, puis appelez analyser().
Les résultats de l'analyse peuvent ensuite être utilisés avec le package de rapport Axe DevTools et utilisés pour toutes les fonctionnalités de reporting. Voir Générer des rapports à partir des résultats JSON d'Axe DevTools pour plus d'informations sur le reporting avec 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 réussi à terminer une analyse d'accessibilité, vous êtes prêt à passer à des sujets de balayage plus avancés tels que génération de rapports et utilisation de l'objet résultats.
Dépannage
Si vous avez des difficultés à obtenir les résultats de l'analyse, contactez directement votre représentant Deque, joignez-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 Axe DevTools