Автоматизация тестирования с использованием mcp-selenium

March 31, 2025 · View on GitHub

Этот проект демонстрирует создание автоматизированных тестов с использованием mcp-selenium в качестве драйвера для управления браузером.

Что такое mcp-selenium?

mcp-selenium - это реализация Model Context Protocol (MCP) для Selenium WebDriver, которая позволяет управлять браузером через API, предоставляемый Claude, без необходимости установки и настройки драйверов на локальной машине. Разработана Angie Jones.

Преимущества использования mcp-selenium:

  • Простота интеграции: Легко интегрируется с Claude и Cursor
  • Кроссплатформенность: Работает на разных платформах без установки драйверов
  • Удобство использования: Простой API для работы с браузером
  • Надежность: Стабильная работа без флакающих тестов
  • Расширяемость: Легко расширяется новыми функциями

Архитектура проекта

Проект разработан с соблюдением принципов SOLID и современных паттернов проектирования для автоматизации тестирования:

  • Page Object Pattern: Каждая страница представлена отдельным классом с методами для взаимодействия с ней.
  • Fluent Interface: Цепочки вызовов методов для улучшения читаемости кода.
  • Factory Pattern: Для создания и настройки WebDriver.
  • Singleton Pattern: Для обеспечения единой точки доступа к экземпляру WebDriver.
  • Adapter Pattern: Для интеграции mcp-selenium с архитектурой проекта.

Структура проекта

src/
├── main/
│   ├── java/
│   │   └── io/
│   │       └── egorovma/
│   │           ├── framework/
│   │           │   ├── driver/
│   │           │   │   ├── BrowserType.java
│   │           │   │   ├── WebDriverFactory.java
│   │           │   │   └── WebDriverManager.java
│   │           │   ├── mcpselenium/
│   │           │   │   ├── McpSeleniumDriver.java
│   │           │   │   ├── McpSeleniumHelper.java
│   │           │   │   └── McpSeleniumImplementation.java
│   │           │   ├── pages/
│   │           │   │   └── BasePage.java
│   │           │   └── utils/
│   │           │       └── WaitUtils.java
│   │           └── pages/
│   │               ├── DuckDuckGoSearchPage.java
│   │               └── VtbHomePage.java
│   └── resources/
│       └── log4j2.xml
└── test/
    └── java/
        └── io/
            └── egorovma/
                └── tests/
                    ├── BaseTest.java
                    ├── McpSeleniumDirectTest.java
                    ├── McpSeleniumRealTest.java
                    └── VtbPhoneNumberTest.java

Технологии

В проекте используются следующие технологии:

  • Java 21: Последняя версия Java с новыми возможностями
  • Gradle: Система сборки проекта
  • JUnit 5: Фреймворк для тестирования
  • Allure: Для генерации отчетов о тестировании
  • AssertJ: Для удобных и выразительных проверок
  • Log4j: Для логирования
  • Selenium: Базовые классы для работы с веб-элементами
  • mcp-selenium: Драйвер для управления браузером через MCP

Подключение и использование mcp-selenium

1. Установка mcp-selenium

Существует несколько способов установки mcp-selenium:

1.1. Установка через NPM глобально:

npm install -g @angiejones/mcp-selenium

1.2. Установка через Smithery (для Claude Desktop):

npx -y @smithery/cli install @angiejones/mcp-selenium --client claude

2. Настройка конфигурации MCP

Для использования mcp-selenium в проекте необходимо добавить соответствующий MCP-сервер в конфигурационный файл .cursor/mcp.json:

{
  "mcpServers": {
    "selenium": {
      "command": "npx",
      "args": [
        "-y",
        "@angiejones/mcp-selenium"
      ]
    }
  }
}

3. Запуск mcp-selenium

Если установка была выполнена глобально, можно запустить сервер mcp-selenium командой:

mcp-selenium

4. Доступные функции mcp-selenium

mcp-selenium предоставляет следующие основные функции:

ФункцияОписаниеПараметры
mcp_mcp_selenium_start_browserЗапуск браузераbrowser (chrome/firefox), options (headless, arguments)
mcp_mcp_selenium_navigateПереход по URLurl
mcp_mcp_selenium_find_elementПоиск элементаby, value, timeout
mcp_mcp_selenium_click_elementКлик по элементуby, value, timeout
mcp_mcp_selenium_send_keysВвод текста в элементby, value, text, timeout
mcp_mcp_selenium_get_element_textПолучение текста элементаby, value, timeout
mcp_mcp_selenium_hoverНаведение курсора на элементby, value, timeout
mcp_mcp_selenium_drag_and_dropПеретаскивание элементаby, value, targetBy, targetValue, timeout
mcp_mcp_selenium_double_clickДвойной клик по элементуby, value, timeout
mcp_mcp_selenium_right_clickПравый клик по элементуby, value, timeout
mcp_mcp_selenium_press_keyНажатие клавишиkey
mcp_mcp_selenium_upload_fileЗагрузка файлаby, value, filePath, timeout
mcp_mcp_selenium_take_screenshotСоздание скриншотаoutputPath
mcp_mcp_selenium_close_sessionЗакрытие сессии браузера-

