Как автоматизировать тестирование браузера с помощью Selenium в JavaScript

Автоматическое тестирование браузера является обязательным для любого веб-разработчика, чтобы убедиться, что его приложения работают правильно. В этом посте мы рассмотрим настройку Selenium с использованием JavaScript для автоматизации простой задачи браузера: открытия веб-страницы и нажатия кнопки.

Предварительные условия

Чтобы следовать инструкциям, вам понадобится:

• Node.js и npm установлены.
• Google Chrome и ChromeDriver установлены (или другой браузер и соответствующий драйвер).

Шаг 1. Настройте свой проект

Сначала создайте новую папку для своего проекта. Откройте терминал и запустите:

mkdir selenium-test
cd selenium-test

Далее инициализируйте новый проект Node.js:

npm init -y

Эта команда создает файл package.json, в котором отслеживаются зависимости вашего проекта.

Шаг 2. Установите Selenium WebDriver.

Мы будем использовать npm для установки Selenium WebDriver и ChromeDriver:

npm install selenium-webdriver chromedriver --save

Эти пакеты предоставляют необходимые библиотеки и инструменты для автоматизации Chrome с помощью Selenium.

Шаг 3. Напишите свой Selenium-скрипт

Создайте новый файл с именем test.js в папке вашего проекта. Этот скрипт откроет веб-страницу, подождет, пока кнопка станет доступной для нажатия, а затем щелкните ее.

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

Шаг 4. Запустите сценарий

Чтобы выполнить скрипт, выполните:

node test.js

Chrome откроется и выполнит действия, определенные в вашем скрипте. Следите за журналами консоли, показывающими ход выполнения каждого шага.

Поиск неисправностей

• StaleElementReferenceError: это происходит, когда DOM изменяется после обнаружения элемента. Чтобы избежать этого, всегда перемещайте элементы непосредственно перед взаимодействием с ними.
• Таймауты: если загрузка элемента занимает больше времени, увеличьте таймаут в driver.wait().

Заключение

Теперь у вас есть базовые настройки для автоматического тестирования браузера с использованием Selenium и JavaScript. Эту настройку можно легко расширить, включив в нее более сложные взаимодействия, проверки и этапы проверки.

Не забывайте обновлять драйверы в соответствии с версией вашего браузера и рассмотрите возможность использования автономного режима для сред CI/CD.

Если вы хотите разместить его в Azure, прочтите другой мой пост: https://dev.to/iamrule/how-to-azure-host-a-selenium-javascript-node-application-in-azure-and -send-email-notifications-on-failures-2aio

Удачного тестирования!