🏠 Домашнее задание 2: Firefox + скриншот секции

Шаг 0: Подготовка окружения

Создать виртуальное окружение (PowerShell)

# Перейдите в папку проекта
cd C:\Users\username\projects\autoqa-homework2

# Создать venv
python -m venv venv

# Активировать
.\venv\Scripts\Activate.ps1

# Проверить
python --version

Установить зависимости

# Selenium (основная библиотека)
pip install selenium

# webdriver-manager — для управления GeckoDriver (Firefox)
pip install webdriver-manager

# Проверить
pip list | Select-String "selenium"

Установить Firefox

Скачайте Firefox с официального сайта, если он ещё не установлен. GeckoDriver будет автоматически скачан через webdriver-manager.

Инициализировать git-репозиторий

git init
git add .gitignore
git commit -m "init: autoqa homework 2"

Создайте .gitignore:

# .gitignore
venv/
__pycache__/
*.pyc
*.png
*.jpeg

Шаг 1: Структура проекта

autoqa-homework2/
├── venv/
├── .gitignore
├── conftest.py           # фикстура Firefox
└── test_payment.py       # тест ДЗ 2

Шаг 2: Пошаговое решение

Стратегия

Задание требует:

1. Открыть Firefox (не Chrome!) — нужен GeckoDriver
2. Найти раздел «Способы оплаты» — кликнуть или проскроллить
3. Сделать скриншот секции (элемента, не всей страницы)

conftest.py — фикстура Firefox

# conftest.py
import pytest
from selenium import webdriver
from selenium.webdriver.firefox.service import Service as FirefoxService
from webdriver_manager.firefox import GeckoDriverManager

@pytest.fixture
def driver():
    """Фикстура: запускает Firefox и закрывает его после теста."""
    driver = webdriver.Firefox(
        service=FirefoxService(GeckoDriverManager().install())
    )
    driver.maximize_window()
    yield driver
    driver.quit()

test_payment.py — тест ДЗ 2

# test_payment.py
from time import sleep
from selenium.webdriver.common.by import By

def test_payment_methods_screenshot(driver):
    """
    ДЗ 2: открыть itcareerhub.de/ru в Firefox,
    перейти в раздел 'Способы оплаты',
    сделать скриншот секции.
    """
    # Шаг 1: открыть страницу
    driver.get("https://itcareerhub.de/ru")
    sleep(3)  # дать время JS загрузить страницу

    # Шаг 2: найти ссылку/кнопку "Способы оплаты" и перейти
    # Вариант A: по тексту ссылки
    try:
        payment_link = driver.find_element(By.LINK_TEXT, "Способы оплаты")
        payment_link.click()
        sleep(2)
    except Exception:
        # Вариант Б: проскроллить к секции по ID или тексту заголовка
        payment_section = driver.find_element(
            By.XPATH, "//*[contains(text(), 'Способы оплаты')]"
        )
        driver.execute_script("arguments[0].scrollIntoView(true);", payment_section)
        sleep(2)

    # Шаг 3: найти секцию "Способы оплаты" и сделать её скриншот
    # Ищем родительский блок секции
    payment_section = driver.find_element(
        By.XPATH, "//*[contains(text(), 'Способы оплаты')]/ancestor::section[1]"
    )
    payment_section.screenshot("payment_methods_section.png")
    print("Скриншот секции сохранён: payment_methods_section.png")

Альтернативный вариант: скриншот всего экрана

Если найти конкретную секцию не удаётся, допустимо сделать скриншот всей страницы после перехода/прокрутки:

# test_payment_fallback.py
from time import sleep
from selenium.webdriver.common.by import By

def test_payment_screenshot_fallback(driver):
    driver.get("https://itcareerhub.de/ru")
    sleep(3)

    # Прокрутить вниз к секции способов оплаты
    driver.execute_script("window.scrollTo(0, document.body.scrollHeight * 0.6);")
    sleep(2)

    # Скриншот всей видимой области
    driver.save_screenshot("./payment_methods_page.png")
    print("Скриншот страницы сохранён")

Шаг 3: Запуск в PowerShell

# Убедитесь, что venv активирован
.\venv\Scripts\Activate.ps1

# Запустить тест
pytest test_payment.py -v

# Ожидаемый вывод:
# test_payment.py::test_payment_methods_screenshot PASSED
# Файл payment_methods_section.png появится в папке проекта

Шаг 4: Отладка в VS Code

Установка расширения Python

Откройте VS Code, установите расширение Python (ms-python.python).

Выбор интерпретатора

Нажмите Ctrl+Shift+P → «Python: Select Interpreter» → выберите ./venv/Scripts/python.exe.

launch.json для запуска через F5

Создайте файл .vscode/launch.json:

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Pytest: ДЗ 2",
      "type": "debugpy",
      "request": "launch",
      "module": "pytest",
      "args": ["test_payment.py", "-v"],
      "console": "integratedTerminal",
      "cwd": "${workspaceFolder}"
    }
  ]
}

Точки останова (breakpoints)

1. Откройте test_payment.py
2. Кликните на поле слева от номера строки (появится красная точка)
3. Нажмите F5
4. Выполнение остановится на точке останова — вы увидите значения переменных в панели Variables
5. Нажмите F10 (Step Over) для пошагового выполнения
6. Нажмите F5 для продолжения до следующей точки или конца

Связь с теорией и примерами

• Теория: WebDriver, GeckoDriver — понять, почему для Firefox нужен GeckoDriver
• Справочник: Firefox через webdriver-manager — синтаксис webdriver.Firefox(service=...)
• Примеры: click() — клик по ссылке find_element(By.LINK_TEXT, ...)
• Ошибки: нет ожиданий — почему нужен sleep(3) или WebDriverWait
• Старый vs Новый — почему executable_path= не используем

Шаг 5: Публикация на GitHub

# Добавить файлы в коммит (без venv и скриншотов)
git add conftest.py test_payment.py .gitignore

git commit -m "feat: ДЗ 2 — Firefox, скриншот секции Способы оплаты"

# Создать репозиторий на GitHub и запушить
git remote add origin https://github.com/username/autoqa-homework2.git
git push -u origin main

Ссылку на репозиторий вставьте в форму LMS.

Чек-лист перед сдачей

• [ ] Браузер — Firefox (не Chrome)
• [ ] Скрипт открывает https://itcareerhub.de/ru
• [ ] Скрипт находит раздел «Способы оплаты»
• [ ] Файл скриншота создаётся в папке проекта
• [ ] Браузер закрывается после теста (driver.quit())
• [ ] Код добавлен в git-репозиторий
• [ ] В .gitignore исключены venv/ и *.png
• [ ] Ссылка на репозиторий вставлена в LMS