5. Типы локаторов (параметр by)

mcp-selenium поддерживает следующие типы локаторов для поиска элементов:

  • id: поиск по идентификатору
  • css: поиск по CSS-селектору
  • xpath: поиск по XPath
  • name: поиск по атрибуту name
  • tag: поиск по имени тега
  • class: поиск по имени класса

Примеры использования mcp-selenium

1. Прямое использование через инструменты Claude

// 1. Запуск браузера Chrome
mcp_mcp_selenium_start_browser(
    browser: "chrome",
    options: {
        headless: false
    }
)

// 2. Переход по URL
mcp_mcp_selenium_navigate(
    url: "https://duckduckgo.com"
)

// 3. Ввод текста в поле поиска
mcp_mcp_selenium_send_keys(
    by: "id",
    value: "search_form_input_homepage",
    text: "втб банк"
)

// 4. Клик по кнопке поиска
mcp_mcp_selenium_click_element(
    by: "id",
    value: "search_button_homepage"
)

// 5. Получение текста элемента
mcp_mcp_selenium_get_element_text(
    by: "xpath",
    value: "//div[@class='result__title']"
)

// 6. Закрытие сессии браузера
mcp_mcp_selenium_close_session()

2. Использование через абстракцию McpSeleniumDriver

В нашем проекте мы разработали высокоуровневый класс McpSeleniumDriver, который предоставляет удобный API для работы с mcp-selenium:

// Запуск браузера Chrome
McpSeleniumDriver.startBrowser(BrowserType.CHROME);

// Переход по URL
McpSeleniumDriver.navigate("https://duckduckgo.com");

// Ввод текста в поле поиска с использованием Selenium локатора
McpSeleniumDriver.sendKeys(By.id("search_form_input_homepage"), "втб банк");

// Клик по кнопке поиска
McpSeleniumDriver.clickElement(By.id("search_button_homepage"));

// Получение текста элемента
String text = McpSeleniumDriver.getElementText(By.xpath("//div[@class='result__title']"));

// Закрытие браузера
McpSeleniumDriver.closeSession();

3. Практический пример: тест для проверки номера телефона на сайте ВТБ

Вот как выглядит полный тест для проверки номера телефона для бесплатных звонков на сайте ВТБ:

@Test
@DisplayName("Проверка номера телефона для бесплатных звонков на сайте ВТБ")
@Description("Тест открывает DuckDuckGo, ищет сайт ВТБ, переходит в раздел 'О банке', затем в 'Контакты' " +
        "и проверяет, что номер телефона для бесплатных звонков по России соответствует ожидаемому")
public void checkVtbFreeCallPhoneNumberTest() {
    log.info("Запуск теста по проверке номера телефона для бесплатных звонков на сайте ВТБ");
    
    // Используем Page Objects для более чистого кода
    DuckDuckGoSearchPage duckDuckGoSearchPage = new DuckDuckGoSearchPage();
    VtbHomePage vtbHomePage = new VtbHomePage();
    
    // 1. Открываем DuckDuckGo
    duckDuckGoSearchPage.open();
    
    // 2. Ищем "втб банк"
    duckDuckGoSearchPage.search("втб банк");
    
    // 3. Проверяем, что в результатах есть ссылка на vtb.ru
    Assertions.assertThat(duckDuckGoSearchPage.hasSearchResultWithUrl("https://www.vtb.ru"))
            .as("В результатах поиска должна быть ссылка на vtb.ru")
            .isTrue();
    
    // 4. Кликаем по ссылке на vtb.ru
    duckDuckGoSearchPage.clickSearchResultWithUrl("https://www.vtb.ru");
    
    // 5. Переходим в раздел "О банке"
    vtbHomePage.goToAboutBankSection();
    
    // 6. Переходим в раздел "Контакты"
    vtbHomePage.goToContactsSection();
    
    // 7. Получаем и проверяем номер телефона для бесплатных звонков
    String phoneNumber = vtbHomePage.getFreeCallPhoneNumber();
    
    Assertions.assertThat(phoneNumber)
            .as("Номер телефона для бесплатных звонков по России должен быть 8 (800) 100-24-24")
            .contains("8 (800) 100-24-24");
    
    log.info("Тест успешно завершен. Номер телефона для бесплатных звонков: {}", phoneNumber);
}

Запуск тестов

Для запуска тестов используйте следующую команду Gradle:

./gradlew test

Для запуска тестов с генерацией отчета Allure:

./gradlew test
./gradlew allureReport
./gradlew allureServe

Расширение проекта

Для добавления новых тестов или страниц:

  1. Создайте новый класс страницы в пакете io.egorovma.pages, наследующийся от BasePage
  2. Определите локаторы элементов страницы
  3. Реализуйте методы для взаимодействия со страницей
  4. Создайте новый тестовый класс в пакете io.egorovma.tests, наследующийся от BaseTest
  5. Реализуйте тестовые методы, использующие созданные страницы

Автор

Максим Егоров