13,8 тыс подписчиков

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

5 минут

30 прочтений

12 июля 2023

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 и т.д.) находим и взаимодействуем с веб-элементами.
Выполняем такие действия, как нажатие кнопок и заполнение полей формы.

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

Переход по 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 позволяет разработчикам оптимизировать задачи, повышать эффективность и создавать качественные веб-приложения.