Автоматический логин

Автоматический логин — одна из ключевых задач в автоматизации тестирования веб-приложений. Используя библиотеку Puppeteer, можно эффективно симулировать процесс входа пользователя на сайт. Это важный шаг при создании тестов для функциональности, связанной с авторизацией и сессиями.

Подготовка

Для начала необходимо установить Puppeteer в проект. Это можно сделать с помощью npm: 

npm install puppeteer

Puppeteer работает с браузером Chrome или Chromium, и по умолчанию скачивает его при установке. Важно убедиться, что библиотека установлена правильно и доступна для использования.

Запуск браузера и создание страницы

После установки Puppeteer, следующим шагом будет создание экземпляра браузера и открытие новой страницы. Для этого используется следующий код: 

const puppeteer = require(&

async function startBrowser() {
    const browser = await puppeteer.launch({ headless: false }); // headless: false для отображения браузера
    const page = await browser.newPage();
    return { browser, page };
}

В этом примере браузер запускается с параметром headless: false, что позволяет наблюдать за процессом выполнения теста в реальном времени. Для реальных тестов, когда важно скрыть графический интерфейс, можно использовать headless: true.

Переход на страницу входа

Теперь, когда страница готова, можно перейти на страницу авторизации сайта. Например, если логин находится по адресу /login, следующий код обеспечит переход на нужную страницу: 

await page.goto('https://example.com/login');

Заполнение формы логина

Для автоматического ввода данных в форму логина, необходимо найти соответствующие элементы ввода на странице, такие как поля для ввода логина и пароля. В Puppeteer можно использовать page.type() для ввода текста и page.click() для кликов на элементы.

Предположим, что на странице есть следующие поля:

  • Поле для ввода логина с атрибутом name=“username”
  • Поле для ввода пароля с атрибутом name=“password”
  • Кнопка для отправки формы с атрибутом type=“submit”

Для автоматического ввода данных можно использовать следующий код: 

await page.type('input[name="username"]', 'your_username');
await page.type('input[name="password"]', 'your_password');
await page.click('button[type="submit"]');

Здесь page.type() заполняет поля, а page.click() инициирует отправку формы.

Ожидание загрузки страницы после авторизации

После того как форма отправлена, может потребоваться время на выполнение запроса и загрузку новой страницы. Для того чтобы тест не продолжался до тех пор, пока страница не будет полностью загружена, используется метод page.waitForNavigation(). Этот метод ожидает завершения навигации и перехода на новую страницу. 

await page.waitForNavigation({ waitUntil: 'networkidle0' });

Опция waitUntil: ‘networkidle0’ означает, что навигация считается завершённой, когда сеть становится неактивной, т.е. когда все запросы завершены.

Проверка успешного входа

После авторизации важно удостовериться, что вход был успешным. Для этого можно проверить, например, наличие определённых элементов на странице, которые доступны только после успешной авторизации. В Puppeteer для этого используется метод page.$()</code>, который позволяет искать элементы на странице.</p> <pre class="javascript"><code>const loggedIn = await page.$('selector_for_logged_in_element'); if (loggedIn) { console.log('Вход успешен'); } else { console.log('Ошибка входа'); }

Если элемент найден, значит, вход был успешным. Если нет — произошла ошибка, и процесс авторизации можно повторить или зарегистрировать в логах.

Обработка ошибок и сессий

Важно учитывать, что в процессе автоматического логина могут возникать различные ошибки. Например, неправильный логин или пароль. Для обработки таких случаев можно добавить проверку на наличие сообщений об ошибке на странице: 

const errorMessage = await page.$('selector_for_error_message');
if (errorMessage) {
    console.log('Неверный логин или пароль');
} else {
    console.log('Вход успешен');
}

Кроме того, важно учитывать управление сессиями. Чтобы сохранить сессию для последующих тестов или взаимодействий с сайтом, можно сохранить cookies и локальное хранилище. Puppeteer позволяет работать с cookies с помощью методов page.cookies() и page.setCookie().

Пример полного кода

Пример завершённого кода для автоматического логина: 

const puppeteer = require('puppeteer');

async function loginToSite() {
    const { browser, page } = await startBrowser();

    try {
        // Переход на страницу входа
        await page.goto('https://example.com/login');

        // Заполнение формы логина
        await page.type('input[name="username"]', 'your_username');
        await page.type('input[name="password"]', 'your_password');
        await page.click('button[type="submit"]');

        // Ожидание загрузки страницы после логина
        await page.waitForNavigation({ waitUntil: 'networkidle0' });

        // Проверка успешного входа
        const loggedIn = await page.$('selector_for_logged_in_element');
        if (loggedIn) {
            console.log('Вход успешен');
        } else {
            const errorMessage = await page.$('selector_for_error_message');
            if (errorMessage) {
                console.log('Неверный логин или пароль');
            } else {
                console.log('Ошибка при логине');
            }
        }
    } catch (error) {
        console.error('Ошибка при выполнении теста:', error);
    } finally {
        await browser.close();
    }
}

loginToSite();

Заключение

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

Оглавление