Cara JS: Automatikkan ujian dengan Selenium

Bagaimana untuk mengautomasikan Ujian Pelayar dengan Selenium dalam JavaScript

Ujian penyemak imbas automatik adalah satu kemestian bagi mana-mana pembangun web untuk memastikan aplikasi mereka berfungsi dengan betul. Dalam siaran ini, kami akan meneruskan penyediaan Selenium dengan JavaScript untuk mengautomasikan tugasan penyemak imbas yang mudah: membuka halaman web dan mengklik butang.

Prasyarat

Untuk mengikuti, anda memerlukan:

• Node.js dan npm dipasang.
• Google Chrome dan ChromeDriver dipasang (atau penyemak imbas lain dan pemacunya masing-masing).

Langkah 1: Sediakan Projek Anda

Pertama, buat folder baharu untuk projek anda. Buka terminal anda dan jalankan:

mkdir selenium-test
cd selenium-test

Seterusnya, mulakan projek Node.js baharu:

npm init -y

Arahan ini menjana fail package.json yang menjejaki kebergantungan projek anda.

Langkah 2: Pasang Selenium WebDriver

Kami akan menggunakan npm untuk memasang Selenium WebDriver dan ChromeDriver:

npm install selenium-webdriver chromedriver --save

Pakej ini menyediakan perpustakaan dan alatan yang diperlukan untuk mengautomasikan Chrome dengan Selenium.

Langkah 3: Tulis Skrip Selenium Anda

Buat fail baharu bernama test.js dalam folder projek anda. Skrip ini akan membuka halaman web, tunggu sehingga butang boleh diklik, kemudian klik padanya.

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();

Langkah 4: Jalankan Skrip

Untuk melaksanakan skrip anda, jalankan:

node test.js

Chrome akan membuka dan melaksanakan tindakan yang ditakrifkan dalam skrip anda. Tonton konsol untuk log yang menunjukkan kemajuan setiap langkah.

Menyelesaikan masalah

• StaleElementReferenceError: Ini berlaku apabila DOM berubah selepas mencari elemen. Untuk mengelakkan perkara ini, sentiasa cari semula elemen sebelum berinteraksi dengannya.
• Tamat masa: Jika elemen mengambil masa yang lebih lama untuk dimuatkan, tambahkan tamat masa dalam driver.wait().

Kesimpulan

Anda kini mempunyai persediaan asas untuk ujian penyemak imbas automatik menggunakan Selenium dan JavaScript. Persediaan ini boleh dikembangkan dengan mudah untuk memasukkan interaksi, semakan dan langkah pengesahan yang lebih kompleks.

Ingat untuk memastikan pemacu anda dikemas kini agar sepadan dengan versi penyemak imbas anda dan pertimbangkan untuk menggunakan mod tanpa kepala untuk persekitaran CI/CD.

Jika anda ingin mengehoskannya di Azure, lihat siaran saya yang lain: https://dev.to/iamrule/how-to-azure-host-a-selenium-javascript-node-application-in-azure-and -hantar-e-mel-pemberitahuan-tentang-kegagalan-2aio

Selamat menguji!

Atas ialah kandungan terperinci Cara JS: Automatikkan ujian dengan Selenium. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!