На что способен Selenium в паре с JavaScript?

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

Преимущества совместного использования Selenium и JavaScript

• Кросс-браузерность. Позволяет беспроблемно запускать скрипты автоматизации в разных браузерах. 
• Интеграция с фреймворками для тестирования JavaScript. Обеспечивает легкую интеграцию с такими фреймворками, как Mocha и Jest, для эффективного управления тестированием. 
• Мощная поддержка сообщества. Активно действующие сообщества Selenium и JavaScript предоставляют доступ к обширной документации, обучающим руководствам и ресурсам.

Установка Selenium WebDriver в JavaScript

Чтобы начать работу с Selenium WebDriver в JavaScript, устанавливаем пакет Selenium WebDriver с помощью npm. После этого импортируем необходимые компоненты и создаем экземпляр WebDriver для управления веб-браузерами. 

npm install selenium-webdriver

Импортируем необходимые компоненты: 

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

Создаем экземпляр WebDriver: 

const driver = new Builder().forBrowser('chrome').build();

Автоматизация браузера с помощью Selenium 

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

const { Builder } = require('selenium-webdriver');
const driver = new Builder().forBrowser('chrome').build();

async function openWebsite(url) {
  try {
    await driver.get(url);
    console.log('Website opened successfully!');
  } catch (error) {
    console.error('Failed to open website:', error);
  } finally {
    await driver.quit();
  }
}

openWebsite('https://www.example.com');

Пример автоматизации действий браузера: 

async function performBrowserActions() {
  try {
    await driver.get('https://www.example.com');
    await driver.findElement(By.id('myButton')).click();
    await driver.findElement(By.name('username')).sendKeys('John Doe');
  } catch (error) {
    console.error('Failed to perform browser actions:', error);
  } finally {
    await driver.quit();
  }
}

• С помощью driver.get(url) открываем определенный сайт. 
• Посредством различных локаторов (By.id, By.name и т.д.) находим и взаимодействуем с веб-элементами. 
• Выполняем такие действия, как нажатие кнопок и заполнение полей формы. 

Примеры фрагментов кода 

1. Переход по URL-адресу: 

driver.get('https://www.example.com');

2. Нажатие кнопки: 

const buttonElement = await driver.findElement(By.id('buttonId'));
await buttonElement.click();
                          -OR-
driver.findElement(By.id('buttonId')).click();

3. Ввод значения: 

driver.findElement(By.name('inputName')).sendKeys('Text to input');

4. Очистка поля ввода: 

const inputElement = await driver.findElement(By.id('inputId'));
await inputElement.clear();

5. Выбор варианта из выпадающего списка: 

const dropdownElement = await driver.findElement(By.id('dropdownId'));
await dropdownElement.click();
const optionElement = await dropdownElement.findElement(By.xpath('//option[text()="Option Value"]'));
await optionElement.click();

6. Извлечение текста из элемента: 

const textElement = await driver.findElement(By.className('textClass'));
const extractedText = await textElement.getText();

7. Создание скриншота: 

const textElement = await driver.findElement(By.className('textClass'));
const extractedText = await textElement.getText();

8. Обработка предупреждающих уведомлений: 

const alert = await driver.switchTo().alert();
const alertText = await alert.getText();
await alert.accept(); // or alert.dismiss() to dismiss the alert

9. Максимальное развертывание окна браузера: 

await driver.manage().window().maximize();

10. Прокрутка к определенному элементу: 

const element = await driver.findElement(By.id('elementId'));
await driver.executeScript('arguments[0].scrollIntoView()', element);

11. Переключение на элемент iframe: 

const iframeElement = await driver.findElement(By.tagName('iframe'));
await driver.switchTo().frame(iframeElement);

12. Выполнение кода JavaScript на странице: 

await driver.executeScript('alert("Hello, Selenium!");');

13. Управление несколькими окнами или вкладками: 

const handles = await driver.getAllWindowHandles();
await driver.switchTo().window(handles[1]); // Переключение на второе окно/вкладку 

14. Ожидание отображения элемента: 

const element = await driver.wait(until.elementLocated(By.id('elementId')));

15. Получение текущего URL-адреса: 

const currentUrl = await driver.getCurrentUrl();
console.log(currentUrl);

16. Проверка видимости элемента: 

const isVisible = await driver.findElement(By.id('elementId')).isDisplayed();
console.log(isVisible);

17. Обработка флажков (англ. checkbox): 

const checkboxElement = await driver.findElement(By.id('checkboxId'));
await checkboxElement.click(); // Переключение состояния флажка

18. Загрузка файла: 

const filePath = '/path/to/file.txt';
const fileInput = await driver.findElement(By.id('fileInputId'));
await fileInput.sendKeys(filePath);

Распространенные случаи применения 

• Автоматическое заполнение формы для оптимизации ввода повторяющихся данных. 
• Веб-скрейпинг и извлечение данных для сбора ценной информации. 
• Регрессионное тестирование. Проводится с целью подтвердить, что новые изменения не нарушают существующую функциональность.
• Кросс-браузерное тестирование для проверки корректного поведения в различных браузерах.
• Мониторинг веб-приложений для выявления проблем производительности и ошибок. 

Заключение 

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

Читайте также:

• Три способа захвата скриншотов с помощью Selenium WebDriver
• Нерассказанная история: исключение Stale Element Reference в Selenium
• Веб-скрапинг с помощью Node.js — Часть 2

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Amjad Rehman A: Exploring the Power of Selenium with javascript