Comment automatiser les tests du navigateur avec Selenium en JavaScript

Les tests automatisés du navigateur sont indispensables pour tout développeur Web afin de garantir le bon fonctionnement de ses applications. Dans cet article, nous expliquerons la configuration de Selenium avec JavaScript pour automatiser une tâche simple du navigateur : ouvrir une page Web et cliquer sur un bouton.

Conditions préalables

Pour suivre, vous aurez besoin de :

• Node.js et npm installés.
• Google Chrome et ChromeDriver installés (ou un autre navigateur et son pilote respectif).

Étape 1 : Configurez votre projet

Tout d'abord, créez un nouveau dossier pour votre projet. Ouvrez votre terminal et exécutez :

mkdir selenium-test
cd selenium-test

Ensuite, initialisez un nouveau projet Node.js :

npm init -y

Cette commande génère un fichier package.json qui assure le suivi des dépendances de votre projet.

Étape 2 : Installer Selenium WebDriver

Nous utiliserons npm pour installer Selenium WebDriver et ChromeDriver :

npm install selenium-webdriver chromedriver --save

Ces packages fournissent les bibliothèques et les outils nécessaires pour automatiser Chrome avec Selenium.

Étape 3 : écrivez votre script Selenium

Créez un nouveau fichier nommé test.js dans votre dossier de projet. Ce script ouvrira une page Web, attendra qu'un bouton devienne cliquable, puis cliquera dessus.

const { Builder, By, until } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

// Helper function to pause the script
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTest() {
  // Configure Chrome to suppress unwanted prompts
  let options = new chrome.Options();
  options.addArguments('--no-default-browser-check', '--no-first-run', '--disable-default-apps', '--disable-infobars');

  let driver = await new Builder()
    .forBrowser('chrome')
    .setChromeOptions(options)
    .build();

  try {
    // Open the target webpage
    await driver.get('https://example.com'); // Change this URL to the site you want to test

    // Wait for an element to load
    await driver.wait(until.elementLocated(By.className('sample-class')), 10000);
    console.log('Found element with class "sample-class".');

    // Generic wait for 6 seconds to handle any dynamic content
    await sleep(6000);

    // Wait for the button to be clickable
    await driver.wait(until.elementLocated(By.id('sample-button')), 10000);

    // Re-locate the button to ensure it’s still in the DOM
    let button = await driver.findElement(By.id('sample-button'));
    console.log('Button located:', button);

    // Click the button
    await button.click();
    console.log('Button clicked successfully.');

    // Wait for the next page or action to load
    await driver.wait(until.urlContains('new-page'), 10000);
    console.log('Navigation to new page was successful.');

  } catch (error) {
    console.error('Error during the test:', error);
  } finally {
    // Always close the browser
    await driver.quit();
  }
}

runTest();

Étape 4 : Exécutez le script

Pour exécuter votre script, exécutez :

node test.js

Chrome s'ouvrira et effectuera les actions définies dans votre script. Surveillez la console pour consulter les journaux indiquant la progression de chaque étape.

Dépannage

• StaleElementReferenceError : cela se produit lorsque le DOM change après avoir trouvé un élément. Pour éviter cela, déplacez toujours les éléments juste avant d'interagir avec eux.
• Timeouts : si un élément prend plus de temps à charger, augmentez le délai d'attente dans driver.wait().

Conclusion

Vous disposez désormais d'une configuration de base pour les tests automatisés du navigateur à l'aide de Selenium et de JavaScript. Cette configuration peut être facilement étendue pour inclure des interactions, des contrôles et des étapes de validation plus complexes.

N'oubliez pas de maintenir vos pilotes à jour pour qu'ils correspondent aux versions de votre navigateur et envisagez d'utiliser un mode sans tête pour les environnements CI/CD.

Si vous souhaitez l'héberger dans Azure, consultez mon autre article : https://dev.to/iamrule/how-to-azure-host-a-selenium-javascript-node-application-in-azure-and -envoyer-des-notifications-par-e-mail-sur-les-échecs-2aio

Bon test !