Heim > Web-Frontend > js-Tutorial > Hauptteil

How to JS: Automatisieren Sie Tests mit Selenium

WBOY
Freigeben: 2024-08-29 11:08:44
Original
518 Leute haben es durchsucht

How to JS: Automate testing with Selenium

So automatisieren Sie Browsertests mit Selenium in JavaScript

Automatisierte Browsertests sind für jeden Webentwickler ein Muss, um sicherzustellen, dass seine Anwendungen ordnungsgemäß funktionieren. In diesem Beitrag gehen wir durch die Einrichtung von Selenium mit JavaScript, um eine einfache Browseraufgabe zu automatisieren: Öffnen einer Webseite und Klicken auf eine Schaltfläche.

Voraussetzungen

Um mitzumachen, benötigen Sie:

  • Node.js und npm installiert.
  • Google Chrome und ChromeDriver installiert (oder ein anderer Browser und der entsprechende Treiber).

Schritt 1: Richten Sie Ihr Projekt ein

Erstellen Sie zunächst einen neuen Ordner für Ihr Projekt. Öffnen Sie Ihr Terminal und führen Sie Folgendes aus:

mkdir selenium-test
cd selenium-test
Nach dem Login kopieren

Als nächstes initialisieren Sie ein neues Node.js-Projekt:

npm init -y
Nach dem Login kopieren

Dieser Befehl generiert eine package.json-Datei, die die Abhängigkeiten Ihres Projekts verfolgt.

Schritt 2: Installieren Sie Selenium WebDriver

Wir verwenden npm, um Selenium WebDriver und ChromeDriver zu installieren:

npm install selenium-webdriver chromedriver --save
Nach dem Login kopieren

Diese Pakete stellen die notwendigen Bibliotheken und Tools zur Automatisierung von Chrome mit Selenium bereit.

Schritt 3: Schreiben Sie Ihr Selenium-Skript

Erstellen Sie eine neue Datei mit dem Namen test.js in Ihrem Projektordner. Dieses Skript öffnet eine Webseite, wartet darauf, dass eine Schaltfläche anklickbar wird, und klickt dann darauf.

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();
Nach dem Login kopieren

Schritt 4: Führen Sie das Skript aus

Um Ihr Skript auszuführen, führen Sie Folgendes aus:

node test.js
Nach dem Login kopieren

Chrome wird geöffnet und führt die in Ihrem Skript definierten Aktionen aus. Beobachten Sie die Konsole für Protokolle, die den Fortschritt jedes Schritts anzeigen.

Fehlerbehebung

  • StaleElementReferenceError: Dies passiert, wenn sich das DOM ändert, nachdem ein Element gefunden wurde. Um dies zu vermeiden, platzieren Sie Elemente immer neu, bevor Sie mit ihnen interagieren.
  • Timeouts: Wenn das Laden eines Elements länger dauert, erhöhen Sie das Timeout in drivers.wait().

Abschluss

Sie verfügen jetzt über eine grundlegende Einrichtung für automatisierte Browsertests mit Selenium und JavaScript. Dieses Setup kann problemlos um komplexere Interaktionen, Prüfungen und Validierungsschritte erweitert werden.

Denken Sie daran, Ihre Treiber auf dem neuesten Stand zu halten, damit sie zu Ihren Browserversionen passen, und erwägen Sie die Verwendung eines Headless-Modus für CI/CD-Umgebungen.

Wenn Sie es in Azure hosten möchten, schauen Sie sich meinen anderen Beitrag an: https://dev.to/iamrule/how-to-azure-host-a-selenium-javascript-node-application-in-azure-and -send-email-notifications-on-failures-2aio

Viel Spaß beim Testen!

Das obige ist der detaillierte Inhalt vonHow to JS: Automatisieren Sie Tests mit Selenium. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